【Mars3d 基础- 矢量数据】标绘完成事件

通常我们需要自己绘制一个矢量数据,绘制完成之后在进行下一步的需求,


graphicLayer.startDraw({
  type: "rectangle",
  style: {
   fill: true,
   color: "rgba(255,255,0,0.2)",
   outline: true,
   outlineWidth: 2,
   outlineColor: "rgba(255,255,0,1)"
  }
})

在上面我们完成了一个"矩形"的绘制,那么绘制完成之后绑定事件主要有两种:

一、success的回调


graphicLayer.startDraw({
  type: "rectangle",
  style: {
   fill: true,
   color: "rgba(255,255,0,0.2)",
   outline: true,
   outlineWidth: 2,
   outlineColor: "rgba(255,255,0,1)"
  },
  success:(graphic)=>{
   console.log(graphic)
  }
})

二、全局绑定 drawCreated 事件

graphicLayer.on(mars3d.EventType.drawCreated, (e: any) => {
  console.log(e.graphic)
})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Mapbox GL Draw 是一款基于 Mapbox GL JS 的开源插件,用于在地图上进行制操作,支持点、线、面等多种几何要素的制和编辑,是一款非常适合用于态势的工具。 使用 Mapbox GL Draw 进行制态势,可以通过以下步骤实现: 1. 引入 Mapbox GL JS 和 Mapbox GL Draw 插件,可通过 npm 安装或手动下载引入。 2. 在页面中创建地图容器,并初始化地图: ```javascript var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', // 地图样式 center: [lng, lat], // 地图中心点经纬度 zoom: 13 // 地图缩放级别 }); ``` 3. 初始化 Mapbox GL Draw 插件,并将其添加到地图上: ```javascript var draw = new MapboxDraw({ displayControlsDefault: false, // 是否显示默认控件 controls: { // 自定义控件 point: true, line_string: true, polygon: true, trash: true } }); map.addControl(draw); ``` 4. 监听事件,根据不同的制类型获取制的坐信息: ```javascript map.on('draw.create', function(e) { var type = e.features[0].geometry.type; var coordinates = e.features[0].geometry.coordinates; // 根据制类型进行处理 }); ``` 5. 根据制类型,将制的要素添加到地图上: ```javascript map.addLayer({ 'id': 'drawn-feature', 'type': type, 'source': { 'type': 'geojson', 'data': { 'type': 'Feature', 'geometry': { 'type': type, 'coordinates': coordinates } } }, 'paint': { 'fill-color': '#f00', // 面颜色 'fill-opacity': 0.5, // 面透明度 'line-color': '#f00', // 线颜色 'line-width': 2 // 线宽度 } }); ``` 通过以上步骤,就可以使用 Mapbox GL Draw 进行制态势了。除了制外,Mapbox GL Draw 还支持编辑、删除等操作,可以根据实际需求进行调整。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值