最近公司需要内网开发，使用到高德地图，正好碰到，在这里记录一下。本博客中实现了离线高德地图显示，点聚合，非聚合点自定义图标，图标点击弹出信息框，框选，圈选区域这些功能。
效果图：
1.png
2.png
3.png
实现思路：
1、下载地图瓦片数据，gitee有个开源地图瓦片下载项目，我fork了一下，地图下载器。
如果有fork失败的兄弟，可以找我私信要。
4.png
5.png
11.png
6.png
2、下载高德地图离线2.0JS API，高德地图离线地图api地址。
amap文件夹放在public下边，和瓦片数据同一级。
声明
- 本离线包基于高德地图js-api2.0，在此基础进行修改。
- 本项目仅为个人兴趣开发，不收费，作者也不提供任何付费服务。
- 本项目仅供个人学习研究使用。
- 本项目禁止商用，禁止在企业项目开发中使用此地图离线包，禁止使用此离线包以及基于此项目二次开发的软件从事盈利活动。
3、第一步和第二步已经能实现简单的高德地图渲染了，但是我们加载地图肯定是需要别的操作，比如点聚合，非聚合点自定义图标，图标点击弹出信息框，框选，圈选区域这些功能。这时候就需要我们我们自带的AMap3.js可能没有或者对应的插件包报错，我们就应该添加新的插件对应的js。
7.png
下载方法，本地项目中引入在线的高德地图，plugins中把我们需要的插件添加进去。
8.png
然后运行起来，在网页端network中下载对应的js，然后查找关键字jsload，把我们新添加插件对应的这一串添加到我们本地AMap3.js的最下边就OK了。
9.png
基本步骤就说清楚了，下边是一些显示，点聚合，非聚合点自定义图标，图标点击弹出信息框的代码。
//初始化
async initData() {
//定义地图
const base_url = "../../";
const layers = [new AMap.TileLayer({
getTileUrl: function (x, y, z) {
return `${base_url}MAP_zxy/${z}/${x}/${y}.png`;
},
opacity: 1,
zIndex: 99,
})]
this.map = new AMap.Map('container', { // 设置地图容器id
zoom: 10,
resizeEnable: true,
rotateEnable: true,
pitchEnable: true,
// center: [104.96824,33.375687],
center: [103.847998, 36.067468],
defaultCursor: 'pointer',
showLabel: true, //是否显示文字标注
layers: layers
})
//聚合打点
this.addCluster();
//定义鼠标框选工具
this.mouseTool = new AMap.MouseTool(this.map);
const that = this;
this.mouseTool.on('draw', function (event) {
that.markerForFigure = [];
that.mouseTool.close(false);
// 获取所有点
var allMarkers = that.map.getAllOverlays('marker');
var eObject = event.obj;//obj覆盖物对象。
allMarkers.forEach((marker => {
var markerInPolygon = eObject.contains(marker.getPosition());//是否包含marker
if (markerInPolygon) {
that.markerForFigure.push(marker)
}
}));
console.log(that.markerForFigure, "被选中的标记")
});
},
addCluster() {
let pointers = [];
if (this.rawData) {
this.rawData.map((value, index) => {
if (value.longitude !== undefined && value.latitude !== undefined) {
pointers.push({
weight: 1,
lnglat: [
this.toFixedDigit(value.longitude - 0, 5),
this.toFixedDigit(value.latitude - 0, 5),
],
deviceId: value.deviceId,
deviceCode: value.channelId,
deviceName: value.channelName,
orgCode: value.orgCode,
isOnline: value.psOnlineState,
manufacture: value.manufacture,
});
this.allPointers = pointers;
}
});
}
if (this.cluster && this.cluster != null) { //1. 如果存在 cluster 说明已经初始化过了，直接使用，变更它的点的内容就可以了。
this.cluster.setData(pointers);
} else {//2. 如果没有 cluster 就进行初始化。
this.infoWindow = new AMap.InfoWindow({ closeWhenClickMap: true, offset: new AMap.Pixel(0, -30) });
this.cluster = new AMap.MarkerCluster(
this.map, // 地图实例
pointers, // 海量点数据，数据中需包含经纬度信息字段 lnglat
{
gridSize: 60,// 设置网格像素大小
// renderClusterMarker: this.renderClusterMarker, // 自定义聚合点样式
renderMarker: this.renderMarker, // 自定义非聚合点样式
}
)
}
this.cluster.on('click', (item) => {
//此处是通过包含点的数量判断是否是聚合点，不是聚合点就执行上方单个点的点击方式
if (item.clusterData.length <= 1) {
return;
}
//这里是计算所有聚合点的中心点
let alllng = 0, alllat = 0;
for (const mo of item.clusterData) {
alllng += mo.lnglat.lng;
alllat += mo.lnglat.lat;
}
const lat = alllat / item.clusterData.length;
const lng = alllng / item.clusterData.length;
//这里是放大地图，此处写死了每次点击放大的级别，可以根据点的数量和当前大小适应放大，体验更佳
this.map.setZoomAndCenter(this.map.getZoom() + 4, [lng, lat]);
});
},
//格式化经纬度
toFixedDigit(num, n) {
//保留n位
if (typeof num != "number") {
return false;
}
num = num.toString();
var result = "";
var zeroResult = function (n) {
var zero = "";
for (var i = 0; i < n; i++) {
zero += "0";
}
return zero;
};
if (num % 1 == 0) {
//整数
result = num + "." + zeroResult(n);
} else {
//小数
var num1 = num.split(".");
if (num1[1].length < n) {
result = num1[0] + "." + num1[1] + zeroResult(n - num1[1].length);
} else {
result = num1[0] + "." + num1[1].substring(0, n);
}
}
return result;
},
//自定义非聚合点样式
renderMarker(context) {
const { marker, data } = context;
let iconOn = new AMap.Icon({
size: new AMap.Size(66, 80), // 图标尺寸
image: require(`../../assets/images/video-online.png`), // Icon的图像
imageSize: new AMap.Size(38, 50), // 根据所设置的大小拉伸或压缩图片
});
let iconOff = new AMap.Icon({
size: new AMap.Size(66, 80), // 图标尺寸
image: require(`../../assets/images/video-offline.png`), // Icon的图像
imageSize: new AMap.Size(38, 50), // 根据所设置的大小拉伸或压缩图片
});
if (data[0].isOnline == '1') {
marker.setIcon(iconOn)
} else if (data[0].isOnline == '0') {
marker.setIcon(iconOff)
}
marker.on("click", (e) => {
this.singleData = [];
console.log(this.$refs.infoWindow);
this.allPointers.forEach(item => {
if (item.deviceId == data[0].deviceId) {
this.singleData.push(item)
}
})
console.log(this.singleData);
this.$nextTick(()=>{
this.openInfoWindow(e)
})
});
},
openInfoWindow(e) {
this.infoWindow = new AMap.InfoWindow({
isCustom: true,
autoMove: true,
avoid: [20, 20, 20, 20],
content: this.$refs.infoWindow,
closeWhenClickMap: true,
offset: new AMap.Pixel(16, -40)
})
this.infoWindow.open(this.map, e.target.getPosition())
},
// 线段
drawPolyline() {
this.mouseTool.polyline({
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 6,
// 线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
// strokeDasharray: [10, 5],
})
},
// 多边形
drawPolygon() {
this.mouseTool.close(true)
this.mouseTool.polygon({
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
// strokeOpacity: 0.2,
fillColor: '#1791fc',
fillOpacity: 0.4,
// 线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
// strokeDasharray: [30,10],
})
},
// 矩形
drawRectangle() {
this.mouseTool.close(true)
this.mouseTool.rectangle({
strokeColor: 'red',
strokeOpacity: 0.5,
strokeWeight: 6,
fillColor: 'blue',
fillOpacity: 0.5,
// strokeStyle还支持 solid
strokeStyle: 'solid',
// strokeDasharray: [30,10],
})
},
