leaflet的基本使用不再次具体说明,建议查看官方和博客;
需求:如何在地图上绘制多边形,缩放地图级别时,多边形大小保持不变
思路:要在屏幕的视觉上使得绘制的多边形不随地图缩放变化而变化,换个思路就是显示的效果不变。由于使用leaflet绘制多边形需要提供经纬度,所以分为以下步骤:
第一步:将一个经纬度转换成像素点坐标(注意只需要一个经纬度即可)
第二步:再将转化后的像素点分别加减你所需要的显示像素大小,大约绘制成你想要的的现状。比如三角形,就加减有三个像素点
第三步:最后将加减后的三个像素点坐标分别再次转化回经纬度(注意这里已经是三个经纬度了)
第四步:将以上转化完成的三个经纬度使用leaflet的API将它们连接绘制成三角形或者多边形
具体API建议查看官网,以下部分截图:
个人实践代码参考:
// An highlighted block
// 将经纬度[getlats[i], getlngs[i]]转换成像素点坐标
var pixel = this.map.latLngToContainerPoint([getlats[i], getlngs[i]