# mapboxdemo

**Repository Path**: xesxz/mapboxdemo

## Basic Information

- **Project Name**: mapboxdemo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-07-09
- **Last Updated**: 2023-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Description:
 * @Author: zhanglei
 * @Date: 2021-07-13 10:11:44
 * @LastEditTime: 2021-09-13 14:18:36
-->

## mapbox
mapbox可以叠加`echarts` `deckgl` `antvL7` `mapV`




## 发光线

[如何让你的数据发光？“ 萤火虫 ”风格地图制作方法大揭秘！| Mapbox Studio 教程](https://mp.weixin.qq.com/s?__biz=MzIwNTU1MDM2Mg==&mid=2247489602&idx=1&sn=221d5299015ce9d234560aa4062aff6b&chksm=972e7e37a059f721414aa0efeb0aced622e752a7d797bc8685436305f43c87324ce565ea5def&scene=21#wechat_redirect)

## 航线轨迹

[航线地图上的动画飞行效果怎么实现？只要五步轻松上手](https://zhuanlan.zhihu.com/p/203277231)

### setFilter

`map.setFilter('-layer',['==','Name','阿秀乡'])` 过滤图层上 Name=阿秀乡的 feature
`map.setFilter('-layer',['!=','Name','阿秀乡'])` 过滤掉图层上 Name=阿秀乡的 feature 剩下其他 feature
`map.setFilter('-layer',['in','Name','阿秀乡','贡日乡'])` 过滤图层上 Name=阿秀乡和 Name=贡日乡的 feature

`map.setFilter('-layer',["all",["==", "Name", "阿秀乡"],["==", "Layer", '乡镇 1']])` && 需要两个条件满足
`map.setFilter('-layer',["any",["==", "Name", "阿秀乡"],["==", "Layer", '乡镇 1']])` || 满足其中一个就可以
[filter中文解释](https://blog.csdn.net/GISShiXiSheng/article/details/105157145)
[filter语法](https://docs.mapbox.com/mapbox-gl-js/style-spec/other/#other-filter)

### symbol
图片 文本 内置的图片

### 设置等级颜色分类

```
map.setPaintProperty('layerID', "fill-color", {
           property: "Value",
                stops: [
                    [0, "#CDCDCD"],
                    [0.1, "#A7F38F"],
                    [2, "#72D96E"],
                    [5, "#3CB93C"],
                    [10, "#2C8B2C"],
                    [25, "#60B9FF"],
                    [50, "#0000FD"],
                    [100, "#FB00FB"],
                    [250, "#810040"]
                    ],
                type: "interval"
            });
```

### 随机生成颜色
```
   // 随机生成颜色
    randomColor() {
      return ("#" + ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6));
    },
```

TODO:
```
  "icon-color": [
                "case",
                ["boolean", ["feature-state", "hover"], false],
                "#F89806",
                ["boolean", ["==", ["get", "state"], 0], false],
                "#2363F8",
                ["get", "color"]
              ],
```

          TODO:    feature自动加上id      soure     generateId: true

TODO:
[列表与地图联动](https://blog.csdn.net/GISShiXiSheng/article/details/116613967?spm=1001.2014.3001.5501)

TODO:图床

### querySourceFeatures
查询指定*矢量切片*或*GeoJSON*数据源中的要素。

`map.getSource('sourceId)` 未处理 看到整个source对象

`map.querySourceFeatures('sourceID)` 已处理  看到feature1


### queryRenderedFeatures 





[mapbox卷帘](https://lzugis.blog.csdn.net/)





3857 墨卡托
4326 wgs84

Mapbox 默认加载是 墨卡托 3857
`proj4(proj4('EPSG:4326'), proj4('EPSG:3857'), [103, 40])`

[turf](https://zhuanlan.zhihu.com/p/247970902)



center centerOfMass centroid 区别

center 是计算多个点的中心点

 centerOfMass centroid  是计算面的中心点 区别是

<img src="https://gitee.com/xesxz/drawing-bed/raw/master/img/image-20210824174943706.png" alt="image-20210824174943706" style="zoom:50%;" />

[style]()
[表达式](https://aigisss.com/blog/posts/9c1bf78f.html)


```
paint: {
            "fill-outline-color": "red",
            "fill-color": ["get", "color"],
          }
          
```

```
      paint: {
                "line-color": [
                  "match", //根据属性不同渲染不同颜色
                  ["get", "class"],
                  "trunk",
                  "#fbb03b", //黄
                  "primary",
                  "#223b53", //黑
                  "motorway",
                  "#e55e5e", //红
                  '#ccc' //未匹配渲染默认的灰色
                ],
```

```
   filter: ["==", "$type", "Polygon"] /* 数据过滤器 */,
```

[fill-extrusion相关示例](https://www.cnblogs.com/defineconst/p/15024060.html)


```
/**
* 面转线
* @param geojson 面geojson
*
* @return geojson 线geojson
*/
function convertPolygonToPolyline(polygonGeoJson) {
  var polylineGeoJson = JSON.parse(JSON.stringify(polygonGeoJson))

  for (var i = 0; i < polylineGeoJson.features.length; i++) {
    var MultiLineString = []
    if (polylineGeoJson.features[i].geometry.type === 'Polygon') {
      var Polygon = polylineGeoJson.features[i].geometry.coordinates
      Polygon.forEach(LinearRing => {
        var LineString = LinearRing
        MultiLineString.push(LineString)
      })
    } else if (polylineGeoJson.features[i].geometry.type === 'MultiPolygon') {
      var MultiPolygon = polylineGeoJson.features[i].geometry.coordinates
      MultiPolygon.forEach(Polygon => {
        Polygon.forEach(LinearRing => {
          var LineString = LinearRing
          MultiLineString.push(LineString)
        })
      })
    } else {
      console.error('请确认输入参数为geojson格式面数据！')
      return null
    }
    polylineGeoJson.features[i].geometry.type = 'MultiLineString' //面转线
    polylineGeoJson.features[i].geometry.coordinates = MultiLineString
  }

  return polylineGeoJson
}

```