修改

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

@@ -40,9 +40,8 @@ export default class Mutil {
 		let  MAP,tianSlA = new TileLayer({
 			className: "mapTypeC",
 			source: new XYZ({
-				// url:
-				//       "http://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=c8df739f047ce17cfe41b63cbeae6997",
-				//url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
+				// url:"http://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=c8df739f047ce17cfe41b63cbeae6997",
+				// url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
                 url: "http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
 			}),
 			visible: true,
@@ -51,7 +50,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 +59,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: false,
@@ -306,13 +305,33 @@ 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(pos)    //将转化格式后的点坐标存储起来
+			let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326');   //坐标系间坐标转换，由前面的坐标转为后面坐标系坐标
+			pointsz.push(pArr)    //将转化格式后的点坐标存储起来
 		};
 		//自己造的地图数据（GeoJSON数据）
-        let geojsonObject = this.structureGeojson(pointsz);
+		let geojsonObject = {
+			'type': 'FeatureCollection',    //要素集合
+			'crs': {
+				'type': 'name',
+				'properties': {  //特性
+					'name': 'EPSG:3857'
+				}
+			},
+            'features': [{  //要素
+                'type': 'Feature',
+                'geometry': {  //几何图形
+                    'type': 'GeometryCollection',   //几何图形集合
+                    'geometries': [{   //几何形状
+                        'type': 'Polygon',   //多边形
+                        'coordinates': [pointsz]    //坐标
+                    }]
+                }
+            }]
+		};
 		let vectorSource = new VectorSource({   //提供矢量图层的数据
 			features: (new GeoJSON().readFeatures(geojsonObject))
 		});
@@ -320,11 +339,11 @@ export default class Mutil {
 			source: vectorSource,   //来源
 			style: new Style({
 				stroke: new Stroke({
-					color: '#08d527',
-					width: 4
+					color: 'yellow',
+					width: 6
 				}),
 				fill: new Fill({
-					color: 'rgba(212, 220, 29, 0.1)'
+					color: 'rgba(255,255,0,0.1)'
 				})
 			})
 		});
@@ -335,35 +354,17 @@ export default class Mutil {
 		this.MAP.addLayer(vectorLayer);
 		this.tempLayer = vectorLayer;
 	}
-    structureGeojson(pointsz){
-		let geojsonObject = {
-			'type': 'FeatureCollection',    //要素集合
-			'crs': {
-				'type': 'name',
-				'properties': {  //特性
-					'name': 'EPSG:3857'
-				}
-			},
-			'features': [{  //要素
-				'type': 'Feature',
-				'geometry': {  //几何图形
-					'type': 'GeometryCollection',   //几何图形集合
-					'geometries': [{   //几何形状
-						'type': 'Polygon',   //多边形
-						'coordinates': [pointsz]    //坐标
-					}]
-				}
-			}]
-		};
-		return geojsonObject;
-	}
 
-    getBoundaries(name) {  //根据name传参
+	changeCenter(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 = this.MAP.getView();
-            view.setCenter(fromLonLat(local));
-            view.setZoom(10);
+			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);
 			this.drawArea(res.data.districts[0])
 		})
 	}

dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue

@@ -31,11 +31,13 @@
           <div style="">
             <div style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.4);position: absolute;top: 0;left: 10px;float: left;">
                 <div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
-                <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
+                <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;">
+                    <div id="main1" style="width:480px;height:250px;"></div>
+                </div>
                 <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
                 <!-- <div id="pieReport" style="width: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></div> -->
             </div>
-              <div style="width: 500px;height: 100%;z-index: 12;background-color: rgba(0, 0, 0, 0.3);position: absolute;top: 0;right: 10px;float: right">
+              <div style="width: 500px;height: 100%;z-index: 12;background-color: rgba(2, 40, 90, 0.3);position: absolute;top: 0;right: 10px;float: right">
                 <!-- <dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
                     <div class="markBox">
                         <ul>
@@ -91,16 +93,7 @@ import METHOD from "@/utils/methods";
     },
 })
 export default class GIS extends Vue {
-    data() {
-        return {
-        charts: "",
-        opinion: ["及格人数", "未及格人数"],
-        opinionData: [
-            { value: 12, name: "及格人数", itemStyle: "#1ab394" },
-            { value: 18, name: "未及格人数", itemStyle: "#79d2c0" }
-        ]
-        };
-    }
+   
     
     @Provide() Mutil: any;
     @Provide() mapLoadDone = false;
@@ -296,9 +289,9 @@ export default class GIS extends Vue {
             if (id) that.getPopcon(id);
         })
         this.getStatiData();
-
         this.Mutil.getBoundaries("石家庄");
     }
+    
 	getStatiData() {
 	  let that = this;
 	  METHOD.axiosPost(