// 下载 npm install leaflet // 引入 main.jsimport L from "leaflet";import "leaflet/dist/leaflet.css";// HTML<div id="map"></div>created() {let _that = this;//面信息初始化_that.normal = new L.layerGroup();_that.factoryLandPolygon = new L.layerGroup();_that.activePolygon = new L.layerGroup();},// 初始化图层loadgraymapnew() {let _that = this;let southWest = [29.1304, 118.1217]; //地图西南点坐标let northEast = [30.6191, 120.7753]; //地图东北点坐标let bounds = L.latLngBounds(southWest, northEast); //地图边界let a = "http://t4./DataServer?T=ter_c&x={x}&y={y}&l={z}&tk="let b = "http://t4./DataServer?T=vec_c&x={x}&y={y}&l={z}&tk="let c ="http://t4./DataServer?T=img_c&x={x}&y={y}&l={z}&tk=" //影像let d = "http://t4./DataServer?T=cia_c&x={x}&y={y}&l={z}&tk="let e = "http://t4./DataServer?T=cta_c&x={x}&y={y}&l={z}&tk="let f = "http://t4./DataServer?T=cva_c&x={x}&y={y}&l={z}&tk="let normalm = L.tileLayer.chinaProvider("TianDiTu.Normal.Map", {maxZoom: 18,minZoom: 5,key: _that.mapKey,}),normala = L.tileLayer.chinaProvider("TianDiTu.Normal.Annotion", {maxZoom: 18,minZoom: 5,key: _that.mapKey,}),imgm = L.tileLayer.chinaProvider("TianDiTu.Satellite.Map", {maxZoom: 18,minZoom: 5,key: _that.mapKey,}),imga = L.tileLayer.chinaProvider("TianDiTu.Satellite.Annotion", {maxZoom: 18,minZoom: 5,key: _that.mapKey,});let normal = L.layerGroup([normalm, normala]);let image = L.layerGroup([imgm, imga]);_that.normal = normal_that.image = imagelet baseLayers = {地图: normal,影像: image};const ret = new L.Proj.CRS("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs", {resolutions: [1.40625, // Level 00.703125, // Level 10.3515625, // Level 20.17578125, // Level 30.087890625, // Level 40.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,8.58306884765625e-5,4.29153442382813e-5,2.14576721191406e-5,1.07288360595703e-5,5.36441802978516e-6,2.68220901489258e-6,1.34110450744629e-6,],origin: [-180, 90]});_that.map = L.map("map", {center: [31.59, 120.29],zoom: 12,maxZoom: 18,minZoom: 5,layers: [normal],zoomControl: false});L.control.scale({maxWidth: 200,metric: true,imperial: false}).addTo(_that.map);// 如果想自定义那就可以用这个/** this.$axios.get('') // 转义.then((res) => {console.log(res);// _that.initPolygons(res.data, _that.factoryLandPolygon);}).catch((err) => {console.log(err);})*/_that.map.setView([30.3, 120.1769], 12); //设置比例尺和中心点级别_that.factoryLandPolygon = esri.dynamicMapLayer({// 这个是GIS服务已经把颜色配置好 这边直接使用该API就可以渲染url: 'https://************/arcgis/rest/services/KGDK/MapServer', // GIS地址opacity: .6,useCors: true,maxZoom: 20,minZoom: 9,})this.map.addLayer(_that.factoryLandPolygon);_that.factoryLandPolygon.bindPopup(function(err, featureCollection, response) {_that.initPolygons(response.results[0], _that.factoryLandPolygon)_that.strings(JSON.stringify(response.results[0]))_that.actualityshow = true});},// 渲染面 由于自己业务逻辑所以有涉及到点击地图上面的面需要有选中状态 以及对应显示其信息initPolygons(aData, aDataScore) {console.log(aData);console.log(aDataScore)let self = this;let featureCollection = aData;let coor = featureCollection.geometry.rings;let item = featureCollection;//取面中第一个点此处需要考虑单面多面的情况let position = coor[0][0];let endPosition = coor[0][0];if (coor.length > 1) {position = coor[0][0][0];endPosition = coor[0][0][parseInt(coor[0][0].length / 2)];} else {if (parseInt(coor[0].length / 2) > 1) {endPosition = coor[0][parseInt(coor[0].length / 2)];}}let plang = self.revert(coor)let polygon = L.polygon(plang, {color: 'red', //表示边框颜色weight: 2, // 边框的宽度fillColor: "#000000", //表示填充颜色fillOpacity: 0 //表示透明度});polygon.addTo(self.activePolygon);// 把视图添加给面self.map.addLayer(self.activePolygon)// 把这个面加到地图里面self.map.setView([centerPoint[1], centerPoint[0]], 15); // 把视角转化到点击位置},revert(points) {//绘制元素// console.log(points)//由于返回的点是以经度，纬度格式，需要重新组织成纬度，经度格式var latlogs = [];for (var i = 0; i < points.length; i++) {var p = points[i];var path = [];for (var j = 0; j < p.length; j++) {if (p[j].length <= 2) {path.push([p[j][1], p[j][0]]);} else {for (var l = 0; l < p[j].length; l++) {if (Object.prototype.toString.call(p[j][l]) == "[object Array]") {path.push([p[j][l][1], p[j][l][0]]);} else {path.push([p[j][1], p[j][0]]);}}}}latlogs.push(path);}// console.log(latlogs, "latlogs");return latlogs;},// 地图放大addZoom(zoom) {let _that = this;_that.map.zoomIn();},// 地图缩小subtractZoom(zoom) {let _that = this;_that.map.zoomOut();},// 切换显示 直接removeLayer你初始化属性 即可达到隐藏目的_that.map.removeLayer(_that.activePolygon);// 如果你不只是想要隐藏 而是彻底删除 当下次渲染的时候是一个新的属性则需要 先removeLayer然后再初始化layerGroup_that.map.removeLayer(_that.activePolygon);_that.activePolygon = new L.layerGroup();
// 切换显示 天地图影像地图HTML<el-drawer :visible.sync="drawer" id="swMap" :modal="false"><div class="demo-image__placeholder"><div class="block" :class="isactive == 'normal' ? 'active' : ''" @click="isyput()"><el-image class="imgSize" :src="mapType.nMap"></el-image><span class="demonstration">标准地图</span></div><div class="block" :class="isactive == 'image' ? 'active' : ''" @click="isyingx()"><el-image class="imgSize" :src="mapType.iMap"></el-image><span class="demonstration">影像地图</span></div></div></el-drawer>// JavaScriptfun(){let normalm = L.tileLayer.chinaProvider("TianDiTu.Normal.Map", {maxZoom: 18,minZoom: 5,key: _that.mapKey,}),normala = L.tileLayer.chinaProvider("TianDiTu.Normal.Annotion", {maxZoom: 18,minZoom: 5,key: _that.mapKey,}),imgm = L.tileLayer.chinaProvider("TianDiTu.Satellite.Map", {maxZoom: 18,minZoom: 5,key: _that.mapKey,}),imga = L.tileLayer.chinaProvider("TianDiTu.Satellite.Annotion", {maxZoom: 18,minZoom: 5,key: _that.mapKey,});let normal = L.layerGroup([normalm, normala]);let image = L.layerGroup([imgm, imga]);_that.normal = normal_that.image = image}// 方法isyingx() {this.map.removeLayer(this.image)this.map.addLayer(this.image);},isyput() {this.map.removeLayer(this.normal)this.map.addLayer(this.normal);},
