介绍
工作之余开发的插件
该插件是基于 vue3 和 leaflet 开发的用于方便加载国内地图，组件 option（如 map,marker,polygon,polyline）请参照 leaflet,目前处于测试阶段
相关设置https://leafletjs.com/reference.html#map-option
怎么使用
npm i vue-leaflet-chinese --save
在 main.js 处引入
1
2
3
4
| import map from "vue-leaflet-chinese"
import "vue-leaflet-chinese/dist/style.css"
...
createApp(App).use(map).mount("#app")
|
地图初始化
高德
普通地图
1
2
3
4
5
6
7
| const mapoption = ref({
center: [31.41, 120.98],
zoom: 13,
})
<LeafletMap :option="mapoption" style="width: 500px; height: 500px">
<GdNormal/>
</LeafletMap>
|
卫星地图
1
2
3
4
5
6
7
| const mapoption = ref({
center: [31.41, 120.98],
zoom: 13,
})
<LeafletMap :option="mapoption" style="width: 500px; height: 500px">
<GdSatellite/>
</LeafletMap>
|
腾讯地图
普通地图
1
2
3
4
5
6
7
| const mapoption = ref({
center: [31.41, 120.98],
zoom: 13,
})
<LeafletMap :option="mapoption" style="width: 500px; height: 500px">
<TxNormal/>
</LeafletMap>
|
卫星地图
1
2
3
4
5
6
7
| const mapoption = ref({
center: [31.41, 120.98],
zoom: 13,
})
<LeafletMap :option="mapoption" style="width: 500px; height: 500px">
<TxSatellite/>
</LeafletMap>
|
天地图
普通地图
1
2
3
4
5
6
7
8
| const mapoption = ref({
center: [31.41, 120.98],
zoom: 13,
})
const key = ref("your tmap token")
<LeafletMap :tk="key" :option="mapoption" style="width: 500px; height: 500px">
<TianNormal/>
</LeafletMap>
|
卫星地图
1
2
3
4
5
6
7
8
| const mapoption = ref({
center: [31.41, 120.98],
zoom: 13,
})
const key = ref("your tmap token")
<LeafletMap :tk="key" :option="mapoption" style="width: 500px; height: 500px">
<TianSatellite/>
</LeafletMap>
|
百度地图
普通地图
1
2
3
4
5
6
7
8
9
| const mapoption = ref({
center: [31.41, 120.98],
zoom: 13,
crs:'baidu' //百度地图必须配置此项
})
<LeafletMap :tk="key" :option="mapoption" style="width: 500px; height: 500px">
<BdNormal/>
</LeafletMap>
|
卫星地图
1
2
3
4
5
6
7
8
9
| const mapoption = ref({
center: [31.41, 120.98],
zoom: 13,
crs:'baidu'
})
const key = ref("your tmap token")
<LeafletMap :tk="key" :option="mapoption" style="width: 500px; height: 500px">
<BdSatellite/>
</LeafletMap>
|
marker
1
2
3
4
5
6
7
8
9
10
11
12
13
| const position = reactive({
lat:'',
lng:''
})
const mapoption = ref({
center: [31.41, 120.98],
zoom: 13,
})
<LeafletMap :option="mapoption" style="width: 500px; height: 500px">
<GdNormal/>
<Lmarker :position="position"></Lmarker>
</LeafletMap>
|
polyline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| const latlngs = ref([
[31.45, 120.99],
[31.27, 121.13],
[31.48, 121.914],
])
const mapoption = ref({
center: [31.41, 120.98],
zoom: 13,
})
<LeafletMap :option="mapoption" style="width: 500px; height: 500px">
<GdNormal/>
<Lpolyline :latlngs="latlngs"></Lpolyline>
</LeafletMap>
|
polygon
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| const latlngs = ref([
[31.45, 120.99],
[31.27, 121.13],
[31.48, 121.914],
])
const mapoption = ref({
center: [31.41, 120.98],
zoom: 13,
})
<LeafletMap :option="mapoption" style="width: 500px; height: 500px">
<GdNormal/>
<Lpolygon :latlngs="latlngs"></Lpolygon>
</LeafletMap>
|
layerGroup&feturegroup
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const mapoption = ref({
center: [31.41, 120.98],
zoom: 13,
})
<LeafletMap :option="mapoption" style="width: 500px; height: 500px">
<GdNormal/>
<Lgroup>
<Lmarker/>
<Lpolyline />
<Lpolyline/>
</Lgroup>
<Fgroup>
<Lmarker/>
<Lpolyline />
<Lpolyline/>
</Fgroup>
</LeafletMap>
|
获取地图实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| const mapref = ref()
const markerref = ref()
mapref.value.$$instance
markerref.value.$$instance
...
<LeafletMap ref="mapref" :option="mapoption" style="width: 500px; height: 500px">
<GdNormal/>
<Lgroup>
<Lmarker ref="markerref"/>
<Lpolyline />
<Lpolyline/>
</Lgroup>
<Fgroup>
<Lmarker/>
<Lpolyline />
<Lpolyline/>
</Fgroup>
</LeafletMap>
|
事件
“click”, “dblclick”, “mouseover”, “mouseout”