2.关于vue2使用mars3d 标点

关于vue2使用mars3d 标点

// 标点
ArcGisWfs() {
  const that = this;

  // 如果地图不存在,则退出函数
  if (!this.map) return;

  // 关闭图层的事件,大数据addGraphic时影响加载时间
  this.graphicLayer.enabledEvent = false;

  // 获取点数据
  const result = this.List;

  // 循环处理每个点
  for (let j = 0; j < result.length; ++j) {
    const index = j + 1;

    // 创建点的经纬度信息
    let position = new mars3d.LngLatPoint(
      result[j].Longitude,
      result[j].Latitude,
      1
    );

    // 创建点的图形对象
    const graphic = new mars3d.graphic.BillboardPrimitive({
      position,
      style: {
        image:你的图标, // 点的图标
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
          0.0,
          250000
        ) //地图放大缩小显示
      },
      attr: { index } // 为点添加属性
    });
  
    // 将点添加到图层上
    this.graphicLayer.addGraphic(graphic);

    // 为每个点绑定点击事件
    (function(resultItem) {
      graphic.on(mars3d.EventType.click, function(event) {
        that.getOpenDialog(resultItem); // 点击时执行的操作
      });
    })(result[j]);
  }

  // 恢复图层的事件
  this.graphicLayer.enabledEvent = true;

  // 返回点的数量
  return result.length;
},

注意 pointEntity和newGraphic 需要这样写不能写在data里面
var pointEntity;
var newGraphic;

  • 14
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Mars3D编写一个电子围栏,你可以按照以下步骤进行操作: 1. 创建一个Vue项目并安装Mars3D依赖: ``` vue create mars3d-demo cd mars3d-demo npm install mars3d ``` 2. 在Vue组件中导入Mars3D的相关模块: ```javascript import * as Mars3D from 'mars3d' ``` 3. 在Vue组件的`mounted`生命周期钩子函数中初始化地图: ```javascript mounted() { const options = { container: 'mapContainer', // 添加其他地图配置参数 } this.map = new Mars3D.Map(options) } ``` 4. 创建一个电子围栏图层并添加到地图中: ```javascript const fenceLayer = new Mars3D.Layer.FenceLayer('fenceLayer', { fences: [], styleOptions: { // 设置围栏的样式 }, }) this.map.addLayer(fenceLayer) ``` 5. 监听用户的交互事件,例如鼠标点击或拖动事件,以便用户可以在地图上绘制或编辑电子围栏: ```javascript this.map.on('click', (event) => { const position = event.position // 根据鼠标点击位置创建一个点,可用于绘制电子围栏的顶点 }) ``` 6. 根据用户的操作,更新电子围栏的属性,并实时在地图上展示: ```javascript // 在鼠标点击事件中获取到围栏的顶点,可以使用Mars3D的绘制工具进行绘制 // 更新围栏的属性,例如围栏的形状、位置等 // 调用fenceLayer.updateFences()方法更新围栏在地图上的展示 ``` 这是一个简单的示例,具体实现还需要根据你的项目需求进行调整。你可以参考Mars3D的文档和示例代码来帮助你完成电子围栏的编写。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值