危化地图

dcit-hcsystem-hcsystem-master/public/index.html

@@ -21,6 +21,6 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
-  <script src="https://js.arcgis.com/3.33/"></script>
+  <!-- <script src="https://js.arcgis.com/3.33/"></script> -->
 
 </html>

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

@@ -11,7 +11,7 @@ import TileLayer from "ol/layer/Tile";
 import XYZ from "ol/source/XYZ";
 import LayerGroup from "ol/layer/Group";
 
-import { fromLonLat, toLonLat } from "ol/proj";
+import { fromLonLat, toLonLat, transform } from "ol/proj";
 import Feature from "ol/Feature";
 import { Icon, Style, Text, Fill, Stroke } from "ol/style";
 import { Vector as VectorLayer } from "ol/layer";
@@ -26,6 +26,8 @@ import Snap from 'ol/interaction/Snap';
 
 import { toSize } from 'ol/size';
 
+import axios from "axios";
+
 export default class Mutil {
 	constructor(divId, option = {}) {
 		this.divId = divId;
@@ -50,7 +52,7 @@ export default class Mutil {
 			source: new XYZ({
 				url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
 			}),
-			visible: true,
+			visible: false,
 			name: "天地图标注",
 		});
 		let tianSlC = new TileLayer({
@@ -58,7 +60,7 @@ export default class Mutil {
 			source: new XYZ({
 				url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=c8df739f047ce17cfe41b63cbeae6997",
 			}),
-			visible: true,
+			visible: false,
 			name: "天地图标注",
 		});
 		let that = this;
@@ -72,16 +74,15 @@ export default class Mutil {
 		/*
 					鹰眼
 					*/
-		const overiewControl = new OverviewMap({
-			className: "ol-overviewmap ol-custom-overviewmap",
-			layers: [tianSlC, tianSlB, tianSlA],
-			collapseLabel: "\u00BB",
-			label: "\u00AB",
-			collapsed: false,
-		});
+		// const overiewControl = new OverviewMap({
+		// 	className: "ol-overviewmap ol-custom-overviewmap",
+		// 	layers: [tianSlC, tianSlB, tianSlA],
+		// 	collapseLabel: "\u00BB",
+		// 	label: "\u00AB",
+		// 	collapsed: false,
+		// });
 		MAP = new Map({
 			projection: "EPSG:4326",
-			controls: defaults().extend([overiewControl]),
 			target: that.divId,
 			layers: [],
 			view: VIEW,
@@ -284,35 +285,42 @@ export default class Mutil {
 		this.MAP.getLayers().getArray()[0].setVisible(true);
 		this.MAP.getLayers().getArray()[1].setVisible(false);
 		this.MAP.getLayers().getArray()[2].setVisible(false);
+
+		console.log(this.MAP.getLayers());
 	};
 	tianSlB() {
-		console.log("gsfdgfdhgsgfhgfdhf")
 		this.MAP.getLayers().getArray()[0].setVisible(false);
 		this.MAP.getLayers().getArray()[1].setVisible(true);
 		this.MAP.getLayers().getArray()[2].setVisible(false);
+		console.log(this.MAP.getLayers());
 	};
 	tianSlC() {
 		this.MAP.getLayers().getArray()[0].setVisible(false);
 		this.MAP.getLayers().getArray()[1].setVisible(false);
 		this.MAP.getLayers().getArray()[2].setVisible(true);
+		console.log(this.MAP.getLayers());
 	}
 
 	drawArea(json) {
 		let pointsz = [];   //存储点坐标
-		let points = json.points;  //获取点坐标
+		let points = json.polyline.split(";");  //获取点坐标
 		//对获取的点坐标数据进行处理，重构，得到我们需要的数据结构
 		for (let i = 0; i < points.length; i++) {
-			let region = points[i].region;   //单个面
-			let pointArr = region.split(',');
-			for (let j = 0; j < pointArr.length - 1; j++) {
-				let p = pointArr[j];
-				let pArr = p.split(' ');
+			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)    //将转化格式后的点坐标存储起来
-			}
-		}
-		;
+			// for (let j = 0; j < pointArr.length - 1; j++) {
+			// 	let p = pointArr[j];
+			// 	let pArr = p.split(' ');
+			// 	let pos = fromLonLat(pArr);  //将坐标转为默认投影，默认投影是EPSG：3857
+			// 	let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326');   //坐标系间坐标转换，由前面的坐标转为后面坐标系坐标
+			// 	pointsz.push(pArr)    //将转化格式后的点坐标存储起来
+			// }
+		};
 		//自己造的地图数据（GeoJSON数据）
 		let geojsonObject = {
 			'type': 'FeatureCollection',    //要素集合
@@ -359,24 +367,26 @@ export default class Mutil {
 	changeCenter(name) {  //根据name传参
 		console.log("fdssffffffffffffffffffffffffffffffffffffffffffffffff")
 	//调取天地图返回的数据
+	    let that = this;
 		let param = {};
 		param.serachWord = name;
-		param.serachType = '1';   //查询类型（0：根据code查询；1：根据名称）
-		param.needSunInfo = 'false' ;   //是否需要下一级信息
-		param.needAll = 'false';  //   是否需要所有子节点（包括孙子节点）
-		param.needPolygon = 'true';   //是否需要行政区划范围
-		param.needPre = 'true';   //是否需要上一级所有信息
-		param.tk = 'd0cf74b31931aab68af181d23fa23d8d';   //自己的天地图秘钥
-		this.$axios.get('http://api.tianditu.gov.cn/administrative',param).then(res => {
-			console.log(res.data[0])
-			let resData = res.data[0];
-			let view = new View({
-				center: transfrom(fromLonLat([resData.lnt,resData.lat]),'EPSG:3857','EPSG:4326'),    //将中心点坐标转为EPSG：4326
-				projection: get('EPSG:4326'),   //投影坐标系 EPSG：4326
-				zoom: resData.level -1
-			});
-			this.MAP.setView(view);
-			this.drawArea(resData)
+		// param.serachType = '1';   //查询类型（0：根据code查询；1：根据名称）
+		// param.needSunInfo = 'false' ;   //是否需要下一级信息
+		// param.needAll = 'false';  //   是否需要所有子节点（包括孙子节点）
+		// param.needPolygon = 'true';   //是否需要行政区划范围
+		// param.needPre = 'true';   //是否需要上一级所有信息
+		param.key = 'cb087c0fb3b8bc56a4af064630495bb9';   //自己的天地图秘钥
+		axios.get('https://restapi.amap.com/v3/config/district?key=cb087c0fb3b8bc56a4af064630495bb9&subdistrict=0&extensions=all&serachWord='+name).then(res => {
+			
+			// console.log(res.data[0])
+			// let resData = res.data[0];
+			// let view = new View({
+			// 	center: transfrom(fromLonLat([resData.lnt,resData.lat]),'EPSG:3857','EPSG:4326'),    //将中心点坐标转为EPSG：4326
+			// 	projection: get('EPSG:4326'),   //投影坐标系 EPSG：4326
+			// 	zoom: resData.level -1
+			// });
+			//this.MAP.setView(view);
+			this.drawArea(res.data.districts[0])
 		})
 	}
 }