在leaflet上画圆、多边形、线、矩形
<template>
<div id="map" class="map">
</div>
</template>
<script>
import L from 'leaflet';
export default {
data () {
return {
myGroup: '',
};
},
mounted () {
this.initMaps()
this.huizhiroute()
this.huizhiround()
this.huizhipolygon()
},
methods: {
initMaps () {
const map = L.map('map', {
zoomControl: false,
attributionControl: false
}).setView([39.9042, 116.4074], 10);
L.tileLayer('https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',).addTo(map)
const myGroup = L.layerGroup()
// 将图层组添加到地图上
myGroup.addTo(map); // 假设你的地图实例是名为 map 的变量
this.myGroup = myGroup
},
//绘制航线
huizhiroute (obj) {
let xian = [[39.9042, 116.4074],[39.5042, 116.4074]]
L.polyline(xian, { color: 'red' }).addTo(this.myGroup);
// console.log(this.routelist,'obj');
},
//绘制圆形空域
huizhiround (obj) {
L.circle([39.9042, 116.4074], { radius: 30000 }).addTo(this.myGroup);
},
//绘制多边形
huizhipolygon (obj) {
let duo = [[39.9042, 116.4074],[39.7042, 117.4074],[39.8042, 116.4074]]
L.polygon(duo, { color: 'pink' }).addTo(this.myGroup);
},
},
}
</script>
<style lang="less" scoped>
.map {
height: 100%;
width: 100%;
}
</style>
参考文档链接: leaflet