leafletJS学习① |
您所在的位置：网站首页 › 如何在地图上画圆圈标注 › leafletJS学习① |
leafletJS学习①
|
目录 在vue项目引入leafletJS 初始化 引入 用leafletJS实现地图页面 初始化地图 添加控件 注册监听事件 效果演示 修改部分源码 将提示改为中文 绘制圆后增加半径效果 展示效果 leafletJS第一天学习 在vue项目引入leafletJS 初始化因为使用的底图是天地图，运用leaflet的绘图控件，所以需要引入leaflet，leaflet.chinatmsproviders，leaflet.pm；命令如下 npm i leaflet npm i leaflet.pm npm i leaflet.chinatmsproviders 引入引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用 import * as L from "leaflet"; import "leaflet/dist/leaflet.css"; import "leaflet.pm"; import "leaflet.pm/dist/leaflet.pm.css"; import "leaflet.chinatmsproviders"; 用leafletJS实现地图页面 初始化地图创建天地图的图层对象组 //电子底图 const normalm = L.tileLayer.chinaProvider("TianDiTu.Normal.Map", { maxZoom: 18, minZoom: 5, }); //电子底图标注 const normala = L.tileLayer.chinaProvider("TianDiTu.Normal.Annotion", { maxZoom: 18, minZoom: 5, }); //影像图 const imgm = L.tileLayer.chinaProvider("TianDiTu.Satellite.Map", { maxZoom: 18, minZoom: 5, }); //影像图标注 const imga = L.tileLayer.chinaProvider("TianDiTu.Satellite.Annotion", { maxZoom: 18, minZoom: 5, }); //地形图 const term = L.tileLayer.chinaProvider("TianDiTu.Terrain.Map", { maxZoom: 18, minZoom: 5, }); //地形图标注 const tera = L.tileLayer.chinaProvider("TianDiTu.Terrain.Annotion", { maxZoom: 18, minZoom: 5, }); const normal = L.layerGroup([normalm, normala]); const terrain = L.layerGroup([term, tera]); const image = L.layerGroup([imgm, imga]);注意：如果创建天地图对象失败的话，可以尝试找到leaflet.ChineseTmsProviders.js文件，将其中TianDiTu的key值更改为你自己申请的key TianDiTu: { Normal: { Map: "//t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}", Annotion: "//t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}" }, Satellite: { Map: "//t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}", Annotion: "//t{s}.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}" }, Terrain: { Map: "//t{s}.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}", Annotion: "//t{s}.tianditu.gov.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}" }, Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], key: "174705aebfe31b79b3587279e211cb9a" },或者直接替换 TianDiTu: { Normal: { Map: "https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={key}", Annotion: "https://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={key}" }, Satellite: { Map: "https://t{s}.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={key}", Annotion: "https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={key}" }, Terrain: { Map: "https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={key}", Annotion: "https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={key}" }, Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], key: "174705aebfe31b79b3587279e211cb9a",//自己申请key },创建地图实例对象，并把天地图底图加入 const corner1 = L.latLng(26.958286, 104.173516); //设置左上角经纬度 const corner2 = L.latLng(20.023744, 122.428234); //设置右下点经纬度 const maxBounds = L.latLngBounds(corner1, corner2); //构建视图限制范围 // 保存地图实例 this.map = L.map("mapDiv", { center: [23.294734, 113.350668], zoom: 10, minZoom: 8, maxBounds, layers: [normal], zoomControl: false, attributionControl: false, }); 添加控件添加底图切换和比例尺控件 // 添加地图模式切换器 L.control.layers({ 地图: normal, 影像: image, 地形: terrain, },null,{position:'bottomright'}).addTo(this.map); //添加比例尺控件 L.control.scale({ imperial: false }).addTo(this.map);添加绘图控件 // 添加绘图控制器 this.map.pm.addControls({ position: "topright", drawMarker: false, // 添加标点 drawCircleMarker: true, // 添加圆形标点 drawCircle: true, // 绘制圆形区域 drawPolyline: true, // 绘制折线 drawPolygon: true, // 绘制多边形区域 drawSingleline: false, // 绘制线段 editPolygon: false, // 编辑图层区域 deleteLayer: true, // 删除图层 cutPolygon: false, // 添加一个按钮以删除多边形里面的部分内容 dragMode: false, }); 注册监听事件监听绘制区域结束的事件，记录绘制内容 this.layerList = []; this.map.on("pm:create", (e) => { this.layerList.push(e.layer); this.latLngList = []; const { shape } = e; // 如果是圆形 是不同的点位逻辑 特殊处理 if (shape === "Circle") { // 圆区域半径(单位应该是：米) const radius = e.layer._mRadius; // 园中心点 const centerLatLng = e.layer._latlng; // 将绘制结束的区域数据放进 vue中的 list里面 this.latLngList.push({ radius, centerLatLng, shape, }); return; } // 除了圆形 多边形的区域都是由点位数组组成 const latLngs = e.layer._latlngs; // 将绘制结束的区域数据放进 latLngList里面 this.latLngList.push({ latLngs, shape, }); });绘制完成的事件，用于绘制之前清除绘制的内容及图层 this.map.on("pm:drawstart", () => { if (Array.isArray(this.layerList) && this.layerList.length) { for (let layer of this.layerList) { layer.remove(); // 清除所有图层控制的图片 } } this.layerList = []; // 存储的区域点数据也删除 this.latLngList = []; //画图的坐标系也要清除 }); 效果演示
默认的提示文字是英文，如果要改为中文的话，找到leaflet.pm.min.js文件，将【"en"】改为【"zh"】，个人认为应该有不需要更改源码包里面的方法，这里我就粗暴的改源码了，因此新建工程重新拉包需要重新更改。 //将这部分 activeLang:"en", //修改为 activeLang:"zh", 绘制圆后增加半径效果绘制圆后呈现的是一个圆，就不知道圆心或者半径的在哪，当进行半径长度标注时，标注位置不清晰。找到leaflet.pm.min.js文件，将以下内容 _finishShape:function(t){var e=this._centerMarker.getLatLng(),n=t.latlng,r=e.distanceTo(n),i=Object.assign({},this.options.pathOptions,{radius:r}),a=L.circle(e,i).addTo(this._map);this.disable(),this._map.fire("pm:create",{shape:this._shape,layer:a})}更改为 _finishShape:function(t){var e=this._centerMarker.getLatLng(),n=t.latlng,r=e.distanceTo(n),i=Object.assign({},this.options.pathOptions,{radius:r}),a=L.circle(e,i).addTo(this._map),o=L.polyline(this._hintline.getLatLngs(),this._hintline.options).addTo(this._map);this.disable(),this._map.fire("pm:create",{shape:this._shape,layer:a}),this._map.fire("pm:create", {shape:"Line",layer:o})}这里应该可以通过重写绘制完成事件"pm:drawend"，判断绘制图形，然后创建添加半径的线条的，我比较懒，就这样了。 展示效果
|
【本文地址】
今日新闻 |
推荐新闻 |