上文（https://www.jianshu.com/p/6f20b3a3e812 ）中介绍了天地图的引入，接下来讲述天地图的绘制点 线
1.打点
//单个marker
addMarker() {
//item 打点位经纬度 根据自己的实际情况修改
var item = {lon:121.0553374,lat:29.9768162}
var that = this;
//uniqueCode 可以给icon点击时添加自定义参数
let icon = new T.Icon({
iconUrl: require("../../assets/img/marker_device.png"),
iconSize: new T.Point(32, 32),
iconAnchor: new T.Point(10, 25),
uniqueCode: item
});
if (item.lon == "" || !item.lon || item.lat == "" || !item.lat) return;
//向地图上添加自定义标注
let marker = new T.Marker(new T.LngLat(item.lon, item.lat), {
icon: icon
});
//添加marker点击事件
marker.addEventListener("click", function(e) {
const item = e.target.options.icon.options.uniqueCode;
console.log("addEventListener click:",item)
});
this.map.addOverLay(marker);
return marker;
}
2.画边界线
addLine() {
var arrPoint = [[119.902480308, 28.99812399700005]];
var points = [];
arrPoint.forEach(pointItem => {
var line = new T.LngLat(pointItem[0], pointItem[1]);
points.push(line);
});
console.log("addLine points", points);
var line = new T.Polyline(points, {
color: "rgba(238, 139, 0, 1)",
weight: 1,
opacity: 1
});
//向地图上添加线
this.map.addOverLay(line);
},
关于地图打点，有时需要打几百 上千个点位，会出现地图加载卡顿的问题，这时我们就需要用点聚合的方式 进行加载
handleViewPorts(newV) {
//如果重复调用handleViewPorts 需要clearOverLays 清除之前的点位信息
if (this.map) {
this.map.clearOverLays();
}
var ports = [];
//测试数据 打印1000个点 项目中按实际处理
for（var i =0; i < 1000; i++）{
var marker = this.addMarker()
ports.push(marker);
}
// 加载点聚合是下面这段代码，map就是天地图对象
this.clustererObject = new T.MarkerClusterer(this.map, {
markers: ports
});
//聚合点位添加点击事件（天地图里的点击事件获取不到聚合点位里的聚合信息，我们需要自己计算，代码如下）
//禁用原有聚合点的点击事件
for (var i = 0; i < Object.keys(this.clustererObject).length; i++) {
if ( this.clustererObject[Object.keys(this.clustererObject)[i]] .clusterclick ) {
this.clustererObject[Object.keys(this.clustererObject)[i]].clusterclick.shift();
}
}
var that = this;
this.clustererObject.addEventListener("clusterclick", function(e) {
//聚合点的数据信息
var markerDataArr = [];
if (!e.target.selfData) {
//聚合点点击
e.target.options.markers.forEach(function(item) {
//标记点与当前聚合点 距离小于60时 表示在此聚合内
var cupx = e.layerPoint;
var lngLat = T.LngLat(
item.options.icon.options.uniqueCode.lon,
item.options.icon.options.uniqueCode.lat
);
var px = that.map.lngLatToLayerPoint(lngLat);
if (this.getPosLen(cupx, px) < 60) {
markerDataArr.push(item);
}
});
}
// 获取像素间距离
getPosLen = (sdot, edot) => { //获取2点距离
return parseInt(Math.sqrt(Math.pow(Math.abs(sdot.x - edot.x), 2) + Math.pow(Math.abs(sdot.y - edot.y), 2)));
}
网友评论