mapbox进阶技巧

已于 2024-11-15 09:38:34 修改
阅读量679 收藏
点赞数 14
CC 4.0 BY-SA版权
分类专栏： mapbox 文章标签： 前端 mapbox webgis
于 2024-11-15 09:37:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45751819/article/details/143785140

1、filter过滤，使用过滤，可以根据不同条件展示我们想要展示的数据

代码示例：核心代码，根据点的size是否满足条件进行展示

filter: ['<=', 'size', 30]
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = '你的token'
      const gaode = {
        version: 8,
        sources: {
          'raster-tiles': {
            type: 'raster',
            tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],
            tileSize: 256
          }
        },
        layers: [
          {
            id: 'simple-tiles',
            type: 'raster',
            source: 'raster-tiles',
            minzoom: 0,
            maxzoom: 22
          }
        ]
      }
      const map = new mapboxgl.Map({
        container: 'map',
        style: gaode,
        center: [114.3, 30.5],
        zoom: 10
      })
      let data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              size: 20,
              name: '武汉'
            },
            geometry: {
              type: 'Point',
              coordinates: [114.30122, 30.598213]
            }
          },
          {
            type: 'Feature',
            properties: {
              size: 30,
              name: '苏州'
            },
            geometry: {
              type: 'Point',
              coordinates: [114.526261, 30.544391]
            }
          },
          {
            type: 'Feature',
            properties: {
              size: 40
            },
            geometry: {
              type: 'Point',
              coordinates: [114.335601, 30.436657]
            }
          }
        ]
      }
      async function renderLayer() {
        await map.once('style.load')
        map.addSource('source', {
          type: 'geojson',
          data: data
        })
        map.addLayer({
          id: 'layer',
          type: 'circle',
          source: 'source',
          paint: {
            'circle-radius': ['get', 'size'],
            'circle-color': '#ff0000'
          },
          filter: ['<=', 'size', 30]
        })
      }
      renderLayer()
    </script>
  </body>
</html>

has的使用，有，加！表示取反

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = '你的token'
      const gaode = {
        version: 8,
        sources: {
          'raster-tiles': {
            type: 'raster',
            tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],
            tileSize: 256
          }
        },
        layers: [
          {
            id: 'simple-tiles',
            type: 'raster',
            source: 'raster-tiles',
            minzoom: 0,
            maxzoom: 22
          }
        ]
      }
      const map = new mapboxgl.Map({
        container: 'map',
        style: gaode,
        center: [114.3, 30.5],
        zoom: 10
      })
      let data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              size: 20,
              name: '武汉'
            },
            geometry: {
              type: 'Point',
              coordinates: [114.30122, 30.598213]
            }
          },
          {
            type: 'Feature',
            properties: {
              size: 30,
              name: '苏州'
            },
            geometry: {
              type: 'Point',
              coordinates: [114.526261, 30.544391]
            }
          },
          {
            type: 'Feature',
            properties: {
              size: 40
            },
            geometry: {
              type: 'Point',
              coordinates: [114.335601, 30.436657]
            }
          }
        ]
      }
      async function renderLayer() {
        await map.once('style.load')
        map.addSource('source', {
          type: 'geojson',
          data: data
        })
        map.addLayer({
          id: 'layer',
          type: 'circle',
          source: 'source',
          paint: {
            'circle-radius': ['get', 'size'],
            'circle-color': '#ff0000'
          },
          // filter: ['has', 'name']
          filter: ['!', ['has', 'name']]
        })
      }
      renderLayer()
    </script>
  </body>
</html>

2、$type的使用，当点线面数据在一起的时候，可以根据不同的类型加载不同的数据

核心代码：

// 选择type为LineString的要素
          filter: ['==', '$type', 'LineString']
 // 选择type为Polygon的要素
          filter: ['==', '$type', 'Polygon']
// 选择type为Point的要素
          // filter: ['==', '$type', 'Point']
          filter: ['in', '$type', 'Point']

代码示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = '你的token'
      const gaode = {
        version: 8,
        sources: {
          'raster-tiles': {
            type: 'raster',
            tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],
            tileSize: 256
          }
        },
        layers: [
          {
            id: 'simple-tiles',
            type: 'raster',
            source: 'raster-tiles',
            minzoom: 0,
            maxzoom: 22
          }
        ]
      }
      const map = new mapboxgl.Map({
        container: 'map',
        style: gaode,
        center: [114.3, 30.5],
        zoom: 10
      })
      let data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [114.3289, 30.527034]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [114.328232, 30.523147]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'LineString',
              coordinates: [
                [114.317704, 30.519836],
                [114.335584, 30.517821],
                [114.33525, 30.514366]
              ]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Polygon',
              coordinates: [
                [
                  [114.302497, 30.513502],
                  [114.302497, 30.521564],
                  [114.311186, 30.521564],
                  [114.311186, 30.513502],
                  [114.302497, 30.513502]
                ]
              ]
            }
          }
        ]
      }
      async function renderLayer() {
        await map.once('style.load')
        map.addSource('source', {
          type: 'geojson',
          data: data
        })
        map.addLayer({
          id: 'layer',
          type: 'circle',
          source: 'source',
          paint: {
            'circle-radius': ['get', 'size'],
            'circle-color': '#ff0000'
          },
          // 选择type为Point的要素
          // filter: ['==', '$type', 'Point']
          filter: ['in', '$type', 'Point']
        })
        map.addLayer({
          id: 'layer2',
          type: 'fill',
          source: 'source',
          paint: {
            'fill-color': '#00ff00'
          },
          // 选择type为Polygon的要素
          filter: ['==', '$type', 'Polygon']
        })
        map.addLayer({
          id: 'layer3',
          type: 'line',
          source: 'source',
          paint: {
            'line-color': '#0000ff'
          },
          // 选择type为LineString的要素
          filter: ['==', '$type', 'LineString']
        })
      }
      renderLayer()
    </script>
  </body>
</html>

3、动态属性stops的使用

核心代码：

 paint: {
            'circle-radius': 20,
            'circle-color': {
              property: 'size',
              stops: [
                /* <5  green */
                [5, 'green'],
                /* 5~10  green-yellow之间渐变 */
                [10, 'yellow'],
                /* 10~20  yellow-red渐变 */
                [20, 'red']
                /* >20  就是red */
              ]
            }
          }

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = '你的token'
      const gaode = {
        version: 8,
        sources: {
          'raster-tiles': {
            type: 'raster',
            tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],
            tileSize: 256
          }
        },
        layers: [
          {
            id: 'simple-tiles',
            type: 'raster',
            source: 'raster-tiles',
            minzoom: 0,
            maxzoom: 22
          }
        ]
      }
      const map = new mapboxgl.Map({
        container: 'map',
        style: gaode,
        center: [114.3, 30.5],
        zoom: 10
      })
      var data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              size: 20
            },
            geometry: { type: 'Point', coordinates: [114.307232, 30.602333] }
          },
          {
            type: 'Feature',
            properties: {
              size: 8
            },
            geometry: { type: 'Point', coordinates: [113.421538, 30.716048] }
          },
          {
            type: 'Feature',
            properties: {
              size: 1
            },
            geometry: { type: 'Point', coordinates: [115.734918, 30.477093] }
          }
        ]
      }
      // 根据size属性设置不同的颜色
      async function renderLayer() {
        await map.once('style.load')
        map.addSource('source', {
          type: 'geojson',
          data: data
        })
        map.addLayer({
          id: 'layer',
          type: 'circle',
          source: 'source',
          paint: {
            'circle-radius': 20,
            'circle-color': {
              property: 'size',
              stops: [
                /* <5  green */
                [5, 'green'],
                /* 5~10  green-yellow之间渐变 */
                [10, 'yellow'],
                /* 10~20  yellow-red渐变 */
                [20, 'red']
                /* >20  就是red */
              ]
            }
          }
        })
      }
      renderLayer()
    </script>
  </body>
</html>

动态属性step的使用，作用与stops一致

核心代码：

        paint: {
            'circle-radius': 20,
            'circle-color': [
            'step', 
            ['get', 'size'], 
            '#ff0000', 
            1, 
            '#00ff00',
            8, 
            '#0000ff',
            20, 
            '#ff00ff']
         }

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = '你的token'
      const gaode = {
        version: 8,
        sources: {
          'raster-tiles': {
            type: 'raster',
            tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],
            tileSize: 256
          }
        },
        layers: [
          {
            id: 'simple-tiles',
            type: 'raster',
            source: 'raster-tiles',
            minzoom: 0,
            maxzoom: 22
          }
        ]
      }
      const map = new mapboxgl.Map({
        container: 'map',
        style: gaode,
        center: [114.3, 30.5],
        zoom: 10
      })
      var data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              size: 20
            },
            geometry: { type: 'Point', coordinates: [114.307232, 30.602333] }
          },
          {
            type: 'Feature',
            properties: {
              size: 7
            },
            geometry: { type: 'Point', coordinates: [113.421538, 30.716048] }
          },
          {
            type: 'Feature',
            properties: {
              size: 10
            },
            geometry: { type: 'Point', coordinates: [115.734918, 30.477093] }
          }
        ]
      }
      // 根据size属性设置不同的颜色
      async function renderLayer() {
        await map.once('style.load')
        map.addSource('source', {
          type: 'geojson',
          data: data
        })
        map.addLayer({
          id: 'layer',
          type: 'circle',
          source: 'source',
          paint: {
            'circle-radius': 20,
            'circle-color': ['step', ['get', 'size'], '#ff0000', 1, '#00ff00', 8, '#0000ff', 20, '#ff00ff']
          }
        })
      }
      renderLayer()
    </script>
  </body>
</html>

动态属性linear的使用，作用与上面两个类似

核心代码：

 'circle-color': ['interpolate', ['linear'], ['get', 'size'], 7, 'blue', 10, 'red', 20, 'green']

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = '你的token'
      const gaode = {
        version: 8,
        sources: {
          'raster-tiles': {
            type: 'raster',
            tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],
            tileSize: 256
          }
        },
        layers: [
          {
            id: 'simple-tiles',
            type: 'raster',
            source: 'raster-tiles',
            minzoom: 0,
            maxzoom: 22
          }
        ]
      }
      const map = new mapboxgl.Map({
        container: 'map',
        style: gaode,
        center: [114.3, 30.5],
        zoom: 10
      })
      var data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              size: 20
            },
            geometry: { type: 'Point', coordinates: [114.307232, 30.602333] }
          },
          {
            type: 'Feature',
            properties: {
              size: 7
            },
            geometry: { type: 'Point', coordinates: [113.421538, 30.716048] }
          },
          {
            type: 'Feature',
            properties: {
              size: 10
            },
            geometry: { type: 'Point', coordinates: [115.734918, 30.477093] }
          }
        ]
      }
      // 根据size属性设置不同的颜色
      async function renderLayer() {
        await map.once('style.load')
        map.addSource('source', {
          type: 'geojson',
          data: data
        })
        map.addLayer({
          id: 'layer',
          type: 'circle',
          source: 'source',
          paint: {
            'circle-radius': 20,
            'circle-color': ['interpolate', ['linear'], ['get', 'size'], 7, 'blue', 10, 'red', 20, 'green']
          }
        })
      }
      renderLayer()
    </script>
  </body>
</html>

或者根据地图zoom的变化设置样式

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = '你的token'
      const gaode = {
        version: 8,
        sources: {
          'raster-tiles': {
            type: 'raster',
            tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],
            tileSize: 256
          }
        },
        layers: [
          {
            id: 'simple-tiles',
            type: 'raster',
            source: 'raster-tiles',
            minzoom: 0,
            maxzoom: 22
          }
        ]
      }
      const map = new mapboxgl.Map({
        container: 'map',
        style: gaode,
        center: [114.3, 30.5],
        zoom: 10
      })
      var data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              size: 20
            },
            geometry: { type: 'Point', coordinates: [114.307232, 30.602333] }
          },
          {
            type: 'Feature',
            properties: {
              size: 7
            },
            geometry: { type: 'Point', coordinates: [113.421538, 30.716048] }
          },
          {
            type: 'Feature',
            properties: {
              size: 10
            },
            geometry: { type: 'Point', coordinates: [115.734918, 30.477093] }
          }
        ]
      }
      // 根据size属性设置不同的颜色
      async function renderLayer() {
        await map.once('style.load')
        map.addSource('source', {
          type: 'geojson',
          data: data
        })
        map.addLayer({
          id: 'layer',
          source: 'source',
          type: 'circle',
          paint: {
            'circle-radius': 20,
            'circle-color': ['interpolate', ['linear'], ['zoom'], 4, 'green', 8, 'yellow']
          }
        })
      }
      renderLayer()
    </script>
  </body>
</html>

4、点聚合

核心代码：

 map.addSource('source', {
          type: 'geojson',
          data: data,
          // 开启点聚合
          cluster: true
        })
 paint: {
            'circle-radius': {
              property: 'point_count',
              stops: [
                [5, 10],
                [10, 20],
                [15, 30],
                [20, 40]
              ]
            },
            'circle-color': {
              property: 'point_count',
              stops: [
                [5, '#652e80'],
                [10, 'green'],
                [15, 'yellow'],
                [20, 'red']
              ]
            }
          },
          filter: ['has', 'point_count']

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = '你的token'
      const gaode = {
        version: 8,
        sources: {
          'raster-tiles': {
            type: 'raster',
            tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],
            tileSize: 256
          }
        },
        layers: [
          {
            id: 'simple-tiles',
            type: 'raster',
            source: 'raster-tiles',
            minzoom: 0,
            maxzoom: 22
          }
        ]
      }
      const map = new mapboxgl.Map({
        container: 'map',
        style: gaode,
        center: [114.3, 30.5],
        zoom: 10
      })
      let data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [114.281363, 30.607571]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [114.128573, 30.552409]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [114.371722, 30.463235]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [114.130216, 30.324358]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [114.194289, 30.466067]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [114.038213, 30.467483]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.062893, 30.210399]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [114.96016, 30.12398]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.035127, 30.114373]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.135084, 30.075937]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.585099, 29.705042]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.496249, 29.594042]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.632301, 29.589214]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.743364, 29.733978]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.626748, 29.81351]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.490696, 29.741211]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.506245, 29.690499]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.674118, 29.736458]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.56646, 29.780812]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.701488, 29.809315]
            }
          },
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [115.901488, 29.809315]
            }
          }
        ]
      }

      // 根据size属性设置不同的颜色
      async function renderLayer() {
        await map.once('style.load')
        map.addSource('source', {
          type: 'geojson',
          data: data,
          // 开启点聚合
          cluster: true
        })
        map.addLayer({
          id: 'layer',
          source: 'source',
          type: 'circle',
          paint: {
            'circle-radius': {
              property: 'point_count',
              stops: [
                [5, 10],
                [10, 20],
                [15, 30],
                [20, 40]
              ]
            },
            'circle-color': {
              property: 'point_count',
              stops: [
                [5, '#652e80'],
                [10, 'green'],
                [15, 'yellow'],
                [20, 'red']
              ]
            }
          },
          filter: ['has', 'point_count']
        })
        map.addLayer({
          id: 'un_cluster_layer',
          type: 'circle',
          source: 'source',
          paint: {
            'circle-radius': 4,
            'circle-color': '#4164fb',
            'circle-stroke-width': 1,
            'circle-stroke-color': '#fff'
          },
          filter: ['!', ['has', 'point_count']]
        })
      }
      renderLayer()
    </script>
  </body>
</html>

5、热力图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <!-- 导入依赖 -->
    <!-- openlayer  mapbox cesium js+css -->

    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      //token
      mapboxgl.accessToken = 你的token'
      const gaode = {
        version: 8,
        sources: {
          'raster-tiles': {
            type: 'raster',
            tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],
            tileSize: 256
          }
        },
        layers: [
          {
            id: 'simple-tiles',
            type: 'raster',
            source: 'raster-tiles',
            minzoom: 0,
            maxzoom: 22
          }
        ]
      }
      const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: gaode, // style URL
        center: [114.3, 30.5], // starting position [lng, lat]
        zoom: 1 // starting zoom
      })
      let data = 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson'
      map.on('style.load', () => {
        /* 使用热力图图层加载点数据 --数据非常多 */
        map.addSource('source', {
          type: 'geojson',
          data
        })
        map.addLayer({
          id: 'heat_layer',
          source: 'source',
          type: 'heatmap',
          /* zoom大于9的情况热力图就不会显示了 */
          maxzoom: 9,
          paint: {
            'heatmap-radius': [
              'interpolate',
              ['linear'],
              ['zoom'],
              2, //zoom
              5,
              6, //zoom
              10
            ]
          }
        })
        map.on('click', 'heat_layer', (evt) => {
          console.log(evt.features[0])
        })
      })
      /* line-progress */
    </script>
  </body>
</html>

（一）、在 Mapbox-GL 中，点图层的不同加载方法、区别和性能优化
cuijiying的博客
12-17 611
在 Mapbox 中，点图层可以使用symbol和circle两种不同的方式进行渲染。它们之间的主要区别在于渲染效果、适用场景和可用的样式属性
mapboxgl filter 筛选人员点位
xm_w_xm的博客
08-17 2411
通过对yhcsl 这个字段进行筛选 ！ = null 的展示出来 // 分配人员点位信息 let inFoLayerfenpeiry = { id: "uuidfenpeiry", type: "symbol", source: { type: "geojson", data: `${CONFIG.Service10}/qgzh...
Mapbox常用表达式整理（2）
hequhecong10857的博客
04-01 3562
文章目录表达式参考Types类型操作符booleanformat 表达式参考 Types类型操作符 boolean 如果提供了多个值，则按顺序计算每个值，直到得到一个布尔值为止。如果所有输入都不是布尔值，则表达式是错误的。 ['boolean', ['feature-state', 'hover'], false] 首先看['feature-state', 'hover']表达式的值是否为bool值，如果是，则返回对应的bool值；如果否，则按顺序依次往后看第二个值是否为bool值。 format 返回一
mapbox gl 三维可视化渲染 及 栅格、矢量、自定义图层 应用（重点阐述栅格数据的渲染）
最新发布
m0_51244077的博客
06-18 500
mapbox gl 三维可视化渲染 及 栅格、矢量、自定义图层 应用（重点阐述栅格数据的渲染）
mapbox样式规范(style)
Mozifei73的博客
01-16 1万+
mapbox样式规范(style)
【mapbox-gl】一个字符串匹配（包含关系）的表达式过滤器
榕树岛
12-27 464
mapbox-gl过滤器的一些特别用法
mapbox常用方法记载
qq_35091287的博客
10-13 546
1.初始化地图  this.map = new this.$mapboxgl.Map({         container: ‘map’,         style: this.mapStyles[0],       &nbsp
【Django GIS进阶技巧】：深入解读地图服务集成与高级应用
!...# 1. Django GIS基础概念 ## 1.1 GIS与Web框架的结合 地理信息系统（GIS）是一种强大的工具，用于捕获、存储、分析和展示地理数据。Django是一个高级的Python Web框架，它鼓励快速开发和干净
【MapboxGL API集成】：第三方服务对接的进阶指南
本文提供了关于MapboxGL API集成的全面概览，从基础概念到实际应用，再到进阶技术与未来趋势的深入分析。首先介绍了MapboxGL API的核心功能和交互模式，其次深入探讨了如何将该API集成到实际项目中，并提供了基础...
深入Mapbox GL JS：高级地图功能实现技巧
Mapbox GL JS为Web地图开发提供了一套功能强大的框架，本文将从基础入门到进阶功能开发进行详细讲解。首先，入门章节将介绍如何定制和设计地图样式，包括对Mapbox样式语言的理解和地图组件的交互设计。接下来，文章...
【零代码秘籍】一文掌握Mapbox GL交互式地图可视化：从入门到精通
熵数实验室
05-02 965
创建基础地图style=map_styles['浅色'],zoom=10,# 添加控件interactive_map.add_control(NavigationControl()) # 缩放和旋转控件interactive_map.add_control(FullscreenControl()) # 全屏控件interactive_map.add_control(ScaleControl()) # 比例尺控件# 准备不同类型的POI图层。
Django GIS进阶教程：从点对象到地理空间分析的5大关键技巧
[Django GIS进阶教程：从点对象到地理空间分析的5大关键技巧](http://www.geovis.com.cn/wp-content/uploads/2022/04/2022-04-26-01502680-960x541.png) # 1. Django GIS基础概念解析 ## 1.1 GIS与Web开发的融合 在...
Mapbox-Graticule-with-Lable 使用教程
gitblog_00396的博客
09-12 302
Mapbox-Graticule-with-Lable 使用教程 1. 项目介绍 Mapbox-Graticule-with-Lable 是一个针对 Mapbox GL JS 开发的示例项目，旨在展示如何在地图上添加带有标签的经纬度网格（graticule）。此项目灵感来源于 Maptiler 的 maplibre-grid，但经过修改以适应 Web Mercator 投影（EPSG:3857），...
探索Mapbox插件的无限可能：mapbox-plugins项目推荐
gitblog_00692的博客
09-25 779
探索Mapbox插件的无限可能：mapbox-plugins项目推荐 项目介绍 mapbox-plugins 是一个为Mapbox地图库量身定制的开源插件集合，旨在扩展Mapbox的功能，提供更加丰富和动态的地图交互体验。无论是游戏控制、Canvas覆盖层、场景动画，还是与Chart.js的集成，mapbox-plugins 都能满足开发者对地图可视化的多样化需求。 项目技术分析 mapbox-p...
Mapbox 是一个强大的地图平台，提供了一系列用于创建自定义地图的工具和服务，特别适用于地理信息系统（GIS）应用、移动地图应用和数据可视化等领域
靡不有初，鲜克有终
01-01 360
7. **应用示例**：Mapbox可以加载ArcGIS切片服务，例如天地图Web墨卡托（Wkid：3857）坐标系，并且提供了具体的代码示例，展示了如何在Mapbox中添加ArcGIS REST切片地图服务。4. **渲染技术**：Mapbox将在游戏开发中使用的OpenGL渲染技术应用到了地图渲染中，精确控制到每个像素，提供生动的地图相关数据可视化工具。5. **自定义能力**：Mapbox允许开发者对地图的样式进行深度定制，包括颜色、字体、图标等，甚至可以创建全新的地图主题。
⭐Mapbox GL JS学习探索系列（3） - Layer
j_bleach的博客
10-24 1285
简介 地图上大部分的动态显示效果吗，如图标，区域点，线，面等都是基于layer来实现的， mapbox中的layer主要存在以下几种类型：background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade。其中只有background的显示不依赖source。 background map.loadI...
Mapbox浅析（快速入门Mapbox）
Taylor-NG的博客
06-01 1万+
1.是什么？    Mapbox是一个可以免费创建并定制个性化地图的网站。2.了解一些基本东西   常见的 mapbox.js和mapbox-gl.js的异同点？    相同点：                1.都是由Mapbox公司推出的免费开源的JavaScript库                2.都可以作为前端渲染矢量瓦片交互地图的工具                3.它们的样式设置...
mapbox地图的使用方法-总结
热门推荐
奋斗的小青年
10-10 4万+
今天刚好有时间就来总结下mapbox的用法吧 自己选择的路跪着也要走完 在使用mapbox之前需要到官网去注册账号，然后会拿到一个Access tokens，只有拿到了这个token你才能使用mapbox地图，我们可以用两种方式引入mapbox GL js 使用mapbox的cdn &amp;lt;script src='https://api.mapbox.com/mapbox-gl-js/v0...
使用mapboxgl 实现特定的地图效果
boke的博客
12-05 7810
使用mapboxgl 实现特定的地图效果 最近完成的一个项目,dashboard 地图模块的需要和第三方对接，对接要求使用mapboxgl 来对接。以前的项目一直用leaflet库来处理地图需求，mapboxgl 库对我来说很陌生。学习研究一段时间，再基本实现了产品设计的地图交互功能后，我在这里写记录。 先上张设计图： 一、要求实现的功能 1.加载深圳地图瓦片、颜色采用暗色调 2.地图附有蓝色遮罩层，鼠标hover时 ，该区域高亮并展示相应的数据 3. 摄像头点位在地图上显示，两种类型，一个绿色一个蓝色，要
数据处理与地图制作：Mapbox与GIS教程集锦
5. 所有Mapbox教程：这里指的可能是一个包含Mapbox使用方法和技巧的教程集合，用户可以通过这些教程学习Mapbox的基本操作到进阶功能。 6. 建议尝试Choropleth教程1和2：Choropleth是一种专题地图，其中不同区域的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值