@vuemap/vue-amap是基于高德JSAPI2.0、Loca2.0封装的vue组件库,支持vue2、vue3版本。首页地址:vue-amap.guyixi.cn/
在使用地图做可视化效果展示时,最常见的就是标号功能。日常开发中可能会使用到几十个、几百个、甚至几万个标号的展示,今天主要介绍在使用@vuemap/vue-amap
时怎么对不同数量级、不同需求的标号进行展示。
1、300数量内标号
对于日常开发中只需要少量展示标号的需求时,我们可以直接使用el-amap-marker
组件进行标号展示,该组件基于AMap.Marker
实现,本质上是创建一个dom,通过position:absolute;
悬浮在地图上方,由于基于dom实现,因此可以使用常用的html和css编写marker。
示例如下:
<template>
<div class="map-page-container">
<el-amap
:show-label="false"
:center="center"
:zoom="zoom"
@click="clickMap"
@init="initMap"
>
<el-amap-marker
:position="componentMarker.position"
:visible="componentMarker.visible"
:draggable="componentMarker.draggable"
:move-options="moveOptions"
@init="markerInit"
@click="clickMarker"
>
<div style="padding: 5px 10px;white-space: nowrap;background: blue;color: #fff;">
测试content
</div>
</el-amap-marker>
</el-amap>
</div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import {ElAmap, ElAmapMarker} from "@vuemap/vue-amap";
const zoom = ref(16);
const center = ref([121.5273285, 31.21515044]);
const componentMarker = ref({
position: [121.5273285, 31.21315058],
visible: true,
draggable: false
});
const moveOptions = ref({
duration: 200,
autoRotation: false
})
const clickMap = (e: any) => {
console.log('click map: ', e);
}
const initMap = (map: any) => {
console.log('init map: ', map);
}
const clickMarker = () => {
alert('点击了标号');
}
const markerInit = (e: any) => {
console.log('marker init: ', e);
}
</script>
<style scoped>
.map-page-container{
height: 500px;
}
</style>
效果图:
上述示例中可以看出对于el-amap-marker
组件,我们并没有使用属性去添加标号的内容,而是直接使用slot,相比使用content添加内容,使用slot可以更加方便直观的编写代码,也更符合vue组件规范。同时组件的slot支持响应式,会在内容更新时同步修改marker展示内容,比较适合根据条件展示不同的图标,以及一些复杂的标号内容显示。
2、千级数量
当marker数据量超过300以上时已经不适合使用dom格式的marker,这时候需要使用el-amap-label-marker
组件,该组件支持添加图片和文本,同时支持标号之间的避让,甚至可以与底图默认标号进行避让,比较适合做一些poi等点位的显示。
示例如下:
<template>
<div class="map-page-container">
<el-amap
:show-label="false"
:center="center"
:zoom="zoom"
@click="clickMap"
@init="initMap"
>
<el-amap-layer-labels>
<el-amap-label-marker
:visible="labelOptions.visible"
:position="labelOptions.position"
:text="labelOptions.text"
:icon="labelOptions.icon"
@click="clickMarker"
/>
</el-amap-layer-labels>
</el-amap>
</div>
<div class="toolbar">
<button @click="changeVisible">
{{ labelOptions.visible? '隐藏' : '显示' }}
</button>
</div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import {ElAmap, ElAmapLayerLabels, ElAmapLabelMarker} from "@vuemap/vue-amap";
const zoom = ref(16);
const center = ref([121.5495395, 31.21515044]);
const labelOptions = ref({
visible: true,
position: [121.5495395, 31.21515044],
text: {
content: '测试content',
direction: 'right',
style: {
fontSize: 15,
fillColor: '#fff',
strokeColor: 'rgba(255,0,0,0.5)',
strokeWidth: 2,
padding: [3, 10],
backgroundColor: 'yellow',
borderColor: '#ccc',
borderWidth: 3,
}
},
icon: {
image: 'https://a.amap.com/jsapi_demos/static/images/poi-marker.png',
anchor: 'bottom-center',
size: [25, 34],
clipOrigin: [459, 92],
clipSize: [50, 68]
}
});
const changeVisible = () => {
labelOptions.value.visible = !labelOptions.value.visible;
}
const clickMap = (e: any) => {
console.log('click map: ', e);
}
const initMap = (map: any) => {
console.log('init map: ', map);
}
const clickMarker = () => {
alert('点击了标号');
}
</script>
<style scoped>
.map-page-container{
height: 500px;
}
</style>
效果图:
从效果图中可以看出el-amap-label-marker
支持图标与文本同时配置对于文本仅限于基础的CSS样式效果,所以该组件比较适合简单的图片加文字的展示方式。
3、万级数量
对于已经达到万级数量的数据,这时候如果需要展示marker只适合展示基础的图标样式,如果需要展示全部的marker点的话推荐使用el-amap-mass-marks
或者Loca组件中的el-amap-loca-icon
组件,这两个组件的使用示例和方法可以查看文档。