序言
最近开发一个大屏项目,需要用到地图,只在地图上显示某个区,并根据企业信息的不同显示不同的点,现通过高德地图的反镂空区域效果实现此功能。其他弹窗内容就不在下方体现了,只展示封装的地图组件,整体通过rem进行布局。
参考高德:高德地图反镂空效果
<template>
<div id="container"></div>
</template>
//镂空实现效果
//npm i @amap/amap-jsapi-loader --save
import {
onMounted, onUnmounted, watch,defineExpose, defineEmits } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null;
let infoWindow = null;
let array = [];
let TYPE = [
'不同类型的点的标识',
];
let markers = [];
const props = defineProps({
areaPoints:{
default:[],
},
})
const emit = defineEmits(['clickPoint','changeZoom'])
//监听数据点变化
watch(() => props.areaPoints, (newVal, oldVal) => {
if(map){
setPoints(newVal)
}
},{
deep: true})
onMounted(() => {
setRem();
window.addEventListener("resize", () => {
setRem();
});
window._AMapSecurityConfig = {
securityJsCode: "密钥",
};
AMapLoader.load({
key: "你的Key", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [], //需要使用的的插件列表,如比例尺'AMap.Scale',支持添加多个如:['...','...']
AMapUI: {
version: '1.1',
plugins:['geo/DistrictExplorer']
}
})
.then((AMap