czh的开发笔记 - leaflet - 地图操作
前言
这个只是个人对该js库的学习文档,介绍一般不会全,详情可查看官方文档。
leaflet是什么
是一个轻量化的地图显示组件
可以在地图中显示标记和其他绘图等
官方文档:https://leafletjs.com/reference-1.7.1.html
如何引入使用 leatflet
啥也不说了,那个页面要用的直接copy
import * as L from 'leaflet'
当然如果可以配置到Vue对象中,做全局使用也可以,看需求。
api记录
本文内环境皆为vue2.6.11+leaflet
示例函数与数据皆为测试数据,仅供参考使用
this.map为map对象
初始化地图对象
函数示例
示例:
this.map = L.map("map", {
center: [40, 116],
zoom: 14,
zoomControl: false,
doubleClickZoom: false,
attributionControl: false,
preferCanvas: true
});
L.tileLayer(
"http://mt0.google.cn/vt/lyrs=y@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga",
).addTo(this.map);
- L即为上文所引入的leaflet对象
- center参数中为 [经度,纬度]
- tileLayer 叠加了一层数据层(也就是地图数据)
- 建议加入 preferCanvas 这个有效提升性能,但是不支持ie9以下的ie浏览器(就是放弃用svg渲染,改用 canvas 渲染【好像是调用了webgl】)
设立marker
函数示例
示例:
let marker_name = L.marker([51.5, -0.09],{
icon:'url', // 图片链接
title:'String', // 标签文字
alt:'String', // 一般是对icon的注解
keyboard:'Boolean', // 设置为true时,冒泡事件正常。设置为false则阻止事件传递到画布对象
}).addTo(this.map)
- 向地图中的 [经度,纬度] 中插入一个标签
示例2:如何添加自定义图标文件
let img = require('@/assets/marker.png')
let myIcon = L.icon({
iconUrl: img,
// iconUrl:'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
iconSize: [80,80 ],
iconAnchor: [40, 80],
popupAnchor: [-3, -76],
});
L.marker([lat, lng], {
title: JSON.stringify({
...e.latlng
}),
name:'Are u sure?',
icon: myIcon,
alt: 'linkPoint'
}).addTo(this.map)
- 使用本地文件需要注意路径引入的问题
绘制圆点 .circle()
函数示例
示例:
L.circle([40, 116], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 1
}).addTo(this.map);
- 位置点数组 [经度,纬度]
- 半径 500
- 样式对象 Json
遍历图层
函数示例
示例 - 普通
this.map.eachLayer((layer)=>{
console.log(layer)
})
layer即为图层对象,注意如果之后使用了canvasMarker做性能优化的话,可能无法识别marker图层
示例2 - 与删除图层同用
clearLayer(name = '') {
this.map.eachLayer((layer) => {
if (layer.options.name == name)
this.map.removeLayer(layer)
})
},
这个就是一个很典型的通过name来删除图层的方式,实际使用的时候可以通过很多方案,非常自由
绑定鼠标事件(点击/滑动/滚轮)
函数示例
示例:
this.map.on('mousemove', this.mousemove)
这个应该啥也不用讲了,注意一下在对应的div上加上一个事件捕捉反防止事件穿透
@mousemove.stop=""
事件列表我就不列了,网上一堆
多边形绘制
函数示例
示例:
L.polygon(pointList).addTo(this.map)
pointList 就是一个点的数组
绘制点对点线
函数示例
PS:其实使用多边形绘制的那个函数(polygon),然后只穿入两个点就可以
示例:
主动刷新/屏幕自适应/数据更新事件
函数示例
示例:
一些可能没那么重要但是也有用的东西
阻止冒泡
一般在js中使用
e.stopPropagation();
即可阻止继续向上一层节点冒泡,并开始返回事件
如果时ie环境则需要使用
window.event.cancelBubble = true;
在元素中用@或者v-on时使用
@mousemove.stop=""
v-on:mousemove.stop=""
即可
经纬度和公里的换算
可能需要前后端核验操作
体验
讲道理vue2-leaflet 真不错,好用多了
讲道理我想做一个微博舆情工具,看看能不能通过解析ip来大致渲染出舆情分布图
性能优化相关
最后修改时间
2021年1月27日 20点44分