leaflet相关

目录

初始化地图   

加监听事件

加点

加线

加多边形面

 加圆面

清除点和线

加支持聚合的点和清除功能

定位一个点

定位一个区域

去除leaflet右下角的logo

---

初始化地图   

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