Leaflet创建,tileLayer,marker,面的绘制

1.创建地图

 GOD.LMap = L.map("LMap", {zoom: 13,minZoom: 5,zoomControl: false,attributionControl: false,center: [39.904989, 116.405285], //注意：leaflet中坐标的展示，第一个是纬度，第二个 值是经度});

2.添加瓦片

GOD.tileALayer = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
GOD.tileALayer.addTo(GOD.LMap)

3.创建Marker

import M0 from "./images/seleImg.png";
let icon = L.icon({iconUrl: M0,iconSize: [24, 24],iconAnchor: [12,22],});
let RMarkerExterDataPoint = L.marker([arr[1], arr[0]], {icon}).bindTooltip(text);GOD.RMarkerExterDataPoint = new L.layerGroup([RMarkerExterDataPoint]).addTo(GOD.LMap);清除点的图层：GOD.RMarkerExterDataPoint && GOD.RMarkerExterDataPoint.clearLayers && GOD.RMarkerExterDataPoint.clearLayers();

4.面的绘制

后台会返回wkt字符串：let wkt="POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))";
!GOD.catchCountyT && (GOD.catchCountyT = {}); //初始化赋值为{}
let geoJson= WKT.parse(result); //wkt转为geoJson
//如果是一个区域绘制：GOD.CityPolygons = L.geoJSON({"type": "FeatureCollection","features": [geoJson]}, {style: function (feature) {return {weight: 2,color: '#7140B5',fillColor: 'rgba(255, 255, 255, 0.2)',fillOpacity: 0.7,extData: {countyCode}}}});GOD.CityPolygons.addTo(GOD.LMap);//多个区域同时绘制，方便后面操作某一个区域（删除修改）GOD.catchCountyT[countyCode] = L.geoJSON({    //多个区域同时绘制"type": "FeatureCollection","features": [geoJson]}, {style: function (feature) {return {weight: 2,color: '#7140B5',fillColor: 'rgba(255, 255, 255, 0.2)',fillOpacity: 0.7,extData: {countyCode}}}});
GOD.catchCountyT[countyCode] && GOD.catchCountyT[countyCode].addTo(GOD.LMap); //添加到地图里清除图层：
GOD.CityPolygons && GOD.CityPolygons.clearLayers && GOD.CityPolygons.clearLayers();
GOD.catchCountyT && Object.keys(GOD.catchCountyT).forEach((item, index) => {GOD.catchCountyT[item].clearLayers();})

Leaflet创建,tileLayer,marker,面的绘制相关推荐

D3D中基本立体面的绘制
[转][收藏]2010-09-01 D3D中基本立体面的绘制提示: 阅读本文需要一定的3D图形学和DirectX9基础,如果你发现阅读困难,请参阅D3D 中基本三角形面的绘制. 本文用到的坐标系统变 ...
第二章创建webGL设备和绘制缓冲区呈现 Context Creation and Drawing Buffer Presentation
第二章创建webGL设备和绘制缓冲区呈现 Context Creation and Drawing Buffer Presentation 在开始使用webGL API之前您先要从现有的HT ...
mapbox创建自定义marker图标绑定弹框展示信息
/*** 创建自定义marker图标绑定弹框*/let carMarker = [];//存放marker图标for(let m= 0;m<gpsInfoList.length;m++){let ...
gatsby_如何使用Gatsby和Leaflet创建夏季公路旅行地图绘制应用程序
gatsby Get ready for the summer by building your own road trip mapping app with this step-by-step gu ...
Leaflet中自定义marker的icon图标
场景 Leaflet中添加标记.折线.圆圈.多边形.弹窗显示点击处坐标: Leaflet中添加标记.折线.圆圈.多边形.弹窗显示点击处坐标_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
leaflet一键清空所有已绘制的多边形和点位
官网: https://leafletjs.cn/reference.html#polygon 如图所示接口返回多个多边形经纬度和点位信息(注意: 以下省略了leaflet的引入步骤) // 在地图上 ...
gatsby_如何使用Gatsby和React Leaflet创建自己的圣诞老人追踪器
gatsby The Christmas season is a magical time of year. We have Santa flying around spreading cheer a ...
使用Leaflet创建地图拓扑图
为什么80%的码农都做不了架构师?>>> 之前我们采用过 Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一个古老项目,略显臃肿,对于现代的前 ...
R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图（遍地代码图）
好久没有学习R的新包了,甚是想念啊! 昨天.今天看到两个极好.不得不学的packages+早上被AWS的服务器整得郁闷ing-于是就来点颜色看看~ 本篇受Lchiffon老师的github启发,对两个 ...

Leaflet创建,tileLayer,marker,面的绘制

Leaflet创建,tileLayer,marker,面的绘制相关推荐

最新文章

热门文章