map相关使用笔记

Freedom风间

已于 2022-11-29 19:59:10 修改

阅读量343

点赞数

分类专栏：个人笔记文章标签： javascript 前端

于 2022-11-29 17:59:20 首次发布

本文链接：https://blog.csdn.net/ndbsa/article/details/128102406

版权

本文介绍了如何使用Mapbox进行地图操作，包括区域图层颜色过滤的代码实现、监听地图点击事件来判断点击对象，以及层级控制、添加标记和图层、地图定位等技巧。

摘要由CSDN通过智能技术生成

Mapbox

对于区域图层颜色过滤

代码操作

let fillColor = ['match', ['get', 'name'],'杭州市','red','yellow']
let fillOpacity: any = ['match', ['get', 'name'],'杭州市',0.5, 0]
// 最后一位 yellow 和 0分别代表没有标记的城市默认颜色和默认透明的
if (window.glMap.getLayer('county-boundary')) {
   
        window.glMap.setPaintProperty('county-boundary', 'fill-color', fillColor)
        window.glMap.setPaintProperty('county-boundary', 'fill-opacity', fillOpacity) 
        // 当然必须设置图层为visible（显示）,不然如果是none就不会显示了
         window.glMap.setLayoutProperty('county-boundary', 'visibility','visible')
} else {
   
    window.glMap.addLayer(
        {
   
            id: 'county-boundary',
            source: 'water_bou',
            'source-layer': 'hy_water_bou',
            type: 'fill',
            paint: {
   
                'fill-color': fillColor,
                'fill-opacity': fillOpacity,
                "fill-outline-color": "red"// 边框线颜色
            }
        },
        'JN1'
    ) //JN1为style文件中的第一个点图层，确保面图层在点图层下面
}

Json文件

当然在地图的json文件内会有相应的该图层的信息


"town_bou": {
   
      "type": "vector",
      "tiles": [
"https://gis-dev.fpi-inc.site/fpi-geo-server/gwc/service/wmts?layer=fpi-inc:hy_town_bou&style=&tilematrixset=EPSG:4490&Service=WMTS&Request=GetTile&Version=1.0.0&Format=application/vnd.mapbox-vector-tile&TileMatrix={z}&TileCol={x}&TileRow={y}"
      ]
    },
{
   
      "id": "county-boundary", // 图层名称
      "source": "town_bou", // 资源
      "type": "fill", // 类型也有line类型
      "source-layer": "hy_town_bou",