<!--
Description: 高德地图 -- 在线版
Author: 李亚光
Date: 2023-04-21
-->
<script lang="ts" setup name="GuadMap">
import AMapLoader from '@amap/amap-jsapi-loader'
// import { styleType } from 'element-plus/es/components/table-v2/src/common'
const $props = defineProps({
// 初始图层 normal satellite dark
layer: {
type: String,
default: 'normal',
},
center: {
type: Array,
default: () => ([116.397428, 39.90923]),
},
zoom: {
type: Number,
default: 9,
},
showPiepleLayer: {
type: Boolean,
default: false,
},
})
const $emits = defineEmits(['complete', 'marke', 'mapClick', 'markerClick', 'lineClick', 'polygonClick', 'massMarksClick', 'polygonDbClick', 'textClick'])
const loading = ref(true)
const publicPath = window.location.href.split('#')[0]
// 设置安全密钥
window._AMapSecurityConfig = {
securityJsCode: localStorage.getItem('securityJsCode')!, // 后期需替换
}
// 地图实例
const map = shallowRef()
const AMap = ref()
// 使用高德地图API的逆地理编码服务
const getPosition = (location: string[], resultFun: Function) => {
let position = ''
AMap.value.plugin('AMap.Geocoder', () => {
var geocoder = new AMap.value.Geocoder()
var lnglat = location
geocoder.getAddress(lnglat, (status: any, result: any) => {
// console.log(status, result)
if (status === 'complete' && result.info === 'OK') {
// result为对应的地理位置详细信息
// console.log(result.regeocode.formattedAddress)
position = result.regeocode.formattedAddress
resultFun(position)
}
else {
position = ''
resultFun(position)
}
})
})
}
// 使用高德地图API获取地理位置信息
const getLocation = (onComplete: Function, onError: Function) => {
if (!AMap.value) {
setTimeout(() => {
getLocation(onComplete, onError)
}, 600)
return
}
AMap.value.plugin('AMap.Geolocation', function () {
var geolocation = new AMap.value.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默认：true
timeout: 10000, // 设置定位超时时间，默认：无穷大
offset: [10, 20], // 定位按钮的停靠位置的偏移量
zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
position: 'RB' // 定位按钮的排放位置, RB表示右下
})
geolocation.getCurrentPosition(function (status, result) {
if (status == 'complete' && result.info === 'SUCCESS') {
onComplete(result)
} else {
onError(result)
}
})
})
}
// 是否展示管线图层
const showPieple = ref(true)
// 地图缩放等级
const zoom = ref(0)
// 图层
const layer = ref()
// 图层标识
const layerFlag = ref('normal')
const xunteng = ref()
// const publicPath = import.meta.env.BASE_URL
// console.log(publicPath, 'publicPath')
// -------------------------------------初始化地图--------------------------------------------------
const wrapRef = ref()
const initMap = () => {
AMapLoader.load({
key: localStorage.getItem('JsKey')!, // 后期需替换
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.Geocoder', 'AMap.MarkerClusterer', 'AMap.IndexCluster'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap1: any) => {
// console.log($props.center, '$props.center')
// console.log($props.center && $props.center?.length === 2 && !isNaN($props.center[0]) && !isNaN($props.center[1]) ? $props.center : [116.397428, 39.90923])
AMap.value = AMap1
// 初始化地图
map.value = new AMap1.Map('map', {
viewMode: '3D', // 是否为3D地图模式
zoom: $props.zoom, // 初始化地图级别
zooms: [8, $props.showPiepleLayer ? 18 : 20],
resizeEnable: true,
center: $props.center && $props.center?.length === 2 && !isNaN($props.center[0]) && !isNaN($props.center[1]) ? $props.center : [116.397428, 39.90923],
})
// // 地图图块加载完成后触发
map.value.on('complete', () => {
// 修改loading状态
// console.log('地图加载完成')
setTimeout(() => {
$emits('complete', AMap.value)
loading.value = false
}, 1500)
// AMap.value.reGeocode({
// location: $props.center,
// success: (res: any) => {
// // 获取到详细地址信息
// const formattedAddress = res.regeocode.formattedAddress
// console.log('地址:', formattedAddress)
// },
// error: (err: any) => {
// console.error('获取地址失败:', err)
// },
// })
})
try {
// 图层
if ($props.layer === 'satellite') {
// 卫星图层
layer.value = new AMap.value.TileLayer.Satellite()
map.value.addLayer(layer.value)
map.value.setFeatures(['bg', 'building'])
layerFlag.value = 'satellite'
}
else if ($props.layer === 'dark') {
// 深色图层
map.value.setMapStyle('amap://styles/darkblue')
}
else if ($props.layer === 'xunteng') {
if (window.sessionStorage.getItem('ping-xunteng-layer')) {
map.value.setZoom(12)
xunteng.value = new AMap.value.TileLayer({
visible: true,
zIndex: 0,
opacity: 1,
zooms: [10, 19],
dataZooms: [10, 19],
getTileUrl: (a: any, b: any, c: any) => {
// 经纬度转换成本地瓦片所在路径
const flag = '00000000'
const zz = c
const z = `L${String(zz).length === 1 ? `0${zz}` : zz}`
// console.log(zz, 'zz')
const xx = a.toString(16)
const x = `C${flag.substring(0, 8 - xx.length)}${xx}`
const yy = b.toString(16)
const y = `R${flag.substring(0, 8 - yy.length)}${yy}`
return `${window.localStorage.getItem('xuntengMap')}/${z}/${y}/${x}.png`
},
})
map.value.addLayer(xunteng.value)
}
map.value.setMapStyle('amap://styles/darkblue')
}
if ($props.showPiepleLayer) {
addPiepleLayer()
}
}
catch (error) {
// console.log(error, 'error')
}
// 地图绑定右击事件
map.value.on('mousedown', clickHandler)
// 地图绑定点击击事件
map.value.on('click', (e: any) => {
$emits('mapClick', e)
})
// // 地图zoom
map.value.on('zoomend', () => {
zoom.value = map.value.getZoom() // 获取当前缩放级别
// console.log('当前缩放级别:', zoom.value)
})
// loading.value = false
})
.catch((e) => {
// console.log(e, '地图加载失败')
loading.value = false
})
}
// ------------------------------------------------------------------------------------------------
function clickHandler(e) {
const location = [e.lnglat.getLng(), e.lnglat.getLat()]
if (event.button === 2) {
// console.log('当前点击坐标为: ', location)
}
}
// -------------------------------------切换图层----------------------------------------------------
const changeLayerGrop = () => {
if (layerFlag.value === 'normal') {
layer.value = new AMap.value.TileLayer.Satellite()
map.value.addLayer(layer.value)
map.value.setFeatures(['bg', 'building'])
layerFlag.value = 'satellite'
}
else {
map.value.removeLayer(layer.value)
layerFlag.value = 'normal'
}
}
// 添加管线图层
function addPiepleLayer() {
if (!window.sessionStorage.getItem('ping-xunteng-layer')) {
return
}
// map.value.setZoom(12)
if (xunteng.value) {
xunteng.value.show()
return
}
xunteng.value = new AMap.value.TileLayer({
visible: true,
zIndex: 0,
opacity: 1,
zooms: [10, 19],
dataZooms: [10, 19],
getTileUrl: (a: any, b: any, c: any) => {
// 经纬度转换成本地瓦片所在路径
const flag = '00000000'
const zz = c
const z = `L${String(zz).length === 1 ? `0${zz}` : zz}`
// console.log(zz, 'zz')
const xx = a.toString(16)
const x = `C${flag.substring(0, 8 - xx.length)}${xx}`
const yy = b.toString(16)
const y = `R${flag.substring(0, 8 - yy.length)}${yy}`
return `${window.localStorage.getItem('xuntengMap')}/${z}/${y}/${x}.png`
},
})
map.value.addLayer(xunteng.value)
}
// 移除管线图层
function removePiepleLayer() {
if (xunteng.value) {
xunteng.value.hide()
}
// map.value.removeLayer(xunteng.value)
}
watch(() => showPieple.value, (newVal) => {
if (!$props.showPiepleLayer) { return }
if (String(newVal) === 'true') {
const zoom = map.value.getZoom()
addPiepleLayer()
setTimeout(() => {
map.value.setZoom(zoom)
})
}
else if (String(newVal) === 'false') {
// console.log('移除管线图层')
removePiepleLayer()
}
}, {
deep: true,
})
// ------------------------------------------------------------------------------------------------
// -------------------------------------多边形操作--------------------------------------------------
// 多边形数组
const polygonAllList = ref<any>([])
// 绘制多边形
function addPolygon(data: any[], style = {
name: '',
fillColor: '#ccebc5', // //多边形填充颜色
strokeOpacity: 1, // 多边形填充透明度
fillOpacity: 0.3, // 多边形填充透明度
strokeColor: '#2b8cbe', // 线条颜色
strokeWeight: 2, // 轮廓线宽度
strokeStyle: 'dashed',
strokeDasharray: [5, 5],
activeFillColor: '#7bccc4', // 鼠标进入多边形的激活颜色
dbclickSetCenter: false, // 双击多边形自动放大切切换中心试图
dbclickCenter: [], // 中心坐标
needHover: true,
}) {
const polygon = new AMap.value.Polygon({
path: data, // 边界数据
fillColor: style.fillColor,
strokeOpacity: style.strokeOpacity,
fillOpacity: style.fillOpacity,
strokeColor: style.strokeColor,
strokeWeight: style.strokeWeight,
strokeStyle: style.strokeStyle,
strokeDasharray: style.strokeDasharray,
pane: 'markerPane'
})
polygon.on('mouseover', () => {
if (!style.needHover) {
return
}
polygon.setOptions({
fillOpacity: style.fillOpacity + 0.2,
fillColor: style.activeFillColor,
})
})
polygon.on('mouseout', () => {
if (!style.needHover) {
return
}
polygon.setOptions({
fillOpacity: style.fillOpacity,
fillColor: style.fillColor,
})
})
polygon.on('mousedown', clickHandler)
// if (style.dbclickSetCenter) {
polygon.on('dblclick', (e) => {
// console.log(`当前点击的是${style.name}`)
$emits('polygonDbClick', { event: e, map: map.value, style })
})
polygon.on('click', (e) => {
// console.log(`当前点击的是${style.name}`)
$emits('polygonClick', { event: e, map: map.value, style })
})
polygonAllList.value.push(polygon)
// }
map.value.add(polygon)
}
// 移除多边形
const removePolygon = () => {
polygonAllList.value.forEach((item: any) => {
item.setMap(null)
})
polygonAllList.value = []
// console.log('清除绘制的多边形')
}
// ------------------------------------------------------------------------------------------------
// -------------------------------------标记文本操作--------------------------------------------------
// 标记文本数组
const textAllList = ref<any>([])
// 添加标记文字
function addText(data: any, style = {
/**
* data 示例
* text： 文本内容
* position： 位置
*/
// 'padding': '.75rem 1.25rem',
// 'width': '15rem',
// 'border-width': 0,
// 'text-align': 'center',
'font-size': '18px',
'color': 'white',
'background-color': 'transparent',
'border-color': 'transparent',
}) {
// 创建纯文本标记
var Text = new AMap.value.Text({
text: data.text, // 文本内容
anchor: 'center', // 设置文本标记锚点
draggable: false, // 是否可拖拽
cursor: '', // 鼠标样式
angle: 0, // 旋转角度
style, // 文本样式
position: data.position, // 点标记在地图上显示的位置
zIndex: data.zIndex || 1
})
Text.on('click', (e) => {
// console.log(`当前点击的是${style.name}`)
$emits('textClick', { event: e, map: map.value, style })
})
textAllList.value.push(Text)
Text.setMap(map.value)
}
// 移除标记文字
const removeText = () => {
textAllList.value.forEach((item: any) => {
item.setMap(null)
})
textAllList.value = []
}
// ------------------------------------------------------------------------------------------------
// -------------------------------------点标记操作--------------------------------------------------
// 点标记(一般点标记)数组
const markerAllList = ref<any>([])
const markerHtml = `<img width="19px" height="32px" src="${publicPath}/image/mark_bs.png" />`
// 添加点标记 (一般点标记)
const addMarker = (data: any) => {
/**
* data 示例
* position： 位置
* content： 标记点内容 html
* label： 文本标记
*/
var marker = new AMap.value.Marker({
position: data.position,
// 将 html 传给 content
content: data.content || markerHtml,
// 以 icon 的 [center bottom] 为原点
// offset: new AMap.value.Pixel(-9, -32),
offset: new AMap.value.Pixel(data.offsetX || -9, data.offsetY || -32),
})
markerAllList.value.push(marker)
// markers的信息窗体
marker.on('click', (e: any) => {
// console.log('标记点')
$emits('markerClick', { event: e, map: map.value, data, marker })
})
// 标记点文本标记
marker.setLabel({
offset: new AMap.value.Pixel(0, -5), // 设置文本标注偏移量
content: `<div style="color:white;font-size:15px;">${data.label}</div>`, // 设置文本标注内容
direction: 'top-center', // 设置文本标注方位
})
// 将 markers 添加到地图
map.value.add(marker)
}
// 移除点标记 (一般点标记)
const removeMarker = () => {
markerAllList.value.forEach((item: any) => {
item.setMap(null)
})
markerAllList.value = []
}
// ------------------------------------------------------------------------------------------------
// -------------------------------------绘线操作--------------------------------------------------
// 折线数组
const lineAllList = ref<any[]>([])
// 添加折线
const addPolyline = (data: any) => {
/**
* data : {path: [],style: {}}
* path: 折线点位数据 [[],[],[]]
* style 折线样式
* style样式参考
* isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 3,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 6,
// 折线样式还支持 'dashed'
strokeStyle: "dashed",
// strokeStyle是dashed时有效
strokeDasharray: [15, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
*/
var polyline = new AMap.value.Polyline({
path: data.path.map((item: any) => (new AMap.value.LngLat(Number(item[0]), Number(item[1])))),
...data.style,
})
polyline.on('click', (e) => {
// console.log('点击了线')
$emits('lineClick', { event: e, map: map.value, data, polyline })
})
// console.log(polyline, 'polyline')
lineAllList.value.push(polyline)
map.value.add([polyline])
}
// 移除折线
const removePolyline = () => {
lineAllList.value.forEach((item: any) => {
item.setMap(null)
})
lineAllList.value = []
}
// ------------------------------------------------------------------------------------------------
// -----------------------------------海量点标记操作------------------------------------------------
// 点标记(海量点)数组
const massMarksAllList = ref<any>([])
// 添加点标记(海量点)
const addMassMarks = (data: any) => {
console.log('添加海量点标记', data)
var massMarks = new AMap.value.MassMarks(data.path, {
zIndex: data.zIndex, // 海量点图层叠加的顺序
zooms: data.zooms || [], // 在指定地图缩放级别范围内展示海量点图层
style: data.style.map((item: any) => ({
...item,
anchor: new AMap.value.Pixel(0, 0),
size: new AMap.value.Size(data.size ? data.size : 25, data.size ? data.size : 25)
})), // 设置样式对象
})
massMarksAllList.value.push(massMarks)
massMarks.setMap(map.value)
massMarks.on('click', (e) => {
console.log('点击了海量点标记')
$emits('massMarksClick', { event: e, map: map.value, data, massMarks, type: 'marks' })
})
}
// 移除点标记(海量点)
const removeMassMarks = () => {
massMarksAllList.value.forEach((item: any) => {
item.setMap(null)
})
massMarksAllList.value = []
}
// ------------------------------------------------------------------------------------------------
// -------------------------------------绘线操作----------------------------------------------------
const massLineAllList = ref<any>([]) // 海量线数组
// 添加折线(海量)
const addMassLine = (data: any) => {
/**
* data
* path: 折线点位数据 [[],[],[]]
* style 折线样式
* style样式参考
strokeColor: "#3366FF",
strokeWeight: 6,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
zIndex: 50,
zoomLevels: [1,18]
*/
// const multiPolyline = new AMap.value.MultiPolyline({
// map: map.value,
// styles: {
// ...data.style,
// },
// })
// massLineAllList.value.push(multiPolyline)
// multiPolyline.setPaths(data.path)
}
// 移除折线
const removeMassLine = () => {
// massLineAllList.value.forEach((item: any) => {
// item.setMap(null)
// })
// massLineAllList.value = []
}
// ------------------------------------------------------------------------------------------------
// -------------------------------------- 点聚合----------------------------------------------
const MarkerAllCluster = ref<any>([]) // 点聚合数组
const cluster = ref([])
// 添加点聚合(距离聚合)
const addCluster = (points, styleList, clusterOptions = {}) => {
// console.log(points.map((item: any) => ({ ...item, city: '北京' })), 'points')
// console.log(points, 'points')
var count = points.length
var _renderClusterMarker = function (context) {
var factor = (context.count / count) ** (1 / 18)
var div = document.createElement('div')
var Hue = 180 - factor * 130
var bgColor = `hsla(${Hue},100%,40%,0.7)`
var fontColor = `hsla(${Hue},100%,90%,1)`
var borderColor = `hsla(${Hue},100%,40%,1)`
var shadowColor = `hsla(${Hue},100%,90%,1)`
div.style.backgroundColor = bgColor
var size = Math.round(30 + (context.count / count) ** (1 / 5) * 20)
div.style.width = div.style.height = `${size}px`
div.style.border = `solid 1px ${borderColor}`
div.style.borderRadius = `${size / 2}px`
div.style.boxShadow = `0 0 5px ${shadowColor}`
div.innerHTML = context.count
div.style.lineHeight = `${size}px`
div.style.color = fontColor
div.style.fontSize = '14px'
div.style.textAlign = 'center'
context.marker.setOffset(new AMap.value.Pixel(-size / 2, -size / 2))
context.marker.setContent(div)
context.marker.on('click', (e) => {
map.value.setCenter(e.target._position)
map.value.setZoom(map.value.getZoom() + 3)
})
}
const _renderMarker = (context: any) => {
const data = context.data[0]
let style = [
{
url: `${publicPath}/image/well/well-normal.png`, // 图标地址
},
{
url: `${publicPath}/image/well/well-error.png`, // 图标地址
},
{
url: `${publicPath}/image/well/well-off.png`, // 图标地址
},
{
url: `${publicPath}/image/well/well-will.png`, // 图标地址
},
]
if (styleList) {
style = styleList.map((item: any) => ({
...item,
anchor: new AMap.value.Pixel(0, 0),
size: new AMap.value.Size(25, 25)
}))
}
const markerHtml = `<img width="20px" height="20px" src="${style[data.style || 0].url}" />`
var offset = new AMap.value.Pixel(-9, -9)
context.marker.setContent(markerHtml)
context.marker.setOffset(offset)
context.marker.on('click', (e) => {
// console.log(e, data, '1111')
$emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data, type: 'cluster' })
})
}
const cluster1 = new AMap.value.MarkerCluster(map.value, points, {
gridSize: clusterOptions.gridSize || 100, // 设置网格像素大小
// maxZoom: false, // 最大的聚合级别，大于该级别就不进行相应的聚合 默认值为 18
clusterByZoomChange: false, // 地图缩放过程中是否聚合。默认值 false
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
})
cluster.value.push(cluster1)
// 聚合点小于11时不聚合
cluster1.setMinClusterSize(clusterOptions.setMinClusterSize || 40)
}
const removeCluster = () => {
if (cluster.value.length) {
// console.log('清除点聚合')
// map.value.remove(cluster.value)
// cluster.value.setMap(null)
// cluster.value = ''
cluster.value.forEach((item: any) => {
map.value.remove(item)
item.setMap(null)
})
cluster.value = []
}
}
// 点聚合(行政区)
const clusterForDistrict = ref()
const addClusterForDistrict = (points,) => {
console.log(points, 'points')
var district = {
'北京': {
"adcode": "110000",
"center": "116.405285,39.904989",
// "center" : "117.939152,40.976204",
},
'亦庄开发区': {
"center": "116.506647,39.795337",
},
'密云区': {
"adcode": "110118",
"center": "116.843352,40.377362",
},
'怀柔区': {
"adcode": "110116",
"center": "116.637122,40.324272",
},
'门头沟区': {
"adcode": "110109",
"center": "116.105381,39.937183",
},
'顺义区': {
"adcode": "110113",
"center": "116.653525,40.128936",
},
'朝阳区': {
"adcode": "110105",
"center": "116.486409,39.921489",
},
'通州区': {
"adcode": "110112",
"center": "116.658603,39.902486",
},
'大兴区': {
"adcode": "110115",
"center": "116.338033,39.728908",
},
'昌平区': {
"adcode": "110114",
"center": "116.235906,40.218085",
},
'西城区': {
"adcode": "110102",
"center": "116.366794,39.915309",
},
'东城区': {
"adcode": "110101",
"center": "116.418757,39.917544",
},
'房山区': {
"adcode": "110111",
"center": "116.139157,39.735535",
},
'石景山区': {
"adcode": "110107",
"center": "116.195445,39.914601",
},
'海淀区': {
"adcode": "110108",
"center": "116.310316,39.956074",
},
'丰台区': {
"center": "116.286968,39.863642",
},
};
var clusterIndexSet = {
city: {
minZoom: 2,
maxZoom: 10,
},
district: {
minZoom: 10,
maxZoom: 12,
},
area: {
minZoom: 12,
maxZoom: 18,
},
};
function getStyle(context) {
var clusterData = context.clusterData; // 聚合中包含数据
var index = context.index; // 聚合的条件
var count = context.count; // 聚合中点的总数
var marker = context.marker; // 聚合绘制点 Marker 对象
var color = [
'8,60,156',
'66,130,198',
'107,174,214',
'78,200,211',
];
var indexs = ['city', 'district', 'area', 'community'];
var i = indexs.indexOf(index['mainKey']);
var text = clusterData[0][index['mainKey']];
var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
if (i <= 2) {
var extra = '<span class="showCount">' + context.count + '套</span>';
text = '<span class="showName">' + text + '</span>';
text += extra;
} else {
size = 12 * text.length + 20;
}
var style = {
bgColor: 'rgba(' + color[i] + ',.8)',
borderColor: 'rgba(' + color[i] + ',1)',
text: text,
size: size,
index: i,
color: '#ffffff',
textAlign: 'center',
boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
}
return style;
}
function getPosition(context) {
var key = context.index.mainKey;
var dataItem = context.clusterData && context.clusterData[0];
var districtName = dataItem[key];
if (!district[districtName]) {
return null;
}
var center = district[districtName].center.split(',');
var centerLnglat = new AMap.value.LngLat(center[0], center[1]);
return centerLnglat;
}
function _renderClusterMarker(context) {
var clusterData = context.clusterData; // 聚合中包含数据
var index = context.index; // 聚合的条件
var count = context.count; // 聚合中点的总数
var marker = context.marker; // 聚合点标记对象
var styleObj = getStyle(context);
// 自定义点标记样式
var div = document.createElement('div');
div.className = 'amap-cluster';
div.style.backgroundColor = styleObj.bgColor;
div.style.width = styleObj.size + 'px';
if (styleObj.index <= 2) {
div.style.height = styleObj.size + 'px';
// 自定义点击事件
context.marker.on('click', function (e) {
console.log(e)
var curZoom = map.value.getZoom();
if (curZoom < 20) {
curZoom += 1;
}
map.value.setZoomAndCenter(curZoom, e.lnglat);
});
}
div.style.border = 'solid 1px ' + styleObj.borderColor;
div.style.borderRadius = styleObj.size + 'px';
div.innerHTML = styleObj.text;
div.style.color = styleObj.color;
div.style.textAlign = styleObj.textAlign;
div.style.boxShadow = styleObj.boxShadow;
context.marker.setContent(div)
// 自定义聚合点标记显示位置
var position = getPosition(context);
if (position) {
context.marker.setPosition(position);
}
context.marker.setAnchor('center');
};
clusterForDistrict.value = new AMap.value.IndexCluster(map.value, points, {
renderClusterMarker: _renderClusterMarker,
clusterIndexSet: clusterIndexSet,
})
}
// ------------------------------------------------------------------------------------------------
onMounted(() => {
loading.value = true
const height = document.getElementById('map-container-only')?.offsetHeight
if (height) {
const map = document.getElementById('map')
if (map) {
map.style.height = `${height}px`
}
}
initMap()
// // 检测地图是否加载失败
// setTimeout(() => {
// // 地图canvas
// const canvas = document.getElementsByClassName('amap-layer')[0]
// const height = canvas.getBoundingClientRect().height
// if(height) {
// // 地图加载失败(报错类型)
// console.log('地图加载失败(报错类型)')
// }
// }, 1000 * 15)
})
onUnmounted(() => {
if (xunteng.value) {
map.value.remove(xunteng.value)
map.value.removeLayer(xunteng.value)
xunteng.value = null
}
if (map.value) {
// console.log('销毁地图')
map.value.destroy()
map.value = null
AMap.value = null
document.getElementById('map')?.remove()
}
})
onBeforeUnmount(() => {
if (xunteng.value) {
map.value.remove(xunteng.value)
map.value.removeLayer(xunteng.value)
xunteng.value = null
}
if (map.value) {
// console.log('销毁地图')
map.value.destroy()
map.value = null
AMap.value = null
document.getElementById('map')?.remove()
}
})
defineExpose({
map,
AMap,
zoom, // 当前缩放等级
changeLayerGrop, // 切换图层
layerFlag, // 当前图层标识
polygonAllList, // 多边形区域数据
addPolygon, // 绘制多边形区域
removePolygon, // 移除多边形
addText, // 添加标记文字
removeText, // 移除标记文字
addMarker, // 添加点标记 (一般点标记)
removeMarker, // 移除点标记 (一般点标记)
addPolyline, // 添加折线
lineAllList, // 折线数组
removePolyline, // 移除折线
addMassMarks, // 添加点标记(海量点)
massMarksAllList,
removeMassMarks, // 移除点标记(海量点)
addMassLine, // 添加折线(海量线)
removeMassLine, // 移除折线(海量线)
getPosition, // 根据坐标获取详细位置信息
getLocation, // 获取当前位置
addCluster,
removeCluster,
addClusterForDistrict,
showPieple
})
</script>
<template>
<div id="map-container-only" class="container">
<!-- 地图 -->
<div id="map" ref="wrapRef " v-loading="loading" />
<!-- 管线图层 -->
<el-checkbox v-if="showPiepleLayer" v-model="showPieple" class="checkbox-layer" label="管线图层" size="large" />
</div>
</template>
<style lang="scss" scoped>
.container {
height: 100%;
width: 100%;
position: relative;
}
::v-deep(.amap-marker-label) {
background-color: transparent;
border: none;
}
.checkbox-layer {
position: absolute;
z-index: 99;
top: 10px;
right: 10px;
}
#map {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
</style>
<style>
/* 隐藏高德logo */
.amap-logo {
display: none !important;
}
/* 隐藏高德版权 */
.amap-copyright {
display: none !important;
}
.img-map-marker {
width: 20px;
height: 20px;
}
</style>
