Mapbox-图层

GeoJSON

一种基于JSON的地理空间数据格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据

GeoJSON单个要素:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [114, 30]
    }
}

MapBox GL JS source数据:

{
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [114.3, 30.5]
        },
        properties: {
          title: 'My Point'
        }
      }
    ]
  }
}

要素类型:

1. 点

{
  "type": "Point",
  "coordinates": [114.3, 30.5]
}

2. 多点

{
  "type": "MultiPoint",
  "coordinates": [
    [114.3, 30.5],
    [116, 30.5]
  ]
}

3. 线

{
  "type": "LineString",
  "coordinates": [
    [114.3, 30.5],
    [116, 30.5]
  ]
}

4. 多线

{
  "type": "MultiLineString",
  "coordinates": [
    [
      [114.3, 30.5],
      [116, 30.5]
    ],
    [
      [114.3, 31.5],
      [116, 31.5]
    ]
  ]
}

5. 多边形

{
  "type": "Polygon",
  "coordinates": [
    [
      [114.3, 30.5],
      [116, 30.5],
      [116, 31.5],
      [114.3, 31.5],
      [114.3, 30.5]
    ]
  ]
}

6. 多多边形

{
  "type": "MultiPolygon",
  "coordinates": [
    [
      [
        [114.3, 30.5],
        [116, 30.5],
        [116, 31.5],
        [114.3, 31.5],
        [114.3, 30.5]
      ]
    ],
    [
      [
        [114.3, 32.5],
        [116, 32.5],
        [116, 33.5],
        [114.3, 33.5],
        [114.3, 32.5]
      ]
    ]
  ]
}

7. 几何集合

{
  "type": "GeometryCollection",
  "geometries": [
    {
      "type": "Point",
      "coordinates": [114.3, 30.5]
    },
    {
      "type": "LineString",
      "coordinates": [
        [114.3, 30.5],
        [116, 30.5]
      ]
    }
  ]
}

加载图层

加载关系: map=>source=>layer=>geometry

图层类型:

1. Circle（圆形）：用于在地图上绘制圆形标记，可以设置圆形的半径、颜色、透明度等属性。

2. Line（线）：用于在地图上绘制线条，可以设置线条的颜色、宽度、透明度等属性。

3. Fill（填充）：用于在地图上绘制填充区域，可以设置填充的颜色、透明度等属性。

4. Symbol（符号）：用于在地图上添加文本或图标标记，可以设置符号的字体、颜色、大小等属性。

5. Raster（栅格）：用于在地图上显示栅格图像，可以设置图像的透明度、亮度等属性。

6. Hillshade（山体阴影）：用于在地图上显示山体阴影效果，可以设置阴影的颜色、透明度等属性。

7. 通过source加载layer:

      // 定义数据
      const data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [114.3, 30.5],
            },
          },
        ],
      }
      // 加载数据
      map.on('load', () => {
        // 创建数据源
        map.addSource('wuhan', {
          type: 'geojson',
          data,
        })
        // 创建图层
        map.addLayer({
          id: 'wuhan-circle',
          type: 'circle',
          source: 'wuhan',
          paint: {
            'circle-radius': 15,
            'circle-color': '#ff2d51',
            'circle-opacity': 0.5,
          },
        })
      })

2. 直接加载layer

      map.on('load', () => {
        // 创建图层
        map.addLayer({
          id: 'hubei-fill',
          type: 'circle',
          source: {
            type: 'geojson',
            data,
          },
          paint: {
            'circle-radius': 15,
            'circle-color': '#ff2d51',
          },
        })
      })

图形绘制

基于坐标绘制

1. 绘制点

      map.on('load', () => {
        map.addSource('point', {
          type: 'geojson',
          data: {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [114.3, 30.5],
            },
          },
        })
        map.addLayer({
          id: 'Point',
          type: 'circle',
          source: 'point',
          paint: {
            'circle-opacity': 0.8,
            'circle-radius': 15,
            'circle-color': '#ff2d51',
            //设置边线
            'circle-stroke-opacity': 0.5,
            'circle-stroke-width': 4,
            'circle-stroke-color': '#ffcc33',
          },
        })
      })
 
      map.on('click', () => {
        // 设置点的属性
        map.setPaintProperty('Point', 'circle-color', '#faafee')
      })

2. 绘制线

      map.on('load', () => {
        addLine()
      })
      function addLine() {
        var geometryLine = {
          type: 'Feature',
          geometry: {
            type: 'LineString',
            coordinates: [
              [114.3, 30.5],
              [116, 30.5],
            ],
          },
        }
        map.addLayer({
          id: 'Line',
          type: 'line',
          source: {
            type: 'geojson',
            data: geometryLine,
          },
          //设置线型
          layout: {
            //线条末端样式
            'line-cap': 'round',
            //线条相交处样式
            'line-join': 'round',
          },
          //设置绘制参数
          paint: {
            'line-color': 'red',
            'line-width': 4,
            'line-opacity': 0.6,
          },
        })
      }

3. 绘制圆

      map.on('load', () => {
        addCircle()
      })
      function addCircle() {
        var geometryCircle = {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [114.3, 30.5],
          },
        }
        map.addLayer({
          id: 'Circle',
          type: 'circle',
          source: {
            type: 'geojson',
            data: geometryCircle,
          },
          //设置绘制参数
          paint: {
            'circle-radius': 30,
            'circle-color': 'white',
            //设置边线宽度
            'circle-stroke-width': 2,
            'circle-stroke-color': '#ffcc33',
          },
        })
      }

4. 绘制矩形

      map.on('load', () => {
        addRectangle()
      })
      function addRectangle() {
        var geometryRectangle = {
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              geometry: {
                type: 'Polygon',
                coordinates: [
                  [
                    [114.3, 30.5],
                    [114.5, 30.5],
                    [114.5, 30.6],
                    [114.3, 30.6],
                  ],
                ],
              },
            },
          ],
        }
        map.addLayer({
          id: 'Rectangle',
          //指定类型为fill（填充区域）
          type: 'fill',
          source: {
            type: 'geojson',
            data: geometryRectangle,
          },
          paint: {
            'fill-color': '#ffcc33',
            'fill-opacity': 0.9,
          },
        })
      }

交互式绘制

<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.css"
    type="text/css">

      const draw = new MapboxDraw({
        //不允许使用键盘交互绘制
        keybindings: false,
        //设置为ture，可按住shift+拉框来拾取图形
        boxSelect: true,
        //点击要素时的响应半径（像素单位）
        clickBuffer: 5,
        //默认控件显示方式。如果设置为true，则会添加所有的绘图控件
        displayControlsDefault: false,
        //添加指定的绘制控件
        controls: {
          //绘制线控件
          line_string: true,
          //绘制多边形控件
          polygon: true,
          //绘制点控件
          point: true,
          //删除图形控件
          trash: true,
        },
      })
      //将绘制控件添加到左上角
      map.addControl(draw, 'top-left')
      map.on('draw.create', handleDraw)
      function handleDraw(e) {
        var position = e.features[0].geometry.coordinates
        console.log(position)
      }

标注

对地图上某个点的说明, 包括

• 图片标注
• 文本标注

Markers and controls API: Mapbox GL JS

默认标注

      map.on('load', () => {
        // 1. 创建标注对象
        const marker = new mapboxgl.Marker()
        // 2. 设置属性
        marker.setLngLat([114.3, 30.5]) // 设置经纬度
        // 3. 添加到map地图
        marker.addTo(map)
      })

可拖动标注

      var marker = new mapboxgl.Marker({
        draggable: true,
      }).setLngLat([114.3, 30.5])
      
      map.on('load', () => {
        marker.addTo(map)
      })
      marker.on('dragend', onDragEnd)
      function onDragEnd() {
        var lngLat = marker.getLngLat()
        console.log(lngLat)
      }

marker的属性	说明
draggable(boolean)	true/false 是否可以拖动
color	设置颜色
rotation	旋转

自定义标注

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
      #marker {
        background-image: url('https://img.gejiba.com/images/db6e7706e2c3dcae834e44b0e888c767.jpg');
        background-size: cover;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
      }
    </style>
 
  <body>
    <!-- 2. 创建地图容器 -->
    <div id="map"></div>
    <!-- 3. 创建地图对象 -->
    <script>
      const map = new mapboxgl.Map({
        container: 'map', // 指定地图容器的id
        style: 'mapbox://styles/mapbox/streets-v12', // 地图样式/风格
        center: [114.3, 30.5], // 中心坐标点
        zoom: 12, // 缩放比例
        projection: 'equalEarth', // 投影方式
      })
 
      // <div id="marker"></div>
      const element = document.createElement('div')
      element.id = 'marker'
 
      const marker = new mapboxgl.Marker({
        element: element,
      }).setLngLat([114.3, 30.5])
 
      map.on('load', () => {
        marker.addTo(map)
      })
    </script>
  </body>
</html>