Skip to content

W
whp-xl
Commit e2e478fa authored by yaqizhang's avatar yaqizhang
Browse files
Options

危化地图

parent 1e74268f
Hide whitespace changes
Inline Side-by-side
Showing with 51 additions and 41 deletions
dcit-hcsystem-hcsystem-master/public/index.html
View file @ e2e478fa
......@@ -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
View file @ e2e478fa
......@@ -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 pos = fromLonLat(pArr); //将坐标转为默认投影，默认投影是EPSG：3857
let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326'); //坐标系间坐标转换，由前面的坐标转为后面坐标系坐标
pointsz.push(pArr) //将转化格式后的点坐标存储起来
}
}
;
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])
})
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment