Эх сурвалжийг харах

图层数据(查看模型数据定位某一个图斑高亮显示)(完成)
卷帘对比,可选择两侧的地图底图。(完成)
同屏比对,添加自定义标记功能(30%)

DESKTOP-6LTVLN7\Liumouren 2 жил өмнө
parent
commit
784ede3a65

+ 33 - 12
public/index.html

@@ -1,35 +1,52 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <script type="text/javascript" src="./static/config/config.js"></script> 
+    <script type="text/javascript" src="./static/config/config.js"></script>
 
     <script src="./static/plugins/js/jquery/jquery.min.js"></script>
     <script src="./static/plugins/js/turf/turf.min.js"></script>
-    <link rel="stylesheet" href="./static/plugins/js/leaflet1.3.1/leaflet.css">
+    <link
+      rel="stylesheet"
+      href="./static/plugins/js/leaflet1.3.1/leaflet.css"
+    />
     <script src="./static/plugins/js/leaflet1.3.1/leaflet.js"></script>
     <script src="./static/plugins/js/leaflet1.3.1/leaflet-side-by-side.js"></script>
     <script src="./static/plugins/js/esri-leaflet-v3.0.4/esri-leaflet.js"></script>
     <script src="./static/plugins/js/leaflet1.3.1/leaflet.measure.js"></script>
-    <link rel="stylesheet" type="text/css" href="./static/plugins/js/leaflet1.3.1/leaflet.measure.css">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="./static/plugins/js/leaflet1.3.1/leaflet.measure.css"
+    />
     <script src="./static/plugins/js/leaflet1.3.1/leaflet.label.js"></script>
     <script src="./static/plugins/js/leaflet/proj4.js"></script>
     <script src="./static/plugins/js/leaflet/proj4-compressed.js"></script>
     <script src="./static/plugins/js/leaflet/proj4leaflet.js"></script>
     <script src="./static/plugins/draw-plugin/lodash.js"></script>
     <script src="./static/plugins/draw-plugin/leaflet.draw.js"></script>
+    <script src="./static/plugins/draw-plugin/leafletDraw2.js"></script>
     <script src="./static/plugins/js/leaflet/shpjs.js"></script>
-    <link rel="stylesheet" type="text/css" href="./static/plugins/js/leaflet1.3.1/leaflet.label.css">
-    <link rel="stylesheet" type="text/css" href="./static//plugins/draw-plugin/leaflet.draw.css">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="./static/plugins/js/leaflet1.3.1/leaflet.label.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="./static//plugins/draw-plugin/leaflet.draw.css"
+    />
     <style type="text/css" media="screen">
-      .leaflet-control-attribution{
+      .leaflet-control-attribution {
         display: none;
       }
-      html,body{
+      html,
+      body {
         border: 0px;
         margin: 0px;
         padding: 0px;
@@ -40,7 +57,11 @@
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
   </body>

+ 19 - 20
public/static/plugins/draw-plugin/leaflet.draw.js

@@ -108,11 +108,11 @@ L.Control.Draw = L.Control.extend({
     }
     _this.tmpMarkers = [];
     //关闭地图双击事件
-    map2DViewer.map.doubleClickZoom.disable();
+    _this._map.doubleClickZoom.disable();
     //监听地图单击事件
-    map2DViewer.map.on("click", _this._onClickPoint, this);
+    _this._map.on("click", _this._onClickPoint, this);
     //监听鼠标移动事件
-    map2DViewer.map.on("mousemove", _this._mousemove, this);
+    _this._map.on("mousemove", _this._mousemove, this);
   },
 
   _mousemove: function (e) {
@@ -173,7 +173,7 @@ L.Control.Draw = L.Control.extend({
         }).addTo(_this._map);
       }
     } else {
-      map2DViewer.map.off("mousemove");
+      this._map.off("mousemove");
       // console.log("lmx");
     }
   },
@@ -365,12 +365,11 @@ L.Control.Draw = L.Control.extend({
   _onFinishClick: function () {
     _this = this;
     //关闭地图双击事件
-    map2DViewer.map.doubleClickZoom.enable();
+    _this._map.doubleClickZoom.enable();
     //监听地图单击事件
-    map2DViewer.map.off("click", _this._onClickPoint, this);
+    _this._map.off("click", _this._onClickPoint, this);
     //监听鼠标移动事件
-    console.log("鼠标移动this --test", "_onFinishClick");
-    map2DViewer.map.off("mousemove", _this._mousemove, this);
+    _this._map.off("mousemove", _this._mousemove, this);
     _this.isNewElevation = true;
     _this._finished = true;
     _this._map.removeLayer(_this.moveMarker);
@@ -421,7 +420,7 @@ L.Control.Draw = L.Control.extend({
           });
           L.DomEvent.on(saveLabel, "click", function (e) {
             L.DomEvent.stopPropagation(e);
-            map2DViewer.map.fire("draw-result", {
+            _this._map.fire("draw-result", {
               distance: _this._measureObjs[delLabel.lC].distance,
               points: _this._measureObjs[delLabel.lC].measurePoints,
               area: _this._measureObjs[delLabel.lC].area || 0,
@@ -480,7 +479,7 @@ L.Control.Draw = L.Control.extend({
       });
       L.DomEvent.on(saveLabel, "click", function (e) {
         L.DomEvent.stopPropagation(e);
-        map2DViewer.map.fire("draw-result", {
+        _this._map.fire("draw-result", {
           distance: _this._measureObjs[delLabel.lC].distance,
           points: _this._measureObjs[delLabel.lC].measurePoints,
           area: _this._measureObjs[delLabel.lC].area || 0,
@@ -571,7 +570,7 @@ L.Control.Draw = L.Control.extend({
       });
       L.DomEvent.on(saveLabel, "click", function (e) {
         L.DomEvent.stopPropagation(e);
-        map2DViewer.map.fire("draw-result", {
+        _this._map.fire("draw-result", {
           distance: _this._measureObjs[delLabel.lC].distance,
           points: _this._measureObjs[delLabel.lC].measurePoints,
           area: _this._measureObjs[delLabel.lC].area || 0,
@@ -613,8 +612,8 @@ L.Control.Draw = L.Control.extend({
 /**
  * 测量工具
  */
-map2DViewer.drawToolFire = function (data) {
-};
+// map2DViewer.drawToolFire = function (data) {
+// };
 map2DViewer.setDrawTool = function (options) {
   mousemoveStatus = true;
   var defaultData = {
@@ -629,6 +628,7 @@ map2DViewer.setDrawTool = function (options) {
   _.merge(defaultData, options);
   switch (defaultData.action) {
     case "add":
+      this._map = defaultData.map;
       this.measureTool = new L.Control.Draw({
         position: defaultData.position,
         offset: defaultData.offset,
@@ -638,22 +638,21 @@ map2DViewer.setDrawTool = function (options) {
         closeButton: defaultData.closeButton,
         iconUrl:
           "/static/plugins/draw-plugin/images/marker-icon.png",
-      }).addTo(this.map);
-      this.map.on("draw-result", map2DViewer.drawToolFire);
+      }).addTo(this._map);
+      this._map.on("draw-result", map2DViewer.drawToolFire);
       return this.distanceTool;
-      break;
     case "remove":
-      this.map.off("draw-result", map2DViewer.drawToolFire);
+      this._map.off("draw-result", map2DViewer.drawToolFire);
       if (this.measureTool) {
         // 移除绘制的图形
         this.measureTool._measureGroup &&
           this.measureTool._measureGroup.remove();
 
         mousemoveStatus = false;
-        map2DViewer.map.doubleClickZoom.disable();
-        map2DViewer.map.off("click");
+        this._map.doubleClickZoom.disable();
+        this._map.off("click");
         if (this.measureTool.moveMarker) {
-          this.map.removeLayer(this.measureTool.moveMarker);
+          this._map.removeLayer(this.measureTool.moveMarker);
           this.measureTool.moveMarker = null;
         }
         this.measureTool.remove();

+ 544 - 0
public/static/plugins/draw-plugin/leafletDraw2.js

@@ -0,0 +1,544 @@
+let mousemove2Status = true;
+let LControlDraw = L.Control.extend({
+    //是否初始化
+    _initialized: false,
+
+    //统计
+    _lC: 0,
+    //测量对象集合
+    _measureObjs: {},
+    //是否完成当前测绘
+    _finished: true,
+
+    //新测量
+    isNewElevation: true,
+
+    moveMarker: false,
+
+    //测量参数
+    options: {
+        position: "topright",
+        autoZIndex: true,
+        offset: [0, 0],
+        background: "#000",
+        color: "#fff",
+        size: 14,
+        closeButton: true,
+        iconUrl: "./images/marker-icon.png"
+    },
+
+    initialize: function (options) {
+        L.setOptions(this, options);
+        return this;
+    },
+
+    onAdd: function (map) {
+        this._map = map;
+        this._createControl();
+        switch (this.options.position) {
+            case "topleft":
+                this._container.style.marginLeft = this.options.offset[0] + "px";
+                this._container.style.marginTop = this.options.offset[1] + "px";
+                break;
+            case "topright":
+                this._container.style.marginRight = this.options.offset[0] + "px";
+                this._container.style.marginTop = this.options.offset[1] + "px";
+                break;
+            case "bottomleft":
+                this._container.style.marginLeft = this.options.offset[0] + "px";
+                this._container.style.marginBottom = this.options.offset[1] + "px";
+                break;
+            case "bottomright":
+                this._container.style.marginRight = this.options.offset[0] + "px";
+                this._container.style.marginBottom = this.options.offset[1] + "px";
+                break;
+        }
+        return this._container;
+    },
+
+    _createControl: function () {
+        var _this = this;
+        this._container = L.DomUtil.create("div", "leaflet-bar leaflet-control-measure");
+
+        var link = L.DomUtil.create("a", "leaflet-control-measure-link", this._container);
+        link.title = "测量";
+        // L.DomUtil.create("span", "", link);
+
+        L.DomEvent.on(this._container, "contextmenu", L.DomEvent.stopPropagation)
+            .on(link, "click", L.DomEvent.stopPropagation)
+            .on(link, "click", function () {
+                if (_this._finished) {
+                    //开启新的测量
+                    _this.start();
+                } else {
+                    _this._finished = true;
+                }
+            });
+        // _this.start();
+    },
+
+    start: function () {
+        var _this = this;
+        _this._finished = false;
+        L.DomUtil.addClass(_this._container, "active");
+        _this._addMeasureGroup();
+    },
+
+    _addMeasureGroup: function () {
+        var _this = this;
+        if (!_this._initialized) {
+            _this._measureGroup = new L.featureGroup();
+            _this._measureGroup.addTo(this._map);
+            _this._initialized = true;
+        }
+        if (_this.isNewElevation) {
+            _this._lC++;
+            _this._measureObjs[_this._lC] = new L.FeatureGroup();
+            _this._measureObjs[_this._lC].addTo(_this._measureGroup);
+            _this.isNewElevation = false;
+            _this._measureObjs[_this._lC].measurePoints = [];
+        }
+        _this.tmpMarkers = [];
+        //关闭地图双击事件
+        _this._map.doubleClickZoom.disable();
+        //监听地图单击事件
+        _this._map.on("click", _this._onClickPoint, this);
+        //监听鼠标移动事件
+        _this._map.on("mousemove", _this._mousemove, this);
+    },
+
+    _mousemove: function (e) {
+        if (mousemove2Status) {
+            var _this = this;
+            e.latlng = _this.latlngRectifying(e);
+            if (_this.moveMarker) {
+                _this.moveMarker.setLatLng(e.latlng);
+                if (_this._measureObjs[_this._lC].polyline) {
+                    _this._measureObjs[_this._lC].measurePoints.push([e.latlng.lat, e.latlng.lng]);
+                    var points = _this._measureObjs[_this._lC].measurePoints;
+                    if (_this._measureObjs[_this._lC].measurePoints.length == 2) {
+                        var radius = L.latLng(points[1]).distanceTo(L.latLng(points[0]));
+                        _this._measureObjs[_this._lC].circle.setRadius(radius);
+                    } else if (_this._measureObjs[_this._lC].measurePoints.length == 3 && e.latlng.indexMarker == 1) {
+                        _this._measureObjs[_this._lC].circle.setStyle({
+                            opacity: 1
+                        });
+                    } else {
+                        _this._measureObjs[_this._lC].circle.setStyle({
+                            opacity: 0
+                        });
+                    }
+                    if (_this._measureObjs[_this._lC].measurePoints.length > 2) {
+                        var coors = _.clone(_this._measureObjs[_this._lC].measurePoints);
+                        coors.push(
+                            _this._measureObjs[_this._lC].measurePoints[_this._measureObjs[_this._lC].measurePoints.length - 1]
+                        );
+                        if (_this._measureObjs[_this._lC].polygon) {
+                            _this._measureObjs[_this._lC].polygon.setLatLngs([coors]);
+                        } else {
+                            _this._measureObjs[_this._lC].polygon = L.polygon([coors], {
+                                color: "#fff",
+                                weight: 0,
+                                fillColor: "#fff",
+                                fillOpacity: 0.3
+                            }).addTo(_this._measureObjs[_this._lC]);
+                        }
+                    }
+                    _this._measureObjs[_this._lC].polyline.setLatLngs(points);
+                    //实时计算测量数据
+                    var moveData = _.clone(points);
+                    _this._moveInfo(moveData);
+                    _this._measureObjs[_this._lC].measurePoints.pop();
+                }
+            } else {
+                _this.moveMarker = L.circleMarker(e.latlng, {
+                    radius: 10,
+                    color: "#f00"
+                }).addTo(_this._map);
+            }
+        } else {
+            this._map.off("mousemove");
+            // console.log("lmx");
+        }
+    },
+
+    //测量时,根据鼠标移动点位信息
+    _moveInfo: function (data) {
+        var _this = this;
+        var lineDistance = 0;
+        for (var i = 1; i < data.length; i++) {
+            var curcoor = data[i];
+            var prePoint = data[i - 1];
+            lineDistance = L.latLng(curcoor).distanceTo(prePoint);
+            var lineDistanceStr =
+                lineDistance > 1000 ? (lineDistance / 1000).toFixed(2) + "公里" : Math.ceil(lineDistance) + "米";
+            if (i == data.length - 1) {
+                var pointAngle = L.Util.getAngleByLatLng(prePoint[1], prePoint[0], curcoor[1], curcoor[0]);
+            }
+        }
+        //添加分段信息
+        var oLabelObj = L.DomUtil.create("div", "measure-content");
+        var pointText = L.DomUtil.create("span", "measure-result-text");
+        pointText.innerHTML = lineDistanceStr;
+        oLabelObj.appendChild(pointText);
+        if (data.length > 1) {
+            if (_this.tmpMarkers[data.length - 2]) {
+                //如果最后一个点存在,更新最后一个点信息
+                _this.tmpMarkers[data.length - 2].setLatLng(data[data.length - 1]);
+                _this.tmpMarkers[data.length - 2].label.setContent(oLabelObj);
+            } else {
+                //如果最后一个点不存在,创建点信息
+                var marker = L.marker(data[data.length - 1], {
+                    icon: L.divIcon({ className: "measuremarker", iconSize: [4, 4] })
+                });
+                marker.bindLabel(oLabelObj, {
+                    noHide: true,
+                    clickable: true,
+                    className: "measure-tip",
+                    offset: [0, 0]
+                });
+                marker.addTo(_this._measureObjs[_this._lC]);
+                _this.tmpMarkers.push(marker);
+            }
+        }
+    },
+
+    /**
+     * 通过坐标点计算面积
+     * @type {Function}
+     * @returns {Number} 面积
+     * @private
+     */
+    _getArea: function (_lc) {
+        var _this = this;
+        var latLngs = _this._measureObjs[_lc].measurePoints;
+        var pointsCount = latLngs.length,
+            area = 0.0,
+            d2r = Math.PI / 180,
+            p1,
+            p2;
+        if (pointsCount > 2) {
+            for (var i = 0; i < pointsCount; i++) {
+                p1 = latLngs[i];
+                p2 = latLngs[(i + 1) % pointsCount];
+                area += (p2[1] - p1[1]) * d2r * (2 + Math.sin(p1[0] * d2r) + Math.sin(p2[0] * d2r));
+            }
+            area = (area * 6378137.0 * 6378137.0) / 2.0;
+        }
+
+        area = Math.abs(area);
+
+        if (area > 1000000) {
+            area = (area * 0.000001).toFixed(2) + " 平方公里";
+        } else {
+            area = area.toFixed(2) + " 米&sup2;";
+        }
+
+        return area;
+    },
+
+    latlngRectifying: function (e) {
+        var _this = this;
+        var curLatlngs = [];
+        var curpx = e.layerPoint;
+        var length = _this._measureObjs[_this._lC] ? _this._measureObjs[_this._lC].measurePoints.length : 0;
+        var latlng = e.latlng;
+        if (length > 0) {
+            curLatlngs.push({
+                latlng: _this._measureObjs[_this._lC].measurePoints[0],
+                px: _this._map.latLngToLayerPoint(_this._measureObjs[_this._lC].measurePoints[0])
+            });
+            curLatlngs.push({
+                latlng: _this._measureObjs[_this._lC].measurePoints[length - 1],
+                px: _this._map.latLngToLayerPoint(_this._measureObjs[_this._lC].measurePoints[length - 1])
+            });
+        }
+        for (var i = 0; i < curLatlngs.length; i++) {
+            var dispx = Math.sqrt(
+                (curpx.x - curLatlngs[i].px.x) * (curpx.x - curLatlngs[i].px.x) +
+                (curpx.y - curLatlngs[i].px.y) * (curpx.y - curLatlngs[i].px.y)
+            );
+            if (dispx < 10) {
+                latlng = L.latLng(curLatlngs[i].latlng);
+                latlng.reset = true;
+                latlng.indexMarker = i;
+                break;
+            }
+        }
+        return latlng;
+    },
+
+    _onClickPoint: function (e) {
+        var _this = this;
+        e.latlng = _this.latlngRectifying(e);
+        if (!e.latlng.reset) {
+            _this._measureObjs[_this._lC].measurePoints.push([e.latlng.lat, e.latlng.lng]);
+        } else {
+            if (e.latlng.indexMarker == 0) {
+                if (_this._measureObjs[_this._lC].polygon) {
+                    _this._measureObjs[_this._lC].measurePoints.push([e.latlng.lat, e.latlng.lng]);
+                    _this._measureObjs[_this._lC].polygon.setLatLngs(_this._measureObjs[_this._lC].measurePoints);
+                    _this._measureObjs[_this._lC].polygon.setStyle({
+                        fillColor: "#f00",
+                        color: "#f00",
+                        weight: 0,
+                        fillOpacity: 0.3
+                    });
+                } else {
+                    _this._measureObjs[_this._lC].removeLayer(_this._measureObjs[_this._lC].circle);
+                    _this._measureObjs[_this._lC].removeLayer(_this._measureObjs[_this._lC].polyline);
+                }
+            } else {
+                _this._measureObjs[_this._lC].removeLayer(_this._measureObjs[_this._lC].polygon);
+                _this._measureObjs[_this._lC].polygon = null;
+            }
+            _this._onFinishClick();
+        }
+
+        if (_this._measureObjs[_this._lC].measurePoints.length == 1 && !_this._finished) {
+            var latlngs = [
+                [e.latlng.lat, e.latlng.lng],
+                [e.latlng.lat, e.latlng.lng]
+            ];
+
+            _this._measureObjs[_this._lC].polyline = L.polyline(latlngs, {
+                color: "red",
+                dashArray: 10
+            }).addTo(_this._measureObjs[_this._lC]);
+            _this._measureObjs[_this._lC].circle = L.circle([e.latlng.lat, e.latlng.lng], {
+                radius: 0,
+                color: "red",
+                fillOpacity: 0
+            }).addTo(_this._measureObjs[_this._lC]);
+        } else {
+            // _this._measureObjs[_this._lC].removeLayer(_this._measureObjs[_this._lC].circle);
+        }
+    },
+    _onFinishClick: function () {
+        let _this = this;
+        //关闭地图双击事件
+        _this._map.doubleClickZoom.enable();
+        //监听地图单击事件
+        _this._map.off("click", _this._onClickPoint, this);
+        //监听鼠标移动事件
+        _this._map.off("mousemove", _this._mousemove, this);
+        _this.isNewElevation = true;
+        _this._finished = true;
+        _this._map.removeLayer(_this.moveMarker);
+        _this.moveMarker = null;
+
+        for (var i = 0; i < _this.tmpMarkers.length; i++) {
+            _this._measureObjs[_this._lC].removeLayer(_this.tmpMarkers[i]);
+        }
+        _this.tmpMarkers = [];
+
+        //根据点集合渲染marker点
+        var coorslength = _this._measureObjs[_this._lC].measurePoints.length;
+        _this._measureObjs[_this._lC].markerObjs = [];
+        var lineDistance = 0;
+        if (coorslength > 1) {
+            for (var i = 0; i < coorslength; i++) {
+                var curcoor = _this._measureObjs[_this._lC].measurePoints[i];
+
+                var marker = L.marker(curcoor, {
+                    draggable: true,
+                    icon: L.divIcon({ className: "measuremarker", iconSize: [10, 10] })
+                });
+
+                if (i > 0) {
+                    var prePoint = _this._measureObjs[_this._lC].measurePoints[i - 1];
+                    lineDistance = L.latLng(curcoor).distanceTo(prePoint);
+                    var lineDistanceStr =
+                        lineDistance > 1000 ? (lineDistance / 1000).toFixed(2) + "公里" : Math.ceil(lineDistance) + "米";
+                    var pointAngle = L.Util.getAngleByLatLng(prePoint[1], prePoint[0], curcoor[1], curcoor[0]);
+                    //添加分段信息
+                    var oLabelObj = L.DomUtil.create("div", "measure-content");
+                    var delLabel = L.DomUtil.create("div", "measure-ico-del");
+                    var saveLabel = L.DomUtil.create("div", "measure-ico-save");
+                    var pointText = L.DomUtil.create("span", "measure-result-text");
+                    pointText.innerHTML = lineDistanceStr;
+                    delLabel.lC = _this._lC;
+                    saveLabel.lC = _this._lC;
+                    L.DomEvent.on(delLabel, "click", function (e) {
+                        L.DomEvent.stopPropagation(e);
+                        _this.del(delLabel.lC);
+                    });
+                    L.DomEvent.on(saveLabel, "click", function (e) {
+                        L.DomEvent.stopPropagation(e);
+                        _this._map.fire("draw-result", {
+                            distance: _this._measureObjs[delLabel.lC].distance,
+                            points: _this._measureObjs[delLabel.lC].measurePoints,
+                            area: _this._measureObjs[delLabel.lC].area || 0,
+                            LC: delLabel.lC
+                        });
+                    });
+                    if (i == coorslength - 1) {
+                        //测量面积
+                        if (_this._measureObjs[_this._lC].polygon) {
+                            var area = _this._getArea(_this._lC);
+                            _this._measureObjs[_this._lC].area = area;
+                            pointText.innerHTML = lineDistanceStr + "<br/>" + area;
+                        }
+                        oLabelObj.appendChild(delLabel);
+                        oLabelObj.appendChild(saveLabel);
+                    }
+                    oLabelObj.appendChild(pointText);
+                    marker.bindLabel(oLabelObj, {
+                        noHide: true,
+                        clickable: true,
+                        className: "measure-tip",
+                        offset: [0, 0]
+                    });
+                }
+                marker.LC = _this._lC;
+                marker.LIndex = i;
+                marker.addTo(_this._measureObjs[_this._lC]);
+                _this._measureObjs[_this._lC].markerObjs.push(marker);
+                if (!(i == 0 && _this._measureObjs[_this._lC].polygon)) {
+                    marker.on("move", function (e) {
+                        _this._renderMeasure({
+                            LC: e.target.LC,
+                            LIndex: e.target.LIndex,
+                            latlng: e.latlng
+                        });
+                    });
+                }
+            }
+        } else {
+            var curcoor = _this._measureObjs[_this._lC].measurePoints[0];
+            var myIcon = L.icon({
+                iconUrl: this.options.iconUrl,
+                iconSize: [25, 41],
+                iconAnchor: [12, 41]
+            });
+            var marker = L.marker(curcoor, { draggable: true, icon: myIcon });
+            var oLabelObj = L.DomUtil.create("div", "measure-content");
+            var delLabel = L.DomUtil.create("div", "measure-ico-del");
+            var saveLabel = L.DomUtil.create("div", "measure-ico-save");
+            delLabel.lC = _this._lC;
+            saveLabel.lC = _this._lC;
+            L.DomEvent.on(delLabel, "click", function (e) {
+                L.DomEvent.stopPropagation(e);
+                _this.del(delLabel.lC);
+            });
+            L.DomEvent.on(saveLabel, "click", function (e) {
+                L.DomEvent.stopPropagation(e);
+                _this._map.fire("draw-result", {
+                    distance: _this._measureObjs[delLabel.lC].distance,
+                    points: _this._measureObjs[delLabel.lC].measurePoints,
+                    area: _this._measureObjs[delLabel.lC].area || 0,
+                    LC: delLabel.lC
+                });
+            });
+            oLabelObj.appendChild(delLabel);
+            oLabelObj.appendChild(saveLabel);
+            marker.bindLabel(oLabelObj, {
+                noHide: true,
+                clickable: true,
+                className: "measure-tip",
+                offset: [0, 0]
+            });
+            marker.LC = _this._lC;
+            marker.LIndex = i;
+            marker.addTo(_this._measureObjs[_this._lC]);
+            _this._measureObjs[_this._lC].markerObjs.push(marker);
+        }
+
+        _this._measureObjs[_this._lC].distance = lineDistance;
+    },
+    _renderMeasure: function (data) {
+        var _this = this;
+        var latlng = [data.latlng.lat, data.latlng.lng];
+        if (_this._measureObjs[data.LC].measurePoints.length == 1) {
+            return false;
+        }
+        _this._measureObjs[data.LC].measurePoints[data.LIndex] = latlng;
+        var curlength = _this._measureObjs[data.LC].measurePoints.length;
+        //如果是面,第一个点和最后一个点位置同时改变
+        if (_this._measureObjs[data.LC].polygon) {
+            if (data.LIndex == 0) {
+                _this._measureObjs[data.LC].measurePoints[curlength - 1] = latlng;
+                _this._measureObjs[_this._lC].markerObjs[curlength - 1].setLatLng(latlng);
+            }
+            if (data.LIndex == curlength - 1) {
+                _this._measureObjs[data.LC].measurePoints[0] = latlng;
+                _this._measureObjs[_this._lC].markerObjs[0].setLatLng(latlng);
+            }
+        }
+        var points = _this._measureObjs[data.LC].measurePoints;
+        //更新circle
+        var radius = L.latLng(points[1]).distanceTo(L.latLng(points[0]));
+        _this._measureObjs[data.LC].circle.setRadius(radius);
+        _this._measureObjs[data.LC].circle.setLatLng(points[0]);
+        if (points.length == 2) {
+            _this._measureObjs[data.LC].circle.setStyle({
+                opacity: 1
+            });
+        }
+
+        //更新线
+        _this._measureObjs[data.LC].polyline.setLatLngs(points);
+        //更新面
+        if (_this._measureObjs[data.LC].polygon) {
+            _this._measureObjs[data.LC].polygon.setLatLngs([points]);
+        }
+        var lineDistance = 0;
+        var coorslength = _this._measureObjs[data.LC].measurePoints.length;
+        for (var i = 1; i < coorslength; i++) {
+            var curcoor = _this._measureObjs[data.LC].measurePoints[i];
+            var prePoint = _this._measureObjs[data.LC].measurePoints[i - 1];
+            lineDistance = L.latLng(curcoor).distanceTo(prePoint);
+            var lineDistanceStr =
+                lineDistance > 1000 ? (lineDistance / 1000).toFixed(2) + "公里" : Math.ceil(lineDistance) + "米";
+            var pointAngle = L.Util.getAngleByLatLng(prePoint[1], prePoint[0], curcoor[1], curcoor[0]);
+            //添加分段信息
+            var oLabelObj = L.DomUtil.create("div", "measure-content");
+            var delLabel = L.DomUtil.create("div", "measure-ico-del");
+            var saveLabel = L.DomUtil.create("div", "measure-ico-save");
+            var pointText = L.DomUtil.create("span", "measure-result-text");
+            pointText.innerHTML = lineDistanceStr;
+            delLabel.lC = _this._lC;
+            saveLabel.lC = _this._lC;
+            L.DomEvent.on(delLabel, "click", function (e) {
+                L.DomEvent.stopPropagation(e);
+                _this.del(delLabel.lC);
+            });
+            L.DomEvent.on(saveLabel, "click", function (e) {
+                L.DomEvent.stopPropagation(e);
+                _this._map.fire("draw-result", {
+                    distance: _this._measureObjs[delLabel.lC].distance,
+                    points: _this._measureObjs[delLabel.lC].measurePoints,
+                    area: _this._measureObjs[delLabel.lC].area || 0,
+                    LC: delLabel.lC
+                });
+            });
+            if (i == coorslength - 1) {
+                oLabelObj.appendChild(delLabel);
+                oLabelObj.appendChild(saveLabel);
+                //测量面积
+                try {
+                    if (_this._measureObjs[data.LC].polygon) {
+                        var area = _this._getArea(data.LC);
+                        _this._measureObjs[data.LC].area;
+                        pointText.innerHTML = lineDistanceStr + "<br/>" + area;
+                    }
+                } catch (e) {
+                    console.error("leaflet.draw.js 测量面积error:", e);
+                }
+            }
+            oLabelObj.appendChild(pointText);
+            _this._measureObjs[_this._lC].distance = lineDistance;
+            _this._measureObjs[data.LC].markerObjs[i].label.setContent(oLabelObj);
+        }
+    },
+    /**
+     * 删除对应lC的测距
+     */
+    del: function (lC) {
+        var _this = this;
+        if (_this._measureObjs[lC]) {
+            _this._measureGroup.removeLayer(_this._measureObjs[lC]);
+            delete _this._measureObjs[lC];
+        }
+    }
+});

+ 13 - 3
src/components/common/BottomForm/SameScreenComparison.vue

@@ -125,6 +125,7 @@
       </div>
     </div>
     <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="startMapLabelCase()">标记疑点</el-button>
       <el-button @click="clearDialogVisible()">取 消</el-button>
       <el-button type="primary" @click="subMitDialogVisible()">打 印</el-button>
     </span>
@@ -199,6 +200,12 @@ export default {
   },
   props: [],
   methods: {
+    // 开启或关闭地图标记功能
+    startMapLabelCase() {
+      this.$refs["mapBox"][0].$nextTick(() => {
+        this.$refs["mapBox"][0].startLabelCase();
+      });
+    },
     // 获取地图底图服务
     getBaseMap() {
       map2DViewer.baseMapCollection = [];
@@ -342,7 +349,7 @@ export default {
         html2canvas(this.$refs.doPrint, ops).then(
           canvas => {
             document.getElementById("imgOut").setAttribute("src", canvas.toDataURL("image/png"));
-            this.imgBlob = canvas;
+            this.imgBlob = canvas.toDataURL("image/png");
             setTimeout(() => {
               if (that.doPrintLoading) {
                 that.doPrint(parentNodeList, svgElemNodeList, canvasList);
@@ -390,19 +397,21 @@ export default {
       document.body.appendChild(new_iframe);
       doc = new_iframe.contentWindow.document;
       var obj = document.getElementById("imgBox");
-
       try {
         let fileParams = {
           columnId: "776",
           paraName: "print.png",
           type: "3",
-          file: base64ToFile(this.imgBlob, "print.png")
+          file: this.base64ToFile(this.imgBlob, "print.png")
         };
+        let that = this;
         this.$Post(this.urlsCollection.proxyDmsFileUploadFile, fileParams).then(res => {
           if (res.code === 200) {
             let filePath = res.content;
             // 开始提交
             let createTaskForm = {
+              title: that.textarea1,
+              content: JSON.stringify(that.$store.state.mapMarkInfo),
               c_print_user_id: localStorage.getItem("USER_ID"),
               print_file: filePath,
               c_print_time: parseInt(new Date().getTime() / 1000) * 1000
@@ -430,6 +439,7 @@ export default {
         });
       } catch (e) {
         this.$message.error("文件上传失败:" + e);
+        console.log("文件上传失败:", e);
       }
 
       doc.write(obj.innerHTML);

+ 86 - 2
src/components/map/Map.vue

@@ -9,7 +9,8 @@ export default {
     return {
       map: "",
       layers: "",
-      polygon: []
+      polygon: [],
+      measureTool: ""
     };
   },
   mounted() {
@@ -28,11 +29,94 @@ export default {
           });
         }
       });
+      this.initDraw();
     });
   },
   props: ["mapUrl", "index", "centerZoom", "mouseIndex", "centerZoomInit"],
-  beforeDestroyed() {},
+  destroy() {
+    this.stopLabelCase();
+  },
   methods: {
+    // 初始化地图标记事件
+    initDraw() {
+      var defaultData = {
+        action: "add",
+        position: "topleft",
+        offset: [0, 0],
+        background: "#fff",
+        color: "#000",
+        font_size: "14px",
+        closeButton: true
+      };
+      // 引入疑点标记绘制方法
+      this.map.on("draw-result", data => {
+        // 纬经度
+        // if (data && data.points.length >= 1) {
+        //   let geoType = null;
+        //   // 类型: 0 点;1 线;2 面;3 矩形;4 圆形;5 其他;
+        //   if (data.points.length === 1 && data.area === 0) {
+        //     geoType = 0;
+        //   }
+        //   if (data.points.length === 2 && data.distance > 0) {
+        //     geoType = 4;
+        //   }
+        //   if (data.points.length > 2 && data.area === 0) {
+        //     geoType = 1;
+        //   }
+        //   if (data.points.length > 2 && data.area != 0 && data.area != "") {
+        //     geoType = 2;
+        //   }
+        // }
+        // 首先保存数据,然后删除底图上的标记
+        L.polygon(data.points, {
+          color: "red",
+          weight: 3,
+          fillColor: "red",
+          opacity: 1,
+          fillOpacity: 0
+        }).addTo(this.map);
+        this.measureTool._measureGroup && this.measureTool._measureGroup.remove();
+        mousemove2Status = false;
+        this.map.doubleClickZoom.disable();
+        this.map.off("click");
+        if (this.measureTool.moveMarker) {
+          this.map.removeLayer(this.measureTool.moveMarker);
+          this.measureTool.moveMarker = null;
+        }
+      });
+      if (this.index == 0) {
+        this.measureTool = new LControlDraw({
+          position: defaultData.position,
+          offset: defaultData.offset,
+          background: defaultData.background,
+          color: defaultData.color,
+          font_size: defaultData.font_size,
+          closeButton: defaultData.closeButton,
+          iconUrl: "/static/plugins/draw-plugin/images/marker-icon.png"
+        }).addTo(this.map);
+      }
+    },
+    // 开始标记疑点事件
+    startLabelCase() {
+      this.measureTool.start();
+    },
+    // 停止标记疑点事件
+    stopLabelCase() {
+      this.map.off("draw-result", map2DViewer.drawToolFire);
+      if (this.measureTool) {
+        // 移除绘制的图形
+        this.measureTool._measureGroup && this.measureTool._measureGroup.remove();
+        mousemove2Status = false;
+        this.map.doubleClickZoom.disable();
+        this.map.off("click");
+        if (this.measureTool.moveMarker) {
+          this.map.removeLayer(this.measureTool.moveMarker);
+          this.measureTool.moveMarker = null;
+        }
+        this.measureTool.remove();
+        this.measureTool = null;
+      }
+    },
     addSinglePolygon(state) {
       this.$nextTick(() => {
         if (!state && this.polygon) {

+ 131 - 169
src/components/map/MapHolder.vue

@@ -1,37 +1,25 @@
 <template>
   <div id="map2DViewer">
     <!-- 特殊地图属性弹窗 -- 有审计功能 -->
-    <CaseAuditPopup
-      v-show="auditPopupShow"
-      :tableObj="auditRefTableObj"
-      :defaultStatus="defaultStatus"
-      ref="auditRef"
-    />
+    <CaseAuditPopup v-show="auditPopupShow" :tableObj="auditRefTableObj" :defaultStatus="defaultStatus" ref="auditRef" />
     <!-- 通用地图属性弹窗 -- 无审计功能 -->
-    <NormalAttrPopup
-      v-show="normalAttrPopupShow"
-      :tableObj="tableObj"
-      ref="normalRef"
-    />
+    <NormalAttrPopup v-show="normalAttrPopupShow" :tableObj="tableObj" ref="normalRef" />
     <LabelCasePopup v-show="labelDetailsPopupShow" ref="labelRef" />
   </div>
 </template>
 <script>
 import publicFun from "@/utils/publicFunction.js";
-import transformCoord from "@/utils/coordinate";
 import { get } from "@/utils/request";
-import { streetLocation, townData } from "@/config/common";
+import { townData } from "@/config/common";
 import CaseAuditPopup from "@/components/popup/CaseAuditPopup.vue";
 import NormalAttrPopup from "@/components/popup/NormalAttrPopup.vue";
 import LabelCasePopup from "@/components/popup/LabelCasePopup.vue";
-import coordinate from "@/utils/coordinate.js";
-import { nextTick } from "vue";
 export default {
   name: "MapHolder",
   components: {
     CaseAuditPopup,
     NormalAttrPopup,
-    LabelCasePopup,
+    LabelCasePopup
   },
   data() {
     return {
@@ -59,15 +47,15 @@ export default {
         镇域名称: "--",
         "面积(平方米)": "--",
         土地类型: "--",
-        图斑编号: "--",
+        图斑编号: "--"
       },
       auditRefTableObj: {
         镇域名称: "--",
         "面积(平方米)": "--",
         图层构成: "--",
-        性质: "--",
+        性质: "--"
       },
-      defaultStatus: "未标记",
+      defaultStatus: "未标记"
     };
   },
   created() {},
@@ -100,7 +88,7 @@ export default {
       deleteGroupFromMap: this.deleteGroupFromMap,
       drawGeometry: this.drawGeometry,
       deleteGeometry: this.deleteGeometry,
-      addTiledMapLayer: this.addTiledMapLayer,
+      addTiledMapLayer: this.addTiledMapLayer
     });
   },
   beforeDestroyed() {
@@ -121,7 +109,7 @@ export default {
     // 监听当前菜单
     getCurrentMenu() {
       return this.$store.state.navSelect;
-    },
+    }
   },
   watch: {
     getLabelCaseBtnStatus(val) {
@@ -164,9 +152,9 @@ export default {
         this.$nextTick(() => {
           this.getJSonData();
         });
-      },
+      }
       // immediate: true
-    },
+    }
   },
   methods: {
     // 测试宝石蓝底图
@@ -177,7 +165,7 @@ export default {
         minZoom: 0,
         minNativeZoom: 3,
         maxNativeZoom: 7,
-        maxZoom: 14,
+        maxZoom: 14
       });
       return layer;
     },
@@ -189,7 +177,7 @@ export default {
         minZoom: 0,
         minNativeZoom: 0,
         maxNativeZoom: 7,
-        maxZoom: 14,
+        maxZoom: 14
       });
       return layer;
     },
@@ -201,7 +189,7 @@ export default {
     stopLabelCase() {
       if (map2DViewer.measureTool) {
         map2DViewer.setDrawTool({
-          action: "remove",
+          action: "remove"
         });
       }
     },
@@ -232,13 +220,13 @@ export default {
             if ($(`#${str}_id a`)) {
               $(`#${str}_id a`)
                 .eq(0)
-                .click((e) => {
+                .click(e => {
                   this.$store.state.lawPopupShow = true;
                   this.$store.state.lawSourceType = sourceType;
                 });
               $(`#${str}_id a`)
                 .eq(1)
-                .click((e) => {
+                .click(e => {
                   // 触发综合分析右侧面板点击事件
                   this.$bus.$emit("viewDetailsPopup", geojsonData);
                 });
@@ -251,7 +239,7 @@ export default {
               $(`#${str}_id a`).eq(0).remove();
               $(`#${str}_id a`)
                 .eq(0)
-                .click((e) => {
+                .click(e => {
                   // 触发综合分析右侧面板点击事件
                   this.$bus.$emit("viewDetailsPopup", geojsonData);
                 });
@@ -299,17 +287,11 @@ export default {
           // 下拉框内容
           if ($(`#${str}_id .center-table-item-special select`)) {
             if (this.caseStatusMap.has(str)) {
-              $(`#${str}_id .center-table-item-special select`).val(
-                this.caseStatusMap.get(str)
-              );
+              $(`#${str}_id .center-table-item-special select`).val(this.caseStatusMap.get(str));
               let inputStatus = "";
               if (this.caseStatusMap.has(str)) {
-                this.caseStatusMap.get(str) === "isTrue" &&
-                  $(`#${str}_id .center-table-item-special input`).val("疑点");
-                !this.caseStatusMap.get(str) === "isTrue" &&
-                  $(`#${str}_id .center-table-item-special input`).val(
-                    "非疑点"
-                  );
+                this.caseStatusMap.get(str) === "isTrue" && $(`#${str}_id .center-table-item-special input`).val("疑点");
+                !this.caseStatusMap.get(str) === "isTrue" && $(`#${str}_id .center-table-item-special input`).val("非疑点");
               }
             }
           }
@@ -318,13 +300,13 @@ export default {
           if ($(`#${str}_id a`)) {
             $(`#${str}_id a`)
               .eq(0)
-              .click((e) => {
+              .click(e => {
                 this.$store.state.lawPopupShow = true;
                 this.$store.state.lawSourceType = sourceType;
               });
             $(`#${str}_id a`)
               .eq(1)
-              .click((e) => {
+              .click(e => {
                 // 触发综合分析右侧面板点击事件
 
                 this.$bus.$emit("viewDetailsPopup", geojsonData);
@@ -332,7 +314,7 @@ export default {
           }
           // input添加点击事件
           if ($(`#${str}_id input`)[1]) {
-            $(`#${str}_id input`).click((e) => {
+            $(`#${str}_id input`).click(e => {
               switch (e.target.defaultValue) {
                 case "取消":
                   this.cancelBtnEvent();
@@ -367,7 +349,7 @@ export default {
           console.log($(`#${str}_id textarea`).val(), "textarea");
           $(`#${str}_id`).css("height", "100%");
 
-          $(`#${str}_id input`).click((e) => {
+          $(`#${str}_id input`).click(e => {
             console.log(e.target.defaultValue);
             switch (e.target.defaultValue) {
               case "取消":
@@ -394,12 +376,12 @@ export default {
       if (selectVal === "isTrue") {
         map2DViewer.polygons[str].setStyle({
           color: `rgb(${caseColorChange["isPointColor"][0]},${caseColorChange["isPointColor"][1]},${caseColorChange["isPointColor"][2]})`,
-          weight: 4,
+          weight: 4
         });
       } else {
         map2DViewer.polygons[str].setStyle({
           color: `rgb(${caseColorChange["notPointColor"][0]},${caseColorChange["notPointColor"][1]},${caseColorChange["notPointColor"][2]})`,
-          weight: 4,
+          weight: 4
         });
       }
       console.log(map2DViewer.polygons[str]);
@@ -412,42 +394,32 @@ export default {
         // 修改人员名称
         c_editor_name: localStorage.getItem("USER_NAME"),
         // 修改人员ID
-        c_editorid: localStorage.getItem("USER_ID"),
+        c_editorid: localStorage.getItem("USER_ID")
       };
 
       let modifyParams = new FormData();
       modifyParams = {
         columnId: columnId,
         modelId: modelId,
-        content: JSON.stringify(obj),
+        content: JSON.stringify(obj)
       };
-      this.$Post(this.urlsCollection.updateContent, modifyParams).then(
-        (res) => {
-          if (res.code === 200) {
-            this.$message.success("数据修改成功");
-            map2DViewer.map.closePopup();
+      this.$Post(this.urlsCollection.updateContent, modifyParams).then(res => {
+        if (res.code === 200) {
+          this.$message.success("数据修改成功");
+          map2DViewer.map.closePopup();
 
-            switch (selectVal) {
-              case "isTrue":
-                this.$store.state.mapMethodsCollection
-                  .get("METHODS")
-                  .changeCaseBoolean(str, "疑点");
-                this.$store.state.mapMethodsCollection
-                  .get("METHODS")
-                  .changeSortMethod("疑点");
-                break;
-              case "isFalse":
-                this.$store.state.mapMethodsCollection
-                  .get("METHODS")
-                  .changeCaseBoolean(str, "非疑点");
-                this.$store.state.mapMethodsCollection
-                  .get("METHODS")
-                  .changeSortMethod("非疑点");
-                break;
-            }
+          switch (selectVal) {
+            case "isTrue":
+              this.$store.state.mapMethodsCollection.get("METHODS").changeCaseBoolean(str, "疑点");
+              this.$store.state.mapMethodsCollection.get("METHODS").changeSortMethod("疑点");
+              break;
+            case "isFalse":
+              this.$store.state.mapMethodsCollection.get("METHODS").changeCaseBoolean(str, "非疑点");
+              this.$store.state.mapMethodsCollection.get("METHODS").changeSortMethod("非疑点");
+              break;
           }
         }
-      );
+      });
     },
     cancelBtnEvent() {
       map2DViewer.map.closePopup();
@@ -472,13 +444,7 @@ export default {
         } else {
           geoName = $(`#${str}_id input`).eq(0).val();
           let coordinates = [data.points];
-          let geometry = publicFun.generateGeoJSON(
-            title,
-            des,
-            geoType,
-            coordinates,
-            geoName
-          );
+          let geometry = publicFun.generateGeoJSON(title, des, geoType, coordinates, geoName);
           let params = new FormData();
           let newGeojson = JSON.stringify(geometry);
           myLabelNameMap.set(geoName, newGeojson);
@@ -486,11 +452,11 @@ export default {
             geojson: newGeojson,
             type: geoType,
             userId: Number(localStorage.getItem("USER_ID")),
-            sourceId: 0,
+            sourceId: 0
           };
 
           this.$Post(this.urlsCollection.addConllection, params).then(
-            (res) => {
+            res => {
               if (res.code == 200) {
                 // 标记成功后删除保存的原有名称
                 myLabelNameMap.delete(geoName);
@@ -500,36 +466,33 @@ export default {
                 paramData = {
                   userId: Number(localStorage.getItem("USER_ID")),
                   sourceId: 0,
-                  pageSize: 10,
+                  pageSize: 10
                 };
                 // 暂存map中刚刚保存的数据
-                this.$Post(this.urlsCollection.selectByUser, paramData).then(
-                  (userRes) => {
-                    if (userRes.code === 200) {
-                      if (userRes.content.length > 0) {
-                        this.$store.state.myLabelPointsArr = [];
-                        this.$store.state.myLabelPointsArr =
-                          userRes.content.map((v) => {
-                            if (JSON.stringify(geometry) === v.geojson) {
-                              sessionStorage.setItem("myLabelPointsId", v.id);
-                            }
-                            return {
-                              id: v.id,
-                              geojson: v.geojson,
-                              type: v.type,
-                            };
-                          });
-                        // 判断刚刚暂存的数据,并调用小眼睛的方法
-                      }
+                this.$Post(this.urlsCollection.selectByUser, paramData).then(userRes => {
+                  if (userRes.code === 200) {
+                    if (userRes.content.length > 0) {
+                      this.$store.state.myLabelPointsArr = [];
+                      this.$store.state.myLabelPointsArr = userRes.content.map(v => {
+                        if (JSON.stringify(geometry) === v.geojson) {
+                          sessionStorage.setItem("myLabelPointsId", v.id);
+                        }
+                        return {
+                          id: v.id,
+                          geojson: v.geojson,
+                          type: v.type
+                        };
+                      });
+                      // 判断刚刚暂存的数据,并调用小眼睛的方法
                     }
-                    // 更新时调用一次搜索接口
                   }
-                );
+                  // 更新时调用一次搜索接口
+                });
               }
               // 保存后需要删除地图上的标记
               this.reStartLabelCase();
             },
-            (error) => {
+            error => {
               console.log("标记疑点保存失败!", error);
               this.reStartLabelCase();
             }
@@ -544,13 +507,13 @@ export default {
         // map2DViewer.jlMap = L.tileLayer(
         //   "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d"
         // ).addTo(map2DViewer.map);
-        map2DViewer.jlMap = this.addTiledMapLayer(
-          systemConfig.imageryLayerSat2022s2.url
-        ).addTo(map2DViewer.map);
+        if (this.$store.state.JLControlRightMapUrl) {
+          map2DViewer.jlMap = this.addTiledMapLayer(this.$store.state.JLControlRightMapUrl).addTo(map2DViewer.map);
+        } else {
+          map2DViewer.jlMap = this.addTiledMapLayer(systemConfig.imageryLayerSat2022s2.url).addTo(map2DViewer.map);
+        }
 
-        map2DViewer.jlControl = L.control
-          .sideBySide(map2DViewer.map, map2DViewer.jlMap)
-          .addTo(map2DViewer.map);
+        map2DViewer.jlControl = L.control.sideBySide(map2DViewer.map, map2DViewer.jlMap).addTo(map2DViewer.map);
       } else if (map2DViewer.map.hasLayer(map2DViewer.jlMap)) {
         map2DViewer.map.removeControl(map2DViewer.jlControl);
         map2DViewer.map.removeLayer(map2DViewer.jlMap);
@@ -588,7 +551,7 @@ export default {
     initDraw() {
       if (!map2DViewer.measureTool) {
         // 引入疑点标记绘制方法
-        map2DViewer.drawToolFire = (data) => {
+        map2DViewer.drawToolFire = data => {
           // 纬经度
           if (data && data.points.length >= 1) {
             let geoType = null;
@@ -628,6 +591,7 @@ export default {
           font_size: "14px",
           closeButton: true,
           iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png",
+          map: map2DViewer.map
         });
       }
     },
@@ -640,7 +604,7 @@ export default {
         {
           resolutions: systemConfig.imageryLayer.resolutions,
           origin: [-66000, 75000],
-          bounds: L.bounds([-65000, -76000], [75000, 72000]),
+          bounds: L.bounds([-65000, -76000], [75000, 72000])
         }
       );
 
@@ -650,19 +614,26 @@ export default {
         minZoom: systemConfig.imageryLayer.minZoom,
         maxZoom: systemConfig.imageryLayer.maxZoom,
         attributionControl: false,
-        zoomControl: false,
+        zoomControl: false
         // preferCanvas: true,
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层
       let guid = publicFun.buildGuid("baseLayer");
-      let layer = this.addTiledMapLayer(systemConfig.blueBlackMap.url).addTo(
-        map2DViewer.map
-      );
+      let layer = this.addTiledMapLayer(systemConfig.blueBlackMap.url).addTo(map2DViewer.map);
       map2DViewer.layers["darkmap"] = layer;
 
       let imageryLayer = this.addTiledMapLayer(systemConfig.imageryLayer.url);
       map2DViewer.layers["imagery"] = imageryLayer;
+      // map2DViewer.map.on("click", onMapClick);
+    },
+    onMapClick() {
+      // if (map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid]) {
+      //   map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid].setStyle({
+      //     color: "red"
+      //   });
+      // } else {
+      // }
     },
     // 传入街道参数,重新渲染区域图层
     getJSonDataToStreet(url, param) {
@@ -672,16 +643,14 @@ export default {
         map2DViewer.groups["浦东新区_polygon"].remove();
       }
       // 请求并渲染新的区域图层
-      get("./static/json/simplified_pdgeojson.json", "").then((geoJson) => {
+      get("./static/json/simplified_pdgeojson.json", "").then(geoJson => {
         // 存放所有的面数据
         map2DViewer.groups["浦东新区_polygon"] = L.featureGroup();
         map2DViewer.groups["浦东新区_label"] = L.featureGroup();
         map2DViewer.groups["浦东新区_polygon"].addTo(map2DViewer.map);
         map2DViewer.groups["浦东新区_label"].addTo(map2DViewer.map);
-        geoJson.features.map((feature) => {
-          let correctCordArr = JSON.parse(
-            JSON.stringify(feature.geometry.coordinates)
-          );
+        geoJson.features.map(feature => {
+          let correctCordArr = JSON.parse(JSON.stringify(feature.geometry.coordinates));
           let newCorrectCoordArr = publicFun.latLngsCorrection(correctCordArr);
           feature.geometry.coordinates = newCorrectCoordArr;
           // if (
@@ -722,10 +691,7 @@ export default {
         this.getJSonDataToStreet("", "");
         // 切换到首页时需定位到当前图层
         if (this.$store.state.homeSpecialTown === "全部") {
-          this.setView(
-            townLocationMap.get(this.$store.state.homeSpecialTown),
-            0
-          );
+          this.setView(townLocationMap.get(this.$store.state.homeSpecialTown), 0);
         } else {
           let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
           map2DViewer.map.fitBounds(polygon.getBounds());
@@ -756,7 +722,7 @@ export default {
         weight: 3,
         fillColor: this.getColor(name),
         opacity: 1,
-        fillOpacity: 0.4,
+        fillOpacity: 0.4
       }).addTo(map2DViewer.groups["浦东新区_polygon"]);
 
       center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
@@ -769,25 +735,25 @@ export default {
           radius: 10,
           weight: 1,
           fillOpacity: 0,
-          color: "#e6d273",
+          color: "#e6d273"
         });
         wmarker.bindLabel(feature.properties.NAME, {
           noHide: true,
           clickable: true,
-          offset: [-25, 10],
+          offset: [-25, 10]
         });
         wmarker.addTo(map2DViewer.groups["浦东新区_label"]);
         let circle1 = L.circleMarker(center, {
           radius: 8,
           weight: 1,
           fillOpacity: 0,
-          color: "#e6d273",
+          color: "#e6d273"
         }).addTo(map2DViewer.groups["浦东新区_polygon"]);
         let circle2 = L.circleMarker(center, {
           radius: 5,
           weight: 1,
           fillOpacity: 1,
-          color: "#e6d273",
+          color: "#e6d273"
         }).addTo(map2DViewer.groups["浦东新区_polygon"]);
       }
     },
@@ -826,32 +792,20 @@ export default {
      * @modelId -- modelId
      * @columnId -- columnId
      */
-    addSinglePolygon(
-      geometry,
-      cid,
-      color,
-      uniqueId,
-      mainType,
-      sourceType,
-      defaultStatus,
-      modelId,
-      columnId
-    ) {
+    addSinglePolygon(geometry, cid, color, uniqueId, mainType, sourceType, defaultStatus, modelId, columnId) {
       let uniqueIdList = [];
       if (this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId]) {
-        uniqueIdList =
-          this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId];
+        uniqueIdList = this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId];
       }
 
       let singlePolygonItem = {
         uniqueId: uniqueId,
         geometry: geometry,
         cid: cid,
-        color: color,
+        color: color
       };
       uniqueIdList.push(singlePolygonItem);
-      this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId] =
-        uniqueIdList;
+      this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId] = uniqueIdList;
       // 当前数据坐标系为WGS84
       let targetGeometry = JSON.parse(geometry).geometry;
       // 预设模型与所有图层层级不同
@@ -862,13 +816,30 @@ export default {
         weight: 3,
         fillColor: color,
         opacity: 1,
-        fillOpacity: 0,
+        fillOpacity: 0
       }).addTo(map2DViewer.analysisGroups[uniqueId]);
 
-      map2DViewer.polygons[cid] = polygon;
+      polygon.on("click", e => {
+        // 鼠标点击图版高亮提示逻辑
+        // 首先恢复上一个图版
+        if (this.$store.state.map2DViewerPolygonsCid.newCid) {
+          map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid].setStyle({
+            color: this.$store.state.map2DViewerPolygonsCid.oldColor,
+            fillOpacity: 0
+          });
+        }
+        // 判断是否是重复点击,不是的话高亮,是的话不操作。
+        if (cid != this.$store.state.map2DViewerPolygonsCid.newCid) {
+          this.$store.state.map2DViewerPolygonsCid = { newCid: cid, oldColor: color };
+          polygon.setStyle({
+            color: "red",
+            fillColor: "red",
+            fillOpacity: 0.35
+          });
+        } else {
+          this.$store.state.map2DViewerPolygonsCid = { newCid: null, oldColor: null };
+        }
 
-      polygon.on("click", (e) => {
-        console.log(this.defaultValue, "点击面后显示默认的标记状态");
         let geojsonData = geometry;
         // 所有图层下的疑点图层 -- 常规展示
         if (geojsonData) {
@@ -878,7 +849,7 @@ export default {
               镇域名称: geoProperties["镇域名称"] || "--",
               "面积(平方米)": geoProperties["面积"] || "--",
               图层构成: geoProperties["图层构成"] || "--",
-              性质: geoProperties["性质"] || "--",
+              性质: geoProperties["性质"] || "--"
             };
             this.defaultStatus = defaultStatus;
 
@@ -888,17 +859,9 @@ export default {
               this.currentSourceType = sourceType;
               this.currentModelId = modelId;
               this.currentColumnId = columnId;
-              let domItem = this.createAuditDiv(
-                cid,
-                geojsonData,
-                sourceType,
-                modelId,
-                columnId
-              );
+              let domItem = this.createAuditDiv(cid, geojsonData, sourceType, modelId, columnId);
               this.auditPopupShow = true;
-              this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
-                .setLatLng(e.latlng)
-                .setContent(domItem);
+              this.popup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(domItem);
               this.auditPopupShow = false;
               this.popup.openOn(map2DViewer.map);
             });
@@ -908,21 +871,20 @@ export default {
               镇域名称: geoProperties["镇域名称"] || "--",
               "面积(平方米)": geoProperties["面积"] || "--",
               土地类型: geoProperties["土地类型"] || "--",
-              图斑编号: geoProperties["图斑编号"] || "--",
+              图斑编号: geoProperties["图斑编号"] || "--"
             };
 
             this.$refs.normalRef.$nextTick(() => {
               let domItem = this.createNormalDiv(cid, geojsonData, sourceType);
               this.normalAttrPopupShow = true;
-              this.normalPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
-                .setLatLng(e.latlng)
-                .setContent(domItem);
+              this.normalPopup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(domItem);
               this.normalAttrPopupShow = false;
               this.normalPopup.openOn(map2DViewer.map);
             });
           }
         }
       });
+      map2DViewer.polygons[cid] = polygon;
     },
 
     deleteSinglePolygon(polygon) {
@@ -936,7 +898,7 @@ export default {
     },
     //综合分析 - 标记疑点 - 删除面
     deletePolygonLayer(layer) {
-      map2DViewer.polygons[layer].forEach((polygon) => {
+      map2DViewer.polygons[layer].forEach(polygon => {
         map2DViewer.map.removeLayer(polygon);
       });
     },
@@ -944,7 +906,7 @@ export default {
     drawPoints(data) {
       if (!map2DViewer.myLabels[`label_${data.id}`]) {
         let point = L.marker(data.coord, {
-          opacity: 1,
+          opacity: 1
         }).addTo(map2DViewer.groups["我的标记图层组"]);
         map2DViewer.myLabels[`label_${data.id}`] = point;
       }
@@ -957,7 +919,7 @@ export default {
           weight: 3,
           fillOpacity: color,
           opacity: 1,
-          fillOpacity: 0.4,
+          fillOpacity: 0.4
         }).addTo(map2DViewer.groups["我的标记图层组"]);
         // zoom the map to the polyline
         map2DViewer.myLabels[`label_${data.id}`] = polyline;
@@ -971,7 +933,7 @@ export default {
           weight: 3,
           fillOpacity: color,
           opacity: 1,
-          fillOpacity: 0.4,
+          fillOpacity: 0.4
         }).addTo(map2DViewer.groups["我的标记图层组"]);
 
         map2DViewer.myLabels[`label_${data.id}`] = polygon;
@@ -993,7 +955,7 @@ export default {
             fillOpacity: color,
             opacity: 1,
             fillOpacity: 0.4,
-            radius: Number(distance),
+            radius: Number(distance)
           }).addTo(map2DViewer.groups["我的标记图层组"]);
           map2DViewer.myLabels[`label_${data.id}`] = circle;
         }
@@ -1024,8 +986,8 @@ export default {
       if (geometry) {
         geometry.removeFrom(map2DViewer.map);
       }
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="less" scoped>

+ 5 - 1
src/store/index.js

@@ -52,7 +52,11 @@ export default new Vuex.Store({
     selectSelectDataMap: {},
     preModelLayerMap: [],
     // 同屏对比中选中图层暂存详细信息
-    mapMarkInfo: {}
+    mapMarkInfo: {},
+    // 综合分析中点击图版cid
+    map2DViewerPolygonsCid: {},
+    // 卷帘对比右侧map地址
+    JLControlRightMapUrl: "",
   },
   getters: {
     customModelsArr: (state) => state.customModelsArr,

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 147 - 306
src/views/ComprehensiveAnalysis.vue


Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно