vue中天地图的使用 添加点、线、面、聚合点、信息窗口、自定义右键菜单、切换地图图层操作
在Vue中使用天地图,你可以使用第三方库如vue-tianditu-map
。以下是一个简单的例子,展示如何在Vue组件中集成天地图,并实现添加点、线、面、聚点、信息窗口和自定义右键菜单。
首先,安装vue-tianditu-map
:
npm install vue-tianditu-map --save
然后,在你的Vue组件中使用:
<template>
<div id="map" style="width: 100%; height: 400px;"></div>
</template>
<script>
import { TiandituMap } from 'vue-tianditu-map'
export default {
components: {
TiandituMap
},
mounted() {
this.$nextTick(() => {
const map = new TiandituMap.Map('map', {
width: '100%',
height: '400',
zoom: 10,
center: [116.403983, 39.893025], // 天安门坐标
});
// 添加点
const marker = new TiandituMap.Marker({
position: map.getCenter(),
map: map
});
// 添加线
const polyline = new TiandituMap.Polyline({
path: [
new TiandituMap.LngLat(116.409693, 39.899452),
new TiandituMap.LngLat(116.403983, 39.893025)
],
strokeColor: 'blue',
strokeWeight: 3,
map: map
});
// 添加面
const polygon = new TiandituMap.Polygon({
path: [
new TiandituMap.LngLat(116.409693, 39.899452),
new TiandituMap.LngLat(116.403983, 39.893025),
new TiandituMap.LngLat(116.405392, 39.891403)
],
fillColor: 'red',
fillOpacity: 0.35,
strokeColor: 'red',
strokeOpacity: 0.5,
strokeWeight: 2,
map: map
});
// 添加聚点
const markerClusterer = new TiandituMap.MarkerClusterer(map, [marker]);
// 信息窗口
const infoWindow = new TiandituMap.InfoWindow({
content: '<p>Hello, World!</p>',
position: map.getCenter(),
map: map
});
// 自定义右键菜单
map.addEventListener('rightclick', function (e) {
// 弹出信息窗口
infoWindow.setContent(`右键点击位置:<br/>经度:${e.point.lng},纬度:${e.point.lat}`);
infoWindow.open(map, e.point);
});
// 切换图层
const toggleLayer = (layerName, visible) => {
map[layerName].setVisible(visible);
};
// 示例:切换地图类型
toggleLayer('roadNet', false); // 关闭路网
toggleLayer('cva', true); // 开启地形图
});
}
}
</script>
在这个例子中,我们首先在<template>
中定义了一个用于天地图的容器div
,并在
评论已关闭