参考链接:https://blog.csdn.net/weixin_43180359/article/details/114636382
0.初始化地图
介绍下zooms的意思
zooms 表示地图显示的缩放级别范围。在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19] 。当 expandZoomRange 为 true 时， zooms的最大级别在PC上可以扩大到20级。（移动端还是高清19/非高清20 ）
代码如下：
var map = new AMap.Map('container', {
resizeEnable: true,
expandZoomRange:true,
zoom:20,
zooms:[3,20],
center: [116.397428, 39.90923]
});
alert(map.getZoom());
// 初始化地图
initMap() {
this.$nextTick(() => {
lazyAMapApiLoaderInstance.load().then(() => {
this.map = new AMap.Map("mapScreen", {
center: [106.25936, 29.29014],
zoom: 12,
zooms: [3,20],
expandZoomRange:true,
mapStyle: "amap://styles/darkblue",
});
// 创建 AMap.Icon 实例：未选中的地图标记
this.commonMarker = new AMap.Icon({
size: new AMap.Size(55, 55), // 图标尺寸
image: require("./img/mapnochecked.png"), // Icon的图像
imageSize: new AMap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
});
// 选中的地图标记
this.clickMarker = new AMap.Icon({
size: new AMap.Size(55, 55), // 图标尺寸
image: require("./img/mapChecked.png"), // Icon的图像
imageSize: new AMap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
});
// 第一次调出队伍建设
this.handleteamBuild();
});
});
},
1.接口组装返回的数据
image.png
2.点击监管对象触发方法
//监管对象
handleRegularObject() {
if (this.cluster) {
this.cluster.setMap(null);
}
this.regulatoryArray = [];
const loading = this.$loading({
lock: true,
text: "加载中...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
//海量点标记，点聚合开始
getObjectListApi({
orgId: "",
tradeCategory: "",
}).then((res) => {
loading.close();
// 第一个then开始
console.time();
this.regulatoryArray = res.data.map((item) => {
return {
list: item,
points: [item.longitude, item.latitude],
};
});
console.timeEnd();
console.time();
this.regulatoryArray.map((item) => {
let myIcon = new AMap.Icon({
size: new AMap.Size(84, 84),
image: require("@/views/bigScreen/img/mapnochecked.png"),
});
// 取位置
let marker = new AMap.Marker({
position: item.points, //位置
icon: myIcon,
offset: new AMap.Pixel(-20, -40),
zIndex: 111,
});
this.markers.push(marker);
marker.on("click", (e) => {
this.markerClick2(e, item.list);
});
});
console.timeEnd();
let sts = [
{
url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
size: new AMap.Size(38, 38),
offset: new AMap.Pixel(-16, -16),
textColor: "#fff",
},
];
this.map.plugin(["AMap.MarkerClusterer"], () => {
this.cluster = new AMap.MarkerClusterer(this.map, this.markers, {
styles: sts,
gridSize: 80, //聚合计算时网格的像素大小
minClusterSize: 20, //聚合的最小数量
maxZoom: 18,
});
});
// 第1个then结束
});
// .then((res) => {
// getObjectListApi({
// orgId: "5ce48f30940d430ea9d55a3f7ba4c829",
// tradeCategory: "",
// }).then((res) => {
// this.markers = [];
// // 第2个then开始
// this.cluster.setMap(null);
// let tempp2 = [];
// tempp2 = res.data.map((item) => {
// return {
// list: item,
// points: [item.longitude, item.latitude],
// };
// });
// this.regulatoryArray = this.regulatoryArray.concat(tempp2);
// console.log(this.regulatoryArray);
// this.regulatoryArray.map((item) => {
// let myIcon = new AMap.Icon({
// size: new AMap.Size(84, 84),
// image: require("@/views/bigScreen/img/mapnochecked.png"),
// });
// // 取位置
// let marker = new AMap.Marker({
// position: item.points, //位置
// icon: myIcon,
// offset: new AMap.Pixel(-20, -40),
// zIndex: 111,
// });
// this.markers.push(marker);
// marker.on("click", (e) => {
// this.markerClick2(e, item.list);
// });
// });
// let sts = [
// {
// url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
// size: new AMap.Size(38, 38),
// offset: new AMap.Pixel(-16, -16),
// textColor: "#fff",
// },
// ];
// this.map.plugin(["AMap.MarkerClusterer"], () => {
// this.cluster = new AMap.MarkerClusterer(this.map, this.markers, {
// styles: sts,
// gridSize: 80, //聚合计算时网格的像素大小
// minClusterSize: 20, //聚合的最小数量
// maxZoom: 18,
// });
// });
// // 第二个then结束
// });
// });
//海量点标记，点聚合结束
},
3.vue自定义窗体
这个是信息窗体组件
<information2 v-show="showInfoWindow" ref="infoWindow" :reguObjectItem="reguObjectItem" :reguObjectList="reguObjectList" :info-window="infoWindow"></information2>
// 监管对象-点击marker点改变图标，并且调用自定义窗体
markerClick2(e, item) {
console.log(item);
// 调用监管对象-表格数据start
if (this.status == "2") {
getRoundsLogByObjectApi({ objectId: item.objectId }).then((res) => {
if (res && res.data) {
this.reguObjectList = res.data;
}
});
findByIdApi2({ objectId: item.objectId }).then((res) => {
console.log(res.data);
if (res && res.data) {
this.reguObjectItem = res.data;
}
});
}
// 调用监管对象-表格数据end
this.map.setZoomAndCenter(10, e.target.getPosition());
for (let i = 0; i < this.markers.length; i++) {
this.markers[i].setIcon(this.commonMarker);
}
e.target.setIcon(this.clickMarker); //修改选中的标记图
this.setInfoWindows(e); //用vue组件的形式设置信息窗体
},
//用vue组件的形式设置信息窗体
setInfoWindows(e) {
this.showInfoWindow = true; //显示信息体窗口组件
this.infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: this.$refs["infoWindow"].$el,
offset: new AMap.Pixel(60, 235),
});
this.infoWindow.open(this.map, e.target.getPosition());
},
绘制折线图轨迹
// 绘制轨迹
drawTrail(){
let temptrack =[[120.930868,36.500691],[120.951639,36.499449],[120.953699,36.474745]];
this.polyline = new AMap.Polyline({
map: this.map,
path: temptrack,
showDir: true, //是否显示箭头false/true
strokeColor: "#28F", //线颜色
strokeWeight: 8, //线宽
// strokeStyle: "solid", //线样式,实线"solid"/虚线"dashed"
});
this.map.add(this.polyline);//将折线图添加到地图
},
清楚折线图
// 关闭移动轨迹图
closeDrawtrail(){
this.polyline && this.map.remove(this.polyline);//清除折线图
},
网友评论