首页 零基础学leaflet
文章
取消

零基础学leaflet

day01

加载高德和天地图

天地图有多个图层(矢量切片、注记),可以用layerGroup


day02

图层切换,Control封装了方法

93780fdb07f3bf970cbb92aff83b1c05

ac166cbfeb214d71dcc3a6a0dbe62f8f


day03

svg添加到icon

锚点定位,icon的坐标与图像坐标一致。左上角为原点

注意坐标,高德和天地图坐标系不同

2b3a5f582716f91c33905ad08d7f2077


day04

geojson.io

加载geojson文件 pointToLayer


day05

图层切换


day06

分类渲染


day07

tooltip 样式leaflet中的css

popup 样式设置html

label 用tooltip permanent


day08

小结

0f87345442f005f16bac46874134f476


day09

耦合高德API

地图用高德地图,上层叠加leaflet,从而用自定义风格的高德地图加上leaflet功能,直接用高德地图切片不能自定义样式


day10

leaflet支持两种渲染方式,可以切换渲染模式

canvas 渲染性能较好 Canvas-Markers插件提升markers渲染性能

svg 基于path path是html element

markers默认是img

3cf44f41956ed18ed13a042c3c3a139d


day11

同一类型的后画在上面

marker单独的pane,在最上面

1.setIndex对html element有效,canvas path无效

2.bringToFront() bringToBack() 图层多时不适用

3.createPane(‘myPane’).style.zIndex() 点线面默认是overlayPane


day12

自定义弹出框

bindpopup 设计html

16ce97e4f87fe736fde053d69a4d2041

$字符串模板,填变量内容

grid布局


day13

Label冲突检测

LabelTextCollision 插件 tooltip

继承于path的对象生成text对象的冲突检测

原理是canvas 量算api measureText,只有canvas有,svg没有

marker 没有渲染在canvas下,所以不能使用 改成circleMarker

本文由作者按照 CC BY 4.0 进行授权