从零开始Vue项目中使用MapboxGL开发三维地图教程（五）实现框选要素功能、可拖动点展示坐标以及地图上实时更新要素

Love The Way You Lie 2023-10-12 16:05 13阅读 0赞

#### 文章目录 ####

*   *   *  1、实现框选要素功能
         *   *   *  1.1、添加点数据的图层：
                 *  1.2、增加绘图插件（mapbox-draw）
                 *  1.3、实现框选并让选择的目标数据高亮
         *  2、实现地图上可拖动点
         *   *   *  2.1、实现功能：
                 *  2.2、实现思路：
                 *  2.3、代码示例：
         *  3、实时更新要素功能

#### 1、实现框选要素功能 ####

###### 1.1、添加点数据的图层： ######

数据源名称为earthquakes，点图层id为clusters

map.addSource('earthquakes', {
        
                type: 'geojson',
                data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
                cluster: true,
                clusterMaxZoom: 14, // Max zoom to cluster points on
                clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
              });
    
              map.addLayer({
        
                id: 'clusters',
                type: 'circle',
                source: 'earthquakes',
                filter: ['has', 'point_count'],
                paint: {
        
                  'circle-color': [
                    'step',
                    ['get', 'point_count'],
                    '#51bbd6',
                    100,
                    '#f1f075',
                    750,
                    '#f28cb1'
                  ],
                  'circle-radius': [
                    'step',
                    ['get', 'point_count'],
                    20,
                    100,
                    30,
                    750,
                    40
                  ]
                }
              });

###### 1.2、增加绘图插件（mapbox-draw） ######

// 绘图插件
          let draw = new mapboxdraw({
        
            displayControlsDefault: false,
            controls: {
        
              polygon: true,
              trash: true
            }
          });
          map.addControl(draw);
        map.on('draw.create', function (e) {
        
            var features = draw.getAll();
        })
     
        map.on('draw.delete', function (e) {
        
            map.removeLayer('selected')
        });

###### 1.3、实现框选并让选择的目标数据高亮 ######

基本思路是：通过turf来计算出在框选区域内的所有点（数据），将这些数据构成一个新的图层，置放于最上层，用不同的颜色来表示。

核心代码：

map.on('draw.create', createArea);

createArea方法：

运行效果如下:  
![在这里插入图片描述][3f238265cca7452290a7e42a9f765e15.gif]

#### 2、实现地图上可拖动点 ####

###### 2.1、实现功能： ######

可以将点拖动到地图上的新位置，并在地图上显示新的点坐标。

###### 2.2、实现思路： ######

首先定义一个空的点要素集合GeoJSON变量，用来存放拖动点坐标信息；然后使用MapTouchEvents来防止默认的地图拖动行为并获取更新的坐标。最后使用map.getSource中的setData对变量更新赋值，

###### 2.3、代码示例： ######

首先dom中添加如下标签：

效果展示：  
![在这里插入图片描述][8ae7b135cdd04912a4823e1d50fe65ac.gif]

#### 3、实时更新要素功能 ####

实现功能：通过更新地图上的现有要素的数据来添加新坐标来动态显示路径  
代码示例：

map.on('load', async () => {
 
 // We fetch the JSON here so that we can parse and use it separately
 // from GL JS's use in the added source.
 const response = await fetch(
 'https://docs.mapbox.com/mapbox-gl-js/assets/hike.geojson'
 );
 const data = await response.json();
 // save full coordinate list for later
 const coordinates = data.features[0].geometry.coordinates;
 
 // start by showing just the first coordinate
 data.features[0].geometry.coordinates = [coordinates[0]];
 
 // add it to the map
 map.addSource('trace', {
 type: 'geojson', data: data });
 map.addLayer({
 
 'id': 'trace',
 'type': 'line',
 'source': 'trace',
 'paint': {
 
 'line-color': 'yellow',
 'line-opacity': 0.75,
 'line-width': 5
 }
 });
 
 // setup the viewport
 map.jumpTo({
 'center': coordinates[0], 'zoom': 14 });
 map.setPitch(30);
 
 // on a regular basis, add more coordinates from the saved list and update the map
 let i = 0;
 const timer = setInterval(() => {
 
 if (i < coordinates.length) {
 
 data.features[0].geometry.coordinates.push(coordinates[i]);
 map.getSource('trace').setData(data);
 map.panTo(coordinates[i]);
 i++;
 } else {
 
 window.clearInterval(timer);
 }
 }, 10);
 });

效果展示：  
![在这里插入图片描述][5159e5f71ce741d4ba96abe5ef6e54d2.gif]

[3f238265cca7452290a7e42a9f765e15.gif]: https://img-blog.csdnimg.cn/3f238265cca7452290a7e42a9f765e15.gif
[8ae7b135cdd04912a4823e1d50fe65ac.gif]: https://img-blog.csdnimg.cn/8ae7b135cdd04912a4823e1d50fe65ac.gif
[5159e5f71ce741d4ba96abe5ef6e54d2.gif]: https://img-blog.csdnimg.cn/5159e5f71ce741d4ba96abe5ef6e54d2.gif