在leafet上画圆、多边形、线、矩形

在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