mapbox-gl 点位编辑功能

最新推荐文章于 2025-03-17 00:00:00 发布

迦南giser

最新推荐文章于 2025-03-17 00:00:00 发布

阅读量1.8k

点赞数 3

分类专栏： WebGIS # Mapbox 文章标签： mapbox webgis gis

本文链接：https://blog.csdn.net/qq_37987033/article/details/131323944

版权

WebGIS 同时被 2 个专栏收录

18 篇文章

订阅专栏

Mapbox

10 篇文章

订阅专栏

文章介绍了如何在Mapbox中进行点位编辑，方法一是借助Marker添加自定义图标，绑定事件，创建和编辑POI；方法二是使用mapbox-gl-draw插件，但无法设置图标和文字。两种方法提供了GIS应用中常见的在线编辑功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

矢量在线编辑是gis常用的编辑功能，兴趣点（POI）与区域面（AOI）或者道路线不同，在地图上没有形状和面积，仅表示落位地点，本文介绍使用mapbox进行点位编辑的常用方式，底图使用高德公开的地图服务。

方式一：借助 Marker

mapbox 的 Marker 组件可以实现对任意点位的即时编辑，为图层绑定事件，并及时与后端交互生成类型为Point的GeoJson数据源，在交互完成后刷新数据即可。

添加自定义icon

根据UI设计生成新的雪碧图，作为地图上点位的图标

在这里插入图片描述

添加POI图层，绑定对应事件

mapInstance?.addLayer({
          id: 'feature-poi-layer',
          type: 'symbol',
          source: 'featureDataSource',
          paint: {
            "text-color": '#000000',

          },
          layout: {
            'text-field': ['get', 'name'],
            'text-font': [
              'Akaya'
            ],
            "text-offset": [0, 1],
            "text-anchor": "top",
            "text-size": 12,
            "icon-image": blueIcon,
            "icon-size": 0.5
          },
        });
        // 鼠标移入
        mapInstance.on('mouseenter', 'feature-poi-layer', (e) => {
          mapInstance.getCanvas().style.cursor = 'pointer ';
        });
        // 鼠标移出
        mapInstance.on('mouseout', 'feature-poi-layer', (e) => {
          mapInstance.getCanvas().style.cursor = '';
        });
        // 点击点位
        mapInstance.on('click', 'feature-poi-layer', (e) => {
          onFeatureSelect(e, mapInstance, 'feature-poi-layer')
        })

点位展示
在这里插入图片描述

点位选择
在这里插入图片描述

基于Marker交互

创建自定义Marker

  function getMarkerEl() {
    const el = document.createElement('div');
      el.className = 'marker';
      el.style.backgroundImage = `url(${curPositionImg})`;
      el.style.width = `18px`;
      el.style.height = `22px`;
      el.style.backgroundSize = '100%';

      return el
  }

	...
	 markerRef.current = new Marker({
        element:getMarkerEl(),
        anchor:'bottom'
      })
      .setLngLat([lngLat.lng, lngLat.lat])
      .addTo(map)

编辑 / 创建POI

// 编辑完成后重新刷新数据
map?.getSource(sourceId)?.setData(currentLayerGeojson);

在这里插入图片描述

方式二：采用 mapbox-gl-draw 插件

参考：mapbox-gl图形绘制并编辑已有图层，该方式的缺点是无法设置图标与文字显示在地图上。

在这里插入图片描述

总结

mapbox实现点位编辑功能

方式一：借助 Marker
方式二：采用 mapbox-gl-draw 插件