海量点加载

芋圆社区 > 编程 > 天地图 > 海量点加载

644

2023-08-24

Hey、小怪兽

• 上一章节用内置搜索搜索出来的点位数据，需要的就是这个lonlat，里面是经纬度的字符串：
• 可以用split切割，生成一个地图的坐标再push进经纬度的数组里：

let lnglats = [];
points.map(point => {
  const lnglat = new T.LngLat(point.lonlat.split(" ")[0], point.lonlat.split(" ")[1]);
  lnglats.push(lnglat);
})

• 用canvas的方法判断当前浏览器是否支持绘制海量点和添加海量点：

if (document.createElement("canvas").getContext) {
  cloudCollection = new T.CloudMarkerCollection(lnglats, {
    color: "blue",
    SizeType: TDT_POINT_SIZE_SMALL,
  });
  map.addOverLay(cloudCollection);
}

• 形状颜色大小都可以由ShapeType，color，SizeType改变：
• 当下次搜索的时候需要清空上次搜索的海量点，在搜索前加上：
```
map.clearOverLays();
```
• 搜索一下北京大学：
• 完整代码：

// 搜索的回调函数
const localSearchResult = (result) => {
  console.log("搜索结果", result);

  // 获取搜索结果的类型
  const resultType = parseInt(result.getResultType());

  // 如果是点位搜索
  if (resultType === 1) {
    const points = result.getPois();
    console.log("搜索到的点位信息", points);

    map.clearOverLays();

    let lnglats = [];
    points.map((point) => {
      const lnglat = new T.LngLat(point.lonlat.split(" ")[0], point.lonlat.split(" ")[1]);
      lnglats.push(lnglat);
    });
    // 判断当前浏览器是否支持绘制海量点
    if (document.createElement("canvas").getContext) {
      cloudCollection = new T.CloudMarkerCollection(lnglats, {
        color: "blue",
        SizeType: TDT_POINT_SIZE_SMALL,
      });
      map.addOverLay(cloudCollection);
    }
  } else if (resultType === 3) {
    // 地方行政搜索
    const area = result.getArea();
    console.log("搜索到的区域信息", area);
  } else {
    console.log("不支持其他类型的搜索，搜索类型为", resultType);
  }
};

上一篇：地图搜索功能

下一篇：加载聚合Marker

海量点加载

回复