随笔（一）——mapbox框选

---

前言

商业GIS软件及开发环境已经很成熟，如：ArcGIS、Supermap等，提供了丰富且成熟的api和demo。但同样的功能，在开源环境下实现，还是有一定的困难。近期由于项目需求，要在系统中开发vue+mapbox框选要素的功能，查阅了许多资料，结果最后有了重大发现。就是mapbox的空间范围分析只支持外接矩形范围，想要真正实现任意多边形范围的的空间分析，还需要自行研究开发。

---

一、mapbox-gl-draw插件

mapbox的框选分析要依赖插件mapbox-gl-draw来实现。在vue项目中使用该插件需要进行安装和引用。具体如下：

1、安装

yarn add @mapbox/mapbox-gl-draw

2、引用

import MapboxDraw from "@mapbox/mapbox-gl-draw"
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'

当然，你也可以把mapbox-gl-draw的api发布出来，进行引用

<script src="http://xxx.xxx.xxx.xxx:80xx/mapbox_tdt/mapbox_tdt/erqi/mapboxgl-cgcs2000-1.13.1/mapbox-gl.js"></script>
<script src="http://xxx.xxx.xxx.xxx:80xx/mapbox_tdt/mapbox_tdt/erqi/mapbox-gl-plugin/mapbox-gl-draw.js"></script>
<script src="http://xxx.xxx.xxx.xxx:80xx/mapbox_tdt/mapbox_tdt/erqi/mapbox-gl-plugin/turf.min.js"></script>

二、框选实现

1.代码

总体思路是，绘制多边形完毕后，调用turf，得到外接矩形范围，然后利用queryRenderedFeatures函数，实现外接矩形范围内的要素获取，代码如下（示例）：

//框选分析
    boxanalyis(){
      this.ifboxanaly = !this.ifboxanaly;
      if(this.ifboxanaly){
        this.mapboxDraw = new MapboxDraw({
          displayControlsDefault: false,
          controls: {
            point: true,
            line_string: true,
            polygon: true,
            trash: true,
          },
          //defaultMode: 'simple_select'
        });
        this.map.addControl(this.mapboxDraw, 'top-right');
        this.map.on('draw.create', this.drawCallback);
      }else{
        this.map.removeControl(this.mapboxDraw);
      }
    },
    //绘图回调函数
    drawCallback: function (e) {
      var style = this.map.getStyle();
      console.log('Map style:', style);

      let polygonBoundingBox = turf.bbox(e.features[0].geometry)
      let southWest = [polygonBoundingBox[0], polygonBoundingBox[1]];
      let northEast = [polygonBoundingBox[2], polygonBoundingBox[3]];
      let northEastPointPixel = this.map.project(northEast);
      let southWestPointPixel = this.map.project(southWest);

      console.log('draw.create', new mapboxgl.Point(northEastPointPixel),new mapboxgl.Point(southWestPointPixel))

      this.features = this.map.queryRenderedFeatures( [southWestPointPixel, northEastPointPixel],{
        // 可选，只查询指定的层
        layers: ["323"]
      });

      this.showboxanalyis = true;

      var polygon = turf.polygon(e.features[0].geometry);
      var sourceFeatures = this.map.querySourceFeatures('323', {
          sourceLayer: '323',
          filter: ['intersects', polygon]
      });

    },

2.注意事项

加载mapbox-gl-draw插件一定要在地图和要分析的图层初始化完成之后，否则，容易造成勾画的多边形区域被底图遮盖的情况。我的项目中是先把需要的底图和专题图加载完，然后通过按钮触发mapbox-gl-draw插件的加载和激活：

<a
        class="btn btn-default el-button"
        style="padding: 6px; margin-right: 5px"
        @click="boxanalyis"
        title="框选分析"
      >

---

总结

基于mapbox的开发还需要再结合实际项目进行更深一步的研究，尤其是在mapbox中国网站停摆后，可参考的权威资料就更少了。当然，英文好的吴彦祖和刘亦菲们可研究官网的api和demo，也期待能和同行们进行技术交流。