leaflet讲解:vue中使用leaflet进行地图打点marker事件(2)
哈喽,大家好!忍住了看小说的冲动,今天来继续为大家讲解leaflet。今天为大家讲解的是leaflet进行打点事件!本次打点适用于任何用leaflet加载的地图,本次还继续用wmts加载的地图为大家讲解。具体代码如下<template><div id="app"><div id="map" /></div></template><s
·
哈喽,大家好!忍住了看小说的冲动,今天来继续为大家讲解leaflet。
今天为大家讲解的是leaflet进行打点事件!本次打点适用于任何用leaflet加载的地图,本次还继续用wmts加载的地图为大家讲解。
具体代码如下
<template>
<div id="app">
<div id="map" />
</div>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
this.leafletMap()
},
methods: {
leafletMap() {
//设置地图相关初始配置
var leafletMap = L.map("map", {
center: [30.279751,119.727856],// 设置地图中心点
zoom: 1, //设置当前地图显示的缩放等级
crs: L.CRS.EPSG4326 //设置坐标系4326
})
//设置地图可以进行0-22的等级缩放
var matrixIds = [];
for (var i = 0; i < 22; ++i) {
matrixIds[i] = {
identifier: "" + i,
topLeftCorner: new L.LatLng(90, -180)
};
}
//设置地图wmts瓦片地图加载配置
var urlMap= 'http://192.168.11.25:6080/arcgis/rest/services/WMTS'//瓦片地图地址
var wmtsOptionsMap = {
layer: 'hangzhou:MapServer',//瓦片地图名称
tileSize: 256, //切片大小
format: "image/png",//瓦片图格式
matrixIds: matrixIds,//可缩放
}
var wmtsMap = new L.TileLayer.WMTS(urlMap, wmtsOptionsMap)
leafletMap.addLayer(wmtsMap)
//设置ICON相关配置
var Icon = L.divIcon({
className: 'my-div-icon',//自定义icon css样式
iconSize: [15, 15]//点大小
})
var markers = []
//点击地图进行打点
leafletMap.on('click', function(e) {
var lat = e.latlng.lat //纬度
var lng = e.latlng.lng //经度
//初次打点
if(markers.length<1){
L.marker([lat, lng], {
icon: Icon,
}).addTo(leafletMap)
//添加点到地图中
markers.push(marker)
}else{
//再次打点更新点坐标
markers[0].setLatLng([lat, lng])
}
})
}
}
}
</script>
<style>
#map {
width: 100%;
height: 100vh;
}
.my-div-icon{
width: 15px;
height: 15px;
background-color: red;
border-radius: 50%;
}
</style>
下面是效果图
可以看到点击地图可以进行打点。如果大家有什么疑问可以留言交流。
更多推荐
已为社区贡献4条内容
所有评论(0)