从零开始Vue项目中使用MapboxGL开发三维地图教程（六）加载点、线、面图层以及三维面图层（白模）

我会带着你远行 2023-10-12 16:58 13阅读 0赞

#### 目录 ####

*   *   *  1、加载点图层
         *  2、加载线和面图层
         *  3、加载三维面图层（白模）

#### 1、加载点图层 ####

> 开发地图应用时，加载POI等点状数据，显示文字或者图标信息，mapbox-gl对应使用的是符号图层（symbol），下面的代码时使用Mapbox GL JS中的默认Marker方法向地图添加两个标记。

// Create a default Marker and add it to the map.
              const marker1 = new this.$mapboxgl.Marker()
                .setLngLat([116.03238901390978, 38.913188059745586])
                .addTo(map);
    
              // Create a default Marker, colored black, rotated 45 degrees.
              const marker2 = new this.$mapboxgl.Marker({
        
                  color: 'black',
                  rotation: 45
                })
                .setLngLat([116.03238901390978, 38.913188059745586])
                .addTo(map);

> marker1中心坐标116.03238901390978, 38.913188059745586。它使用默认的标记颜色。  
> marker2使用选项定义新Marker对象的颜色和旋转参数。

#### 2、加载线和面图层 ####

使用GeoJSON数据源向地图添加一个多边形，

首先使用addSource添加GeoJSON数据，该数据包含一个多边形。然后使用addLayer创建一个新的图层，并设置多边形外观的样式。为了在多边形周围添加轮廓，它再次使用addLayer来创建一个引用相同GeoJSON源的新线层。

代码示例：

![在这里插入图片描述][3ed359282e5c4ee8afc03ce6f64e0706.png]

#### 3、加载三维面图层（白模） ####

实现功能：加载带高度信息的面数据，显示简单建筑（白模）效果

三维面图层在mapbox-gl对应的是填充挤压（fill-extrusion）图层

在mapbox-gl加载fill-extrusion图层过程：通过加载geojson矢量数据，数据源加载完成后，再进行图层的设置。  
以geojson数据为例：

//添加geojson数据源，数据中必须有高度的字符，并且是数字类型的
              map.addSource('buildingdata', {
        
                'type': 'geojson',
                'data': {
        
                  'type': 'Feature',
                  'geometry': {
        
                    'type': 'Polygon',
                    "properties": {
        
                      "height": 20000
                    },
                    'coordinates': [
                      [
                        [115.720119, 39.685438],
                        [116.155905, 39.724518],
                        [116.275488, 39.548482],
                        [115.548794, 39.372887],
                        [115.720119, 39.685438],
                      ]
                    ]
                  }
                }
              });
              //添加三维建筑图层，id对应以上
              map.addLayer({
        
                'id': 'buildingdata',
                'type': 'fill-extrusion',
                'source': 'buildingdata',
                'paint': {
        
                  // 设置填充颜色
                  'fill-extrusion-color': '#fff000',
                  //从属性中获得高度，这里用的是height字段
                  'fill-extrusion-height': ['get', 'height'],
                  // 透明度设置
                  'fill-extrusion-opacity': 0.8
                }
              });

效果：

![在这里插入图片描述][ea55373a96a74b8d964a758fea65f6d6.png]

[3ed359282e5c4ee8afc03ce6f64e0706.png]: https://img-blog.csdnimg.cn/3ed359282e5c4ee8afc03ce6f64e0706.png
[ea55373a96a74b8d964a758fea65f6d6.png]: https://img-blog.csdnimg.cn/ea55373a96a74b8d964a758fea65f6d6.png