leaflet绘制的多边形,缩放地图保持大小不变

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

// An highlighted block
// 将经纬度[getlats[i], getlngs[i]]转换成像素点坐标
var pixel = this.map.latLngToContainerPoint([getlats[i], getlngs[i]
Vue.js 中使用 Leaflet 地图库手动绘制多边形并获取其经纬度数组,你可以按照以下步骤操作: 1. 首先,确保已经在项目中安装了 Vue 和 Leaflet。可以使用 Vue CLI 或手动引入 CDN。 2. 引入依赖: ```html <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> ``` 3. 在组件里创建一个 Map 组件并初始化 Leaflet 地图: ```js <template> <div id="map-container"> <div ref="map" style="height: 500px; width: 100%"></div> </div> </template> <script> import L from 'leaflet'; export default { data() { return { map: null, markers: [], polygon: null, coordinates: [] }; }, mounted() { this.initMap(); }, methods: { initMap() { this.map = L.map('map-container').setView([51.505, -0.09], 13); // 设置初始中心点和缩放级别 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors', maxZoom: 18, }).addTo(this.map); // 添加点击事件监听器,用于画线 this.map.on('click', (e) => { const latlng = e.latlng; if (!this.polygon) { this.polygon = new L.Polygon([latlng], { color: 'red' }); this.map.addLayer(this.polygon); this.coordinates.push(latlng); } else { this.polygon.setLatLngs([...this.coordinates, latlng]); this.coordinates.push(latlng); } }); }, getPolygonCoordinates() { return this.coordinates; } } }; </script> ``` 在这个例子中,当你点击地图时会添加一个新的顶点到多边形,直到形成一个完整的闭合路径。`getPolygonCoordinates` 方法会在多边形绘制完成后返回所有的经纬度数组。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值