vue 使用leaflet 加载地图服务（可切换天地图影像地图）（一）

// 下载
npm install leaflet
// 引入 main.js
import 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.tianditu.gov.cn/DataServer?T=ter_c&x={x}&y={y}&l={z}&tk="let b = "http://t4.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk="let c ="http://t4.tianditu.gov.cn/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=" //影像let d = "http://t4.tianditu.gov.cn/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk="let e = "http://t4.tianditu.gov.cn/DataServer?T=cta_c&x={x}&y={y}&l={z}&tk="let f = "http://t4.tianditu.gov.cn/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);},

vue 使用leaflet 加载地图服务（可切换天地图影像地图）（一）相关推荐

Cesium加载地图服务
一.加载矢量地图 1.加载geoserver发布的矢量数据 api:viewer.imageryLayers.addImageryProvider viewer.imageryLayers.addIm ...
Vue+Openlayers实现加载天地图WMTS服务显示
场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图: Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_ ...
leaflet加载百度地图（路网矢量图和卫星影像图）示例代码032
第032个点击查看专栏目录本示例的目的是介绍演示如何在vue+leaflet加载百度地图,这里使用了control.layers进行切换两种不同的百度底图.这里要引用proj4,proj4leaf ...
leaflet加载国家天地图服务
再补充(2019年4月8日) 国家天地图地图服务需要携带key才能访问.别忘了去官网申请key. 补充(2018年8月2日) 现在leaflet.js已经支持EPSG4326.如果你使用的是新版本的l ...
leaflet加载wms和wfs服务
同一个数据可以设置wms和wfs两种加载方式,如我GeoServer的数据服务,全国县级矢量图: 参考文章:leaflet通过WFS服务加载geoserver 矢量数据_不去想结果,一直在路上-CSD ...
leaflet加载腾讯地图 (路网、影像、地形) 示例教程034
第034个点击查看专栏目录本示例的目的是介绍演示如何在vue+leaflet加载腾讯地图,这里使用了control.layers进行切换3种不同的百腾讯底图. 直接复制下面的 vue+leafle ...
leaflet 加载 geoserver 发布的 wms 服务
1. 安装 geoserver 服务:略 2. 启动 geoserver: 3. 登录 geoserver 控制台:( 默认账号.密码为 admin.geoserver ) 4. 新建工作区: 5. ...
leaflet加载离线地图教程以及下载离线地图瓦片工具
关于源码以及教程侵权请联系作者删除最近在做一个leaflet加载离线地图的东西,结果在网上找到一份相关的教程以及源码源码链接:https://pan.baidu.com/s/1cGew8PAU-L ...
ios 高德地图加载瓦片地图_IOS 高德地图 API 加载 WMS 服务
IOS 高德地图 API 加载 WMS 服务本文主要介绍通过自定义高德地图 MATileOverlay 接口,添加 WMS 服务到地图上.废话少说,先贴代码. 代码自定义类 WMSTileOver ...

vue 使用leaflet 加载地图服务（可切换天地图影像地图）（一）

vue 使用leaflet 加载地图服务（可切换天地图影像地图）（一）相关推荐

最新文章

热门文章

vue 使用leaflet 加载地图服务 （可切换天地图 影像地图）（一）

vue 使用leaflet 加载地图服务 （可切换天地图 影像地图）（一）相关推荐

最新文章

热门文章

vue 使用leaflet 加载地图服务（可切换天地图影像地图）（一）

vue 使用leaflet 加载地图服务（可切换天地图影像地图）（一）相关推荐