目录
初始化地图
initMap() {
var that = this;
var imgUrlLayer = L.tileLayer(this.$url.map2dUrl, {
attribution: ''
});
let centerPoint = [39.703659, 116.884375];
//创建 地图控件
this.$url.mapComm = L.map("cesiumContainer", {
layers: [imgUrlLayer],
center: centerPoint,
zoom: 6,
zoomControl: false,
trackResize: true,
drawControl: false,
maxZoom: 17
});
this.initWork();
},
加监听事件
initWork() {
var that = this;
that.loading = that.$loading({
background: 'rgba(0, 0, 0, 0.6)',
text: '地图信息初始化中......',
fullscreen: true,
});
setTimeout(() => {
that.loading.close();
//加聚合点
that.$eventBus.$on("addClusterMarker", (data) => {
if (data) {
that.addClusterMarker(data);
}
});
//画线
that.$eventBus.$on("addLine", (data) => {
if (data) {
that.addLine(data);
}
});
//加点
that.$eventBus.$on("addPoint", (data) => {
if (data) {
that.addLine(data);
}
});
})
},
加点
addEveryMarkers(markerDataArr,tractoryData) {
var that = this;
var obj = {};
var marker = null;
markerDataArr.map((item, index) => {
obj = {
iconUrl: null,
iconSize: [50,50],
iconAnchor: [25, 45]
};
switch (item.positionType) {
// 轨迹开始点
case "起点":
obj.iconUrl = that.tractoryStartIcon;
break;
// 轨迹结束点
case "终点":
obj.iconUrl = that.tractoryEndIcon;
break;
// 轨迹途径点
case "途径点":
obj.iconUrl = that.tractoryWayIcon;
break;
}
}
marker = new L.Marker([item.lat * 1, item.lon * 1], {
icon: new L.Icon(obj)
}).addTo(this.$url.mapComm);
this[tractoryData.type + 'MarkerGroup'].push(marker);
});
},
加线
/**
* @name addLine
* @description 增加轨迹/路径规划的方法
* @date 2021/12/8
* @param tractoryData(轨迹数据)
* @author yangjie
*/
addLine(tractoryData) {
var latlngs = [];
var tempArr = [];
//如果是路径规划
if (tractoryData.type == "pathPlan") {
//如果支持显示多个 不删除路径分析线
if(tractoryData.singleMoreFlag && tractoryData.singleMoreFlag == "more"){
}else{
this.removeEveryMarkers("pathPlanLineAndMarker");
}
if (tractoryData.locationArr && tractoryData.locationArr.length > 0) {
//将轨迹格式处理成[116,39,115,30]
tractoryData.locationArr.forEach(function (item,index) {
if(tempArr && tempArr.length == 2){
tempArr.reverse();
latlngs.push(tempArr);
tempArr = [];
tempArr.push(item);
}else{
tempArr.push(item);
if(tempArr && tempArr.length == 2){
tempArr.reverse();
latlngs.push(tempArr);
tempArr = [];
}
}
});
this.tractoryLineGroup[tractoryData.platNumber] = L.polyline(latlngs, {
color: '#1b8cd6',//线的颜色
weight: 6 //线的粗细
}).addTo(this.$url.mapComm);
}
if (tractoryData.fixedMarkers && tractoryData.fixedMarkers.length > 0) {
this.addEveryMarkers(tractoryData.fixedMarkers,tractoryData);
}
}
},
加多边形面
L.polygon([{lon:121,lat:40},{lon:116,lat:39}]).addTo(map);
加圆面
L.circle([39.13,117.2], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 100000
}).addTo(map);
清除点和线
if(this[type + "Group"] && Object.keys(this[type + "Group"]).length){
for(var key in this[type + "Group"]){
that.$url.mapComm.removeLayer(that[type + "Group"][key]);
}
}
if(this[type + 'MarkerGroup'] && this[type + 'MarkerGroup'].length){
this[type + 'MarkerGroup'].forEach(function (item) {
that.$url.mapComm.removeLayer(item);
})
}
加支持聚合的点和清除功能
/**
* @author yangjie
* @time 2022-07-16 15:00:13
* @description 聚合点
* @return
*/
addClusterMarker(data){
if(!this.leafletView){
this.leafletView = new PruneClusterForLeaflet();
}
this.leafletView.Cluster.Size = 87;
//如果该点位已存在 更新位置
if (this.carMarkerGroup[data.uid]) {
this.carMarkerGroup[data.uid].position = {
lat:data.point.lat * 1,
lng:data.point.lon * 1
};
this.leafletView.RedrawIcons();
}else{
var marker = new PruneCluster.Marker(data.point.lat * 1, data.point.lon * 1, {
dname: data.name,
icon: new L.Icon({
iconUrl: this.imgBlue,
iconSize: [50, 50], // size of the icon
iconAnchor: [12, 32], // point of the icon which will correspond to marker's location
})
});
this.carMarkerGroup[data.uid] = marker;
this.clusterMarkers.push(marker);
this.leafletView.RegisterMarker(marker);
this.$url.mapComm.addLayer(this.leafletView);
}
},
//清除
if(this.clusterMarkers && this.clusterMarkers.length){
this.leafletView.RemoveMarkers(this.clusterMarkers);//清除聚合图层
}
定位一个点
that.$url.mapComm.panTo([纬度, 经度], {
animate: true
});
定位一个区域
that.$url.mapComm.fitBounds(L.latLngBounds([
[纬度, 经度],
[纬度2, 经度2]
]));
去除leaflet右下角的logo
初始化地图时加以下配置
attributionControl:false