在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