地图文件被覆盖问题修改 gengdidi

dcit-hcsystem-hcsystem-master/package-lock.json

@@ -12218,6 +12218,11 @@
         "vue-demi": "^0.7.4"
       }
     },
+    "vue-ellipse-progress": {
+      "version": "1.3.0",
+      "resolved": "https://registry.nlark.com/vue-ellipse-progress/download/vue-ellipse-progress-1.3.0.tgz",
+      "integrity": "sha1-2UJs6s9XUVC+IjhD2BZQp8s5Iis="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

dcit-hcsystem-hcsystem-master/package.json

@@ -18,6 +18,7 @@
     "vue-amap": "^0.5.10",
     "vue-class-component": "^7.2.2",
     "vue-echarts": "^6.0.0-rc.5",
+    "vue-ellipse-progress": "^1.3.0",
     "vue-property-decorator": "^8.3.0",
     "vue-router": "^3.1.5",
     "vuex": "^3.1.2",

dcit-hcsystem-hcsystem-master/src/utils/mapUtil.js

@@ -51,7 +51,7 @@ export default class Mutil {
         let tianSlB = new TileLayer({
             className: "mapTypeC",
             source: new XYZ({
-				// url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
+                //url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
                 url: " http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
             }),
             visible: false,
@@ -60,7 +60,7 @@ export default class Mutil {
         let tianSlC = new TileLayer({
             className: "mapTypeC",
             source: new XYZ({
-				// url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
+                //url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
                 url: "http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
             }),
             visible: true,
@@ -306,14 +306,36 @@ export default class Mutil {
         //对获取的点坐标数据进行处理，重构，得到我们需要的数据结构
         for (let i = 0; i < points.length; i++) {
             let region = points[i];   //单个面
-			//let pointArr = region.split(',');
-			//let p = pointArr[j];
             let pArr = region.split(',');
             let pos = fromLonLat(pArr);  //将坐标转为默认投影，默认投影是EPSG：3857
-			let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326');   //坐标系间坐标转换，由前面的坐标转为后面坐标系坐标
-			pointsz.push(pArr)    //将转化格式后的点坐标存储起来
+            //let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326');   //坐标系间坐标转换，由前面的坐标转为后面坐标系坐标
+            pointsz.push(pos)    //将转化格式后的点坐标存储起来
         };
         //自己造的地图数据（GeoJSON数据）
+        let geojsonObject = this.structureGeojson(pointsz);
+        let vectorSource = new VectorSource({   //提供矢量图层的数据
+            features: (new GeoJSON().readFeatures(geojsonObject))
+        });
+        let vectorLayer = new VectorLayer({
+            source: vectorSource,   //来源
+            style: new Style({
+                stroke: new Stroke({
+                    color: '#08d527',
+                    width: 4
+                }),
+                fill: new Fill({
+                    color: 'rgba(212, 220, 29, 0.1)'
+                })
+            })
+        });
+        if (this.tempLayer != ' ') {
+            this.MAP.removeLayer(this.tempLayer);
+        }
+
+        this.MAP.addLayer(vectorLayer);
+        this.tempLayer = vectorLayer;
+    }
+    structureGeojson(pointsz){
         let geojsonObject = {
             'type': 'FeatureCollection',    //要素集合
             'crs': {
@@ -333,39 +355,15 @@ export default class Mutil {
                 }
             }]
         };
-		let vectorSource = new VectorSource({   //提供矢量图层的数据
-			features: (new GeoJSON().readFeatures(geojsonObject))
-		});
-		let vectorLayer = new VectorLayer({
-			source: vectorSource,   //来源
-			style: new Style({
-				stroke: new Stroke({
-					color: 'yellow',
-					width: 6
-				}),
-				fill: new Fill({
-					color: 'rgba(255,255,0,0.1)'
-				})
-			})
-		});
-		if (this.tempLayer != ' ') {
-			this.MAP.removeLayer(this.tempLayer);
-		}
-		
-		this.MAP.addLayer(vectorLayer);
-		this.tempLayer = vectorLayer;
+        return geojsonObject;
     }
 
-	changeCenter(name) {  //根据name传参
+    getBoundaries(name) {  //根据name传参
         axios.get('https://restapi.amap.com/v3/config/district?key=cb087c0fb3b8bc56a4af064630495bb9&subdistrict=0&extensions=all&keywords='+name).then(res => {
-			
             let local = res.data.districts[0].center.split(",");
-			let view = new View({
-				center: transform(fromLonLat(local), 'EPSG:3857', 'EPSG:4326'),    //将中心点坐标转为EPSG：4326
-				projection: get('EPSG:4326'),   //投影坐标系 EPSG：4326
-				zoom: 10
-			});
-			this.MAP.setView(view);
+            let view = this.MAP.getView();
+            view.setCenter(fromLonLat(local));
+            view.setZoom(10);
             this.drawArea(res.data.districts[0])
         })
     }