派生自 wuyushui/SewerAndRainNetwork

wangqi
2021-04-08 f0efaed32d322f4e389f77169b81992118913656
Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop

 Conflicts:
 src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue
1个文件已添加
6个文件已修改
353 ■■■■■ 已修改文件
package.json 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/css/map/map-panel-style.less 7 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue 14 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/BaseNav/PublicBounced/PublicBounced.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/plugin/proj4leaflet.js 274 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router/index.js 8 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/Temp.vue 46 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package.json
@@ -19,6 +19,7 @@
    "dayjs": "^1.9.6",
    "echarts": "^4.2.1",
    "element-ui": "^2.14.1",
    "esri-leaflet": "^3.0.1",
    "fullscreen": "^1.1.1",
    "jquery": "^3.5.1",
    "js-cookie": "^2.2.0",
@@ -28,6 +29,7 @@
    "leaflet.markercluster": "^1.4.1",
    "lodash": "^4.17.10",
    "nprogress": "^0.2.0",
    "proj4": "^2.7.2",
    "qs": "^6.10.1",
    "rbush": "^3.0.1",
    "screenfull": "^3.3.3",
src/assets/css/map/map-panel-style.less
@@ -243,13 +243,18 @@
/***************Company 图层 悬浮框样式。*********************************/
.company-bindTooltip {
  background: none;
  background: @background-color-split;
  border: none;
  color: red;
  font-size: 16px;
  font-weight: 900 !important;
  text-shadow: 0 0 5px #fff;
  //filter:Dropshadow(offx=1,offy=0,color=white)
  //Dropshadow(offx=0,offy=1,color=white)
  //Dropshadow(offx=0,offy=-1,color=white)
  //Dropshadow(offx=-1,offy=0,color=white);
  box-shadow: none;
  -webkit-text-stroke: .5px #fff;
}
.company-bindTooltip-hover h3 {
src/components/BaseNav/PublicBounced/GasComponents/ECharts.vue
@@ -21,7 +21,7 @@
          </div>
        </el-dialog>
      </div>
      <div style="width:100%;height:1.2rem;margin-top:-0.1rem;position:absolute;" id="echarts" ref="main">
      <div style="width:100%;height:1rem;margin-top:-0.1rem;position:absolute;" id="echarts" ref="main">
      </div>
    </div>
  </div>
@@ -219,22 +219,20 @@
    this.$nextTick(() => {
      this.drawChart()
      const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getWasteWaterMonitoring))
      console.log(dataWatch)
      // console.log(dataWatch)
      for (var i = 0; i < dataWatch.length; i++) {
        this.dataDate.push(dataWatch[i].MonTimeStr.substring(10, 17))
      }
      console.log(this.dataDate)
      // console.log(this.dataDate)
    })
  }
}
</script>
<style scoped lang="less">
#Tab {
  height: 3rem;
}
.Infomation {
  margin-left: 10px;
  height: 0.2rem;
}
.el-tag {
@@ -250,7 +248,7 @@
.form-echrts {
  width: 100%;
  height: 100%;
  height: 1rem;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .el-dialog-div {
@@ -262,7 +260,7 @@
  #echarts {
    margin: 0;
    padding: 0;
    height: 3rem;
    //height: 3rem;
    //border: 1px solid #396d83;
    //margin: 10px 10px 10px 10px;
  }
src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -107,7 +107,7 @@
      this.setWasteWaterdata = dataWater
      // console.log(data)
      this.getWasteWaterMonitoring = drawData
      console.log(drawData)
      // console.log(drawData)
      this.getWasteWaterMonitoringDetails = dataDetail
      this.displayContentTitle = dataWater.Name
      this.flag = true
src/components/plugin/proj4leaflet.js
New file
@@ -0,0 +1,274 @@
/* eslint-disable */
let L = window.L
(function (factory) {
    var L, proj4;
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['leaflet', 'proj4'], factory);
    } else if (typeof module === 'object' && typeof module.exports === "object") {
        // Node/CommonJS
        L = require('leaflet');
        proj4 = require('proj4');
        module.exports = factory(L, proj4);
    } else {
        // Browser globals
        if (typeof window.L === 'undefined' || typeof window.proj4 === 'undefined')
            throw 'Leaflet and proj4 must be loaded first';
        factory(window.L, window.proj4);
    }
}(function (L, proj4) {
    if (proj4.__esModule && proj4.default) {
        // If proj4 was bundled as an ES6 module, unwrap it to get
        // to the actual main proj4 object.
        // See discussion in https://github.com/kartena/Proj4Leaflet/pull/147
        proj4 = proj4.default;
    }
    L.Proj = {};
    L.Proj._isProj4Obj = function(a) {
        return (typeof a.inverse !== 'undefined' &&
            typeof a.forward !== 'undefined');
    };
    L.Proj.Projection = L.Class.extend({
        initialize: function(code, def, bounds) {
            var isP4 = L.Proj._isProj4Obj(code);
            this._proj = isP4 ? code : this._projFromCodeDef(code, def);
            this.bounds = isP4 ? def : bounds;
        },
        project: function (latlng) {
            var point = this._proj.forward([latlng.lng, latlng.lat]);
            return new L.Point(point[0], point[1]);
        },
        unproject: function (point, unbounded) {
            var point2 = this._proj.inverse([point.x, point.y]);
            return new L.LatLng(point2[1], point2[0], unbounded);
        },
        _projFromCodeDef: function(code, def) {
            if (def) {
                proj4.defs(code, def);
            } else if (proj4.defs[code] === undefined) {
                var urn = code.split(':');
                if (urn.length > 3) {
                    code = urn[urn.length - 3] + ':' + urn[urn.length - 1];
                }
                if (proj4.defs[code] === undefined) {
                    throw 'No projection definition for code ' + code;
                }
            }
            return proj4(code);
        }
    });
    L.Proj.CRS = L.Class.extend({
        includes: L.CRS,
        options: {
            transformation: new L.Transformation(1, 0, -1, 0)
        },
        initialize: function(a, b, c) {
            var code,
                proj,
                def,
                options;
            if (L.Proj._isProj4Obj(a)) {
                proj = a;
                code = proj.srsCode;
                options = b || {};
                this.projection = new L.Proj.Projection(proj, options.bounds);
            } else {
                code = a;
                def = b;
                options = c || {};
                this.projection = new L.Proj.Projection(code, def, options.bounds);
            }
            L.Util.setOptions(this, options);
            this.code = code;
            this.transformation = this.options.transformation;
            if (this.options.origin) {
                this.transformation =
                    new L.Transformation(1, -this.options.origin[0],
                        -1, this.options.origin[1]);
            }
            if (this.options.scales) {
                this._scales = this.options.scales;
            } else if (this.options.resolutions) {
                this._scales = [];
                for (var i = this.options.resolutions.length - 1; i >= 0; i--) {
                    if (this.options.resolutions[i]) {
                        this._scales[i] = 1 / this.options.resolutions[i];
                    }
                }
            }
            this.infinite = !this.options.bounds;
        },
        scale: function(zoom) {
            var iZoom = Math.floor(zoom),
                baseScale,
                nextScale,
                scaleDiff,
                zDiff;
            if (zoom === iZoom) {
                return this._scales[zoom];
            } else {
                // Non-integer zoom, interpolate
                baseScale = this._scales[iZoom];
                nextScale = this._scales[iZoom + 1];
                scaleDiff = nextScale - baseScale;
                zDiff = (zoom - iZoom);
                return baseScale + scaleDiff * zDiff;
            }
        },
        zoom: function(scale) {
            // Find closest number in this._scales, down
            var downScale = this._closestElement(this._scales, scale),
                downZoom = this._scales.indexOf(downScale),
                nextScale,
                nextZoom,
                scaleDiff;
            // Check if scale is downScale => return array index
            if (scale === downScale) {
                return downZoom;
            }
            if (downScale === undefined) {
                return -Infinity;
            }
            // Interpolate
            nextZoom = downZoom + 1;
            nextScale = this._scales[nextZoom];
            if (nextScale === undefined) {
                return Infinity;
            }
            scaleDiff = nextScale - downScale;
            return (scale - downScale) / scaleDiff + downZoom;
        },
        distance: L.CRS.Earth.distance,
        R: L.CRS.Earth.R,
        /* Get the closest lowest element in an array */
        _closestElement: function(array, element) {
            var low;
            for (var i = array.length; i--;) {
                if (array[i] <= element && (low === undefined || low < array[i])) {
                    low = array[i];
                }
            }
            return low;
        }
    });
    L.Proj.GeoJSON = L.GeoJSON.extend({
        initialize: function(geojson, options) {
            this._callLevel = 0;
            L.GeoJSON.prototype.initialize.call(this, geojson, options);
        },
        addData: function(geojson) {
            var crs;
            if (geojson) {
                if (geojson.crs && geojson.crs.type === 'name') {
                    crs = new L.Proj.CRS(geojson.crs.properties.name);
                } else if (geojson.crs && geojson.crs.type) {
                    crs = new L.Proj.CRS(geojson.crs.type + ':' + geojson.crs.properties.code);
                }
                if (crs !== undefined) {
                    this.options.coordsToLatLng = function(coords) {
                        var point = L.point(coords[0], coords[1]);
                        return crs.projection.unproject(point);
                    };
                }
            }
            // Base class' addData might call us recursively, but
            // CRS shouldn't be cleared in that case, since CRS applies
            // to the whole GeoJSON, inluding sub-features.
            this._callLevel++;
            try {
                L.GeoJSON.prototype.addData.call(this, geojson);
            } finally {
                this._callLevel--;
                if (this._callLevel === 0) {
                    delete this.options.coordsToLatLng;
                }
            }
        }
    });
    L.Proj.geoJson = function(geojson, options) {
        return new L.Proj.GeoJSON(geojson, options);
    };
    L.Proj.ImageOverlay = L.ImageOverlay.extend({
        initialize: function (url, bounds, options) {
            L.ImageOverlay.prototype.initialize.call(this, url, null, options);
            this._projectedBounds = bounds;
        },
        // Danger ahead: Overriding internal methods in Leaflet.
        // Decided to do this rather than making a copy of L.ImageOverlay
        // and doing very tiny modifications to it.
        // Future will tell if this was wise or not.
        _animateZoom: function (event) {
            var scale = this._map.getZoomScale(event.zoom);
            var northWest = L.point(this._projectedBounds.min.x, this._projectedBounds.max.y);
            var offset = this._projectedToNewLayerPoint(northWest, event.zoom, event.center);
            L.DomUtil.setTransform(this._image, offset, scale);
        },
        _reset: function () {
            var zoom = this._map.getZoom();
            var pixelOrigin = this._map.getPixelOrigin();
            var bounds = L.bounds(
                this._transform(this._projectedBounds.min, zoom)._subtract(pixelOrigin),
                this._transform(this._projectedBounds.max, zoom)._subtract(pixelOrigin)
            );
            var size = bounds.getSize();
            L.DomUtil.setPosition(this._image, bounds.min);
            this._image.style.width = size.x + 'px';
            this._image.style.height = size.y + 'px';
        },
        _projectedToNewLayerPoint: function (point, zoom, center) {
            var viewHalf = this._map.getSize()._divideBy(2);
            var newTopLeft = this._map.project(center, zoom)._subtract(viewHalf)._round();
            var topLeft = newTopLeft.add(this._map._getMapPanePos());
            return this._transform(point, zoom)._subtract(topLeft);
        },
        _transform: function (point, zoom) {
            var crs = this._map.options.crs;
            var transformation = crs.transformation;
            var scale = crs.scale(zoom);
            return transformation.transform(point, scale);
        }
    });
    L.Proj.imageOverlay = function (url, bounds, options) {
        return new L.Proj.ImageOverlay(url, bounds, options);
    };
    return L.Proj;
}));
src/router/index.js
@@ -35,9 +35,11 @@
    console.log(homeRouterName)
    next()
  } else if (!token) {
    next({
      name: LOGIN_PAGE_ROUTE_NAME // 跳转到登录页
    })
    // next({
    //   name: LOGIN_PAGE_ROUTE_NAME // 跳转到登录页
    // })
    console.log(LOGIN_PAGE_ROUTE_NAME)
    next()
  } else {
    next()
  }
src/views/Temp.vue
@@ -35,7 +35,11 @@
// // 公共展示数据
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'
const esri = require('esri-leaflet')
// const proj4 = require('proj4')
const proj4 = require('proj4')
window.proj4 = proj4
const Proj = require('../components/plugin/proj4leaflet')
export default {
  name: 'Temp',
  components: {
@@ -82,6 +86,35 @@
    },
    init () {
      const mapcontainer = this.$refs.rootmap
      const CRS_4490 = new Proj.CRS('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs', {
        resolutions: [
          1.40625,
          0.703125,
          0.3515625,
          0.17578125,
          0.087890625,
          0.0439453125,
          0.02197265625,
          0.010986328125,
          0.0054931640625,
          0.00274658203125,
          0.001373291015625,
          6.866455078125E-4,
          3.4332275390625E-4,
          1.71661376953125E-4,
          8.58306884765625E-5,
          4.291534423828125E-5,
          2.1457672119140625E-5,
          1.0728836059570312E-5,
          5.364418029785156E-6,
          2.682209064925356E-6,
          1.3411045324626732E-6
        ],
        origin: [-180, 90]
      })
      console.log(mapcontainer)
      console.log(CRS_4490)
      debugger
      this.map = Sgis.initMap(mapcontainer)
      this.$refs.toolBox.map = this.map
@@ -94,7 +127,7 @@
      window.layerFactory = layerFactory
      this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 初始化基础底图助手
      this.basemapHelper.initBasemap(this.config, true) // 第二个参数,表示是否内网底图
      this.basemapHelper.initBasemap(this.config, false) // 第二个参数,表示是否内网底图
      // this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 初始化动态要素图层助手
      // this.vectorLayerHelper.initVectorLayers(this.config)
@@ -106,6 +139,15 @@
      // this.setBasemapHelper(this.basemapHelper)
      // this.setServiceLayerHelper(this.serviceLayerHelper)
      // this.setVectorLayerHelper(this.vectorLayerHelper)
      this.loadArcgisImg()
    },
    loadArcgisImg () {
      // const url = 'http://10.246.132.249:8080/OneMapServer/rest/services/base-map-image-enterprise/MapServer/tile/{z}/{y}/{x}'
      const url = 'http://10.246.132.249:8080/OneMapServer/rest/services/base-map-image-enterprise/MapServer'
      // const arcgisTileLayer = this.L.tileLayer(url, {
      const arcgisTileLayer = esri.tiledMapLayer({ url: url })
      // const arcgisTileLayer = esri.dynamicMapLayer({ url: url })
      arcgisTileLayer.addTo(this.map)
    },
    onLayerClick () {
      this.$refs.popup.setShow()