天地图标记点

<div id="map" style="width: 100%; height: 100%"></div>

 初始化地图

this.map = new T.Map("map");
this.map.centerAndZoom(new T.LngLat(116.3912757, 39.906217), 11);


//接口返回数据为resourceList
 if (this.maker) {
        this.maker.forEach((res) => {
          this.map.removeLayer(res);
        });
      }
      // 显示标记。
      if (resourceList?.devices) {
        this.maker = []; // 重置maker数组
        resourceList.devices.forEach((item) => {
          if (item.longitudeLatitude) {
            let marker2;
            marker2 = this.createMarker(item);
            const markerInfoWin = this.createInfoWindow(item);
            marker2.addEventListener("click", function () {
              marker2.openInfoWindow(markerInfoWin);
            });
            this.map.addOverLay(marker2);
            this.maker.push(marker2);
          }
       });
 }

 创建标记

createMarker(item, index) {
      return new T.Marker(
        new T.LngLat(
          item.longitudeLatitude.split(",")[0],
          item.longitudeLatitude.split(",")[1]
        ),
        {
          icon: new T.Icon({
            iconUrl: require("@/assets/resource/1.png"),
            iconSize: new T.Point(20, 20),
          }),
        }
     );
},

窗口信息

createInfoWindow(item) {
      return new T.InfoWindow(item.orgName + "" + item.deviceName, {
        autoPan: true,
        minWidth: 100,
      });
},

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要加载地图影像和标记代码,并优化加载速度,我们可以采取以下步骤: 1. 引入ceisum库:首先,我们需要将ceisum库引入到我们的项目中。可以通过在HTML文件中添加相应的脚本标签来实现这一步骤。 2. 加载地图影像:在ceisum中,我们可以使用图层来加载不同的地图数据。要加载地图影像,我们需要创建一个新的图层,并将其添加到ceisum的场景中。可以使用地图提供的接口来加载影像图层,如`createTDTImageLayer`。 3. 加载标记代码:为了加载标记代码,我们需要先定义一个cesium的实体对象,用于表示我们要添加标记。实体可以包含各种属性,如位置、形状、颜色等。可以使用`createEntity`方法来创建实体,并设置相应的属性。 4. 优化加载速度:为了提高加载速度,我们可以采取一些优化措施。例如,使用影像金字塔技术可以根据视图范围和屏幕分辨率动态加载合适的分辨率的影像。此外,使用瓦片化技术可以将大范围的数据拆分成小块进行加载,从而提高加载效率。 5. 异步加载:另外一种提高加载速度的方法是使用异步加载。可以使用异步加载的方式加载地图影像和标记代码,这样页面在加载时可以同时进行其他任务,从而提高加载速度。 总结:通过引入ceisum库,并按照上述步骤加载地图影像和标记代码,并采取相应的优化措施,我们可以实现较快的加载速度,提供更好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值