update 地图绘制
This commit is contained in:
zk
+136
-6
@@ -1,16 +1,19 @@
|
||||
import china from '/@/assets/lngLat/china.ts';
|
||||
import chinaInner from '/@/assets/lngLat/chinaInner.ts';
|
||||
import { typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
|
||||
import { helicopter, mapbg } from '/@/components/chinaMap/chinaHooks.ts';
|
||||
|
||||
export const defaultOption = {
|
||||
center: [106.3, 37.87], //地图中心点
|
||||
zoom: 4.3, //地图显示的缩放级别
|
||||
mapStyle: 'darkblue', //地图样式
|
||||
};
|
||||
export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON'];
|
||||
export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster'];
|
||||
export const Map = {
|
||||
map: null,
|
||||
overlayGroup: null,
|
||||
overlayGroup: null, // 地图中marker
|
||||
aircraftGroup: null, //直升机marker
|
||||
cluster: null,
|
||||
initMap({ el, option }) {
|
||||
const { zoom, center, mapStyle } = { ...defaultOption, ...option };
|
||||
//基本地图加载
|
||||
@@ -60,10 +63,8 @@ export const Map = {
|
||||
},
|
||||
// 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
|
||||
createOverlay(result) {
|
||||
if (this.overlayGroup) {
|
||||
this.map.remove(this.overlayGroup);
|
||||
this.overlayGroup = null;
|
||||
}
|
||||
this.clearAircraft();
|
||||
this.clearOverlay();
|
||||
this.overlayGroup = new AMap.OverlayGroup();
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let { type, lon, lat } = result[i];
|
||||
@@ -96,4 +97,133 @@ export const Map = {
|
||||
console.log(e.target.getExtData());
|
||||
});
|
||||
},
|
||||
clearOverlay() {
|
||||
if (this.overlayGroup) {
|
||||
this.map.remove(this.overlayGroup);
|
||||
this.overlayGroup = null;
|
||||
}
|
||||
},
|
||||
|
||||
//创建直升机marker
|
||||
createAircraft(result) {
|
||||
this.clearAircraft();
|
||||
this.clearOverlay();
|
||||
// this.aircraftGroup = new AMap.OverlayGroup();
|
||||
if (!Array.isArray(result) && result.length == 0) return;
|
||||
const content = `
|
||||
<div style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
">
|
||||
<div
|
||||
style="width:156px;height: 52px;text-align:center; !important;">
|
||||
<div style="display: flex;
|
||||
justify-content: center;">
|
||||
<div class="helicopter"></div>
|
||||
</div>
|
||||
<div style='z-index:999;background-color:#0A8B18;height:auto; '>
|
||||
<h5 style="overflow: hidden;font-size:18px;color:#fff;white-space: nowrap;height:26px; line-height: 26px;padding:2px 4px;">
|
||||
4009-120-999
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const markers = [];
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let { lon, lat } = result[i];
|
||||
const marker = new AMap.Marker({
|
||||
// 点的坐标
|
||||
position: [lon, lat],
|
||||
//启用点击事件 如果需要点击事件，必须开启
|
||||
clickable: true,
|
||||
title: `4009-120-999`,
|
||||
content: content,
|
||||
offset: new AMap.Pixel(-16, -30),
|
||||
});
|
||||
markers.push(marker);
|
||||
}
|
||||
|
||||
// //将组 挂载到地图上
|
||||
// this.aircraftGroup.setMap(this.map);
|
||||
// //将需要批量控制的点放到一个组中，通过控制组，就可以操作组内所有所有覆盖物
|
||||
// this.aircraftGroup.addOverlay(markers);
|
||||
|
||||
if (this.cluster) {
|
||||
// this.cluster.setMap(null);
|
||||
this.map.remove(this.cluster);
|
||||
// this.cluster = null;
|
||||
this.cluster.setMap(null);
|
||||
}
|
||||
//使用renderCluserMarker属性实现聚合点的完全自定义绘制
|
||||
let sts = [
|
||||
{
|
||||
url: mapbg,
|
||||
size: new AMap.Size(32, 32),
|
||||
offset: new AMap.Pixel(-16, -30),
|
||||
textColor: '#fff',
|
||||
textSize: 20,
|
||||
},
|
||||
];
|
||||
let that = this;
|
||||
let arr = result.map((item) => ({ weight: 4, lnglat: [item.lon, item.lat] }));
|
||||
let count = 4;
|
||||
this.cluster = new AMap.MarkerClusterer(
|
||||
that.map, // 地图实例
|
||||
arr,
|
||||
{
|
||||
renderMarker: (context) => {
|
||||
var factor = Math.pow(context.count / count, 1 / 18);
|
||||
var div = document.createElement('div');
|
||||
var Hue = 180 - factor * 180;
|
||||
var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
|
||||
var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
|
||||
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
|
||||
var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
|
||||
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
|
||||
div.style.width = div.style.height = size + 'px';
|
||||
div.innerHTML = content || context.count;
|
||||
div.style.lineHeight = size + 'px';
|
||||
div.style.color = fontColor;
|
||||
div.style.fontSize = '14px';
|
||||
div.style.textAlign = 'center';
|
||||
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
||||
context.marker.setContent(div);
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log('xx', this.cluster);
|
||||
this.cluster.setMap(this.map);
|
||||
this.getRange(result);
|
||||
},
|
||||
clearAircraft() {
|
||||
if (this.aircraftGroup) {
|
||||
this.map.remove(this.aircraftGroup);
|
||||
this.aircraftGroup = null;
|
||||
}
|
||||
},
|
||||
getRange(list) {
|
||||
//绘制飞机的范围图
|
||||
var array = new Array(list.length);
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var circle = new AMap.Circle({
|
||||
center: [list[i].lon, list[i].lat],
|
||||
radius: 100000, //半径
|
||||
borderWeight: 3,
|
||||
strokeColor: '#FF33FF',
|
||||
strokeOpacity: 1,
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.2,
|
||||
fillOpacity: 0.4,
|
||||
strokeStyle: 'dashed',
|
||||
strokeDasharray: [10, 10],
|
||||
// 线样式还支持 'dashed'
|
||||
fillColor: '#1791fc',
|
||||
zIndex: 50,
|
||||
});
|
||||
circle.setMap(this.map);
|
||||
array.push(circle);
|
||||
}
|
||||
return array;
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user