使用mapboxgl 实现特定的地图效果

使用mapboxgl 实现特定的地图效果

最近完成的一个项目,dashboard 地图模块的需要和第三方对接，对接要求使用mapboxgl 来对接。以前的项目一直用leaflet库来处理地图需求，mapboxgl 库对我来说很陌生。学习研究一段时间，在基本实现了产品设计的地图交互功能后，我在这里写记录。
先上张设计效果图：

一、要求实现的功能

1.加载深圳地图瓦片、颜色采用暗色调。
2.地图附有蓝色遮罩层，鼠标hover时 ，该区域高亮并展示相应的数据。
3. 摄像头点位在地图上显示，两种类型，一个绿色一个蓝色，要求有聚合功能并根据摄像头类型和数量来决定icon在地图上显示绿色或者蓝色。

二、代码实现

mapboxgl底层是使用h5 的canvas 技术，这就决定了里面所有的鼠标事件都是根据鼠标的（x,y）坐标来触发。同时也可以解析为什么地图页面被tranform拉伸（css3 样式） 后， mapboxgl 的事件触发会失灵的原因。

2.1.加载深圳地图瓦片、颜色采用暗色调

2.1.1 加载深圳地图瓦片（矢量地图）,地图背景设置成图纸规定的颜色

const mapStyle = 'xxxxx'; // 地图的样式配置，里面有一些地图的基本信息和地图一些图层layers设置
var map = new mapboxgl.Map({
          container: 'map', // container id
          style: mapStyle ,
          center: [114.185125079355, 22.6322002129776], // starting position
          zoom: 10,
          attributionControl: false
      });

瓦片采用暗色调，如果mapStyle(文件具体格式参照mapboxgl官网:https://docs.mapbox.com/help/glossary/style/) 提供的地图瓦片（矢量地图瓦片）不是自己想要的色调，那就需要用代码修改mapStyle里面的配置。
改地图的一些属性前，第一要解决的问题就是：我怎么知道地图里面有哪些配置，哪些layers?
1.可以查看浏览器的network的接口抓包 。
2. 用console.log（map）打印地图对象。
下面截图来自mapboxgl 官网和supermap 官网例子:


地图的所有信息都会写入到map 对象里面，_layers里面记录了所有覆盖在地图上面的图层，里面是一个对象集合，每个对象里面都有layer 的id 、type、layout 、paint 等属性。跟photoshop 一样，canvas 绘制的地图就是一层一层的图层叠加起来的图片，每一层图层都有自己的一些设计，每个图层都有自己指定的图层序号(id）。要修改某个图层只需要知道layer id 就行。
supermap地图的第一层一般都是background 图层，backgound 规定了地图的背景颜色和透明度。上面的效果图地图的背景色是指定颜色的。mapboxgl 提供了 map.getLayers（） 、 map.removeLayer（）、map.addLayers() 、map.setPaintProperty()等api。supermap官网提供的地图有background 这层layer,我这里只需要修改这一层图层的颜色就行。

map.on('load',function(){
  map.setPaintProperty('background', 'background-color', '#45516E');
})

2.1.2 修改地图其他图层的覆盖物颜色

supermap 提供的地图瓦片是白色瓦片，和UI设计不符。解决的方法有两个，一要求supermap 直接提供深色主题的地图瓦片，二前端自己处理，在地图加载完成后切换瓦片的颜色。
layer 里面的 type 是说明当前图层的类型。
type分为：
fill： 类似于canvas 里的fill，在给定的经纬度区域内填充内容
line: 沿着经纬度点画线
symbol: 图标或者label
circle: 在指定点位上画圆形
heatmap:热力图
…
从type 上分析，地图最显眼图层块应该是type 为fill 和line 类型的layer。要切换地图主题颜色，这就需要考虑这两种类型。主要修改它们的fill-color 和line-color 属性，同时还要考虑颜色层次和地形的区分，比如绿地、水系 、高速路、省道等不同覆盖物使用不同的颜色或者不同的透明度。具体需要修改哪些layers,我们可以先研究下map 里面的layers ，再挑一些比较显眼的瓦片layer 修改。

  	map.setPaintProperty('background', 'background-color', '#45516E');
  	// 获取地图上所有的layers,因为是遍历object 对象，可以用object.keys来遍历
    Object.keys(map.style._layers).map(v=>{
    	const opt = map.style._layers[v]; 
        // 修改绿地、水系的瓦片颜色
        if((opt.id.includes('绿地')||opt.id.includes('水系')) && opt.type=='fill'){
          map.setPaintProperty(opt.id, 'fill-color', '#182c4e');
        }
        // 修改道路的颜色
        if((opt.id.includes('高速')||opt.id.includes('国道')||opt.id.includes('省道')) && opt.type=='line'){
          map.setPaintProperty(opt.id, 'line-color', '#182c4f');
        }
      })

2.2 地图蓝色遮罩层,地区边界线亮色显示，在蓝色遮罩层上添加区域名称

2.2.1 地图蓝色遮罩层,地区边界线亮色显示

如果地图有按照地区边界区分的layer,可以考虑直接修改或者复制一个图层叠在地图最上端，这个方案是最简单明了的。通常情况下和第三方对接，对方提供的东西很可能性不能完全满足己方的需要。再对接后我获取到的地图layers 并没有这样一个图层。这种情况该怎么处理？最优方案是反推对方，要求对方提供对应的文件。次选方案从网上搜索一个深圳相关的geoJson文件，然后加载到地图上层。开发项目的时候，我同时执行了两种方案。但最终只能使用此选方案。地图体系不同，地图边界线的经纬度就有些偏差，网上下载的geoJson 加载到地图上，放大后可以看出边缘有一些部分不太重合，同时geoJson 图层整体都有些偏移。这些都需要在地图加载前做同样的经纬度偏差处理。

  var sourceName = 'blueMask'; // 资源名称，自定义
      map.addSource(sourceName, {
      type: 'geojson', 
      data: geoJson, // 网上下载的geoJson的地图文件，使用前经过偏差算法处理
    });
   // 蓝色遮罩层颜色设定，透明度通过feature-state 的值的情况来设定颜色透明度
    map.addLayer({
      id: 'addlayermask',
      type: 'fill',
      source: sourceName,
      layout: {},
      paint: {
        'fill-color': '#286BFF',
        'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 0.3, 0],
      },
    });
    // 设置地图区域边沿的线宽和颜色值
    map.addLayer({
      id: `${sourceName}-line`,
      type: 'line',
      source: sourceName,
      layout: {},
      paint: {
        'line-width': 1.5,
        'line-color': '#286BFF',
      },
    });

2.2.2 鼠标hover ，区域图层高亮,并弹窗显示区域的介绍信息：

 let hoveredStateId = null;
 let listener1 = function(e) {
    map.getCanvas().style.cursor = 'pointer';// 设定鼠标移入的样式
    if (e.features.length > 0) {
      if (hoveredStateId) { 
        map.setFeatureState({ source: sourceName, id: hoveredStateId }, { hover: false });// 先还原成默认状态
      }
      hoveredStateId = e.features[0].id; // ps:加载的geoJson  feature 里面必须设定一个id 属性,用于定位哪个区域需要高亮。如果原文件没有，可以手动在原文件上添加id 属性并设置对应的id 数字
      map.setFeatureState({ source: sourceName, id: hoveredStateId }, { hover: true });
    // 鼠标hover 时 弹窗显示区域的介绍信息
	popup .setLngLat([lnglat[0], lnglat[1]]) // 弹窗的经纬度位置，可以设成下面区域名称的经纬度附近坐标
	            .setHTML(
	              `<div class=cameraDes>
	              区域信息介绍
	          </div>`,
	            )
	            .addTo(map);
    }
  };

  map.on('mousemove', 'addlayermask', listener1);
  // 鼠标移出事件，改变hover 的值
  let listener2 = function() {
    map.getCanvas().style.cursor = ''; //改变鼠标样式
    if (hoveredStateId) {
      map.setFeatureState({ source: sourceName, id: hoveredStateId }, { hover: false });
    }
    hoveredStateId = null;// 还原或者情况
  };
  // 鼠标离开时 去掉高亮状态
   map.on('mouseleave', 'addlayermask', listener2);
     })

2.2.3 在蓝色遮罩层上添加区域名称

/**
 * 增加区域的名称和区域名字
 * @param map 地图实例
 * @param markClass  marker 的页面样式
 * @param geoJson geoJson 格式的地图数据
 */

export function addRegionName(map, markClass, geoJson) {
  geoJson.features.forEach((v) => {
    const el = document.createElement('div'); 
    el.className = markClass;
    const t = document.createTextNode(v.properties.name);
    el.appendChild(t);
    new mapboxgl.Marker({
      element: el,// 只支持原生的html 元素
    })
      .setLngLat(v.properties.center)// 使用geoJson 里面的center 属性来
      .addTo(map);
  });
}

2.3 摄像头点位在地图上显示，两种类型，一个绿色一个蓝色，要求有聚合功能并根据摄像头类型和数量来决定显示绿色或者蓝色

如果单单只是要实现摄像头点位的蓝绿色图标，mapboxgl提供了marker 、circle 、canvas 、symbol。这里我直接采用最简单的circle ，同时也方便后面的cluster 处理。

  const sourceName = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',     // 摄像头使用point类型，在地图上渲染
          coordinates: [0, 0],// 摄像头的经纬度
        },
        properties: {
          title: 'camera',
          areaType: 1,// 自定义属性,
        },
      },
    ],
  };
  map.addLayer({
    id: layerId,// 这个id 是自定义的，layerId 是通过函数的参数传递进来的
    type: 'circle',
    filter: ['!', ['has', 'point_count']], // 渲染条件，只渲染没有point_count 属性的点位。point_count 属性是聚合cluster 的属性。这里只渲染非聚合的
    source: sourceName,// sourceName，格式为geoJson，areaType 是自定义的属性，可以在渲染前把所有的摄像头点位写入sourceName 变量里面
    paint: {
      'circle-color': ['case', ['==', ['get', 'areaType'], 1], '#286bff', '#0ebd73'],// 通过areaType 类型判断摄像头应该渲染什么颜色。如果 areaType === 1 渲染#286bff，不等就渲染#0ebd73
      'circle-radius': 5, //摄像头圆圈的半径，5px
    },
  });

 // Create a popup, 鼠标hover时摄像头弹窗显示摄像头名称.
  const popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false,
  });
  map.on('mouseenter', layerId, function(e) {
    isHoverCameraIcon = true;
    // districtPop 是全局变量，这里做了弹窗的一个复位操作
    districtPop !== null && districtPop.remove();
    map.getCanvas().style.cursor = 'pointer';
    const coordinates = e.features[0].geometry.coordinates.slice();
    const description = e.features[0].properties.title; // 摄像头名称，属性是自定义的

    // Ensure that if the map is zoomed out such that multiple
    // copies of the feature are visible, the popup appears
    // over the copy being pointed to.
    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    // Populate the popup and set its coordinates
    // based on the feature found.
    if (description) {
      popup
        .setLngLat(coordinates)
        .setHTML(`<div class=cameraDes>${description}</div>`)// 弹窗的具体内容
        .addTo(map);
    }
  });

  map.on('mouseleave', layerId, function() {
    isHoverCameraIcon = false;
    map.getCanvas().style.cursor = '';
    popup.remove();
  });

2.3.1 摄像头聚合功能，颜色定义，聚合图标显示摄像头数量等功能

const mag1 = ['==', ['get', 'areaType'], 1];
const mag2 = ['==', ['get', 'areaType'], 2];
//添加聚会的图层的source
 map.addSource( 'marker_market', {
      type: 'geojson',
      data: sourceName ,// 取上面的geojson 格式的文件
      cluster: true,
      clusterMaxZoom: 12,//允许聚合图层最大的放大图层
      clusterRadius: 20,//聚合后的摄像头图标半径
      clusterProperties: {
        mag1: ['+', ['case', mag1, 1, 0]], // 统计聚合点areaType ==1 的数量，累计如果满足mag1 的条件 ，clusterProperties 的mag1 的值就加1 否则加0
        mag2: ['+', ['case', mag2, 1, 0]], // 统计聚合点areaType ==2 的数量
      },
    });
 // 添加cluster 的 
map.addLayer({
    id: layerId, // layerId 随便一个字符都行，不和其他layer 重名就好
    type: 'circle',
    filter: ['has', 'point_count'],// 只处理拥有point_count 属性的的摄像头点位
    source: sourceName,
    paint: {
      'circle-color': ['case', ['>=', ['get', 'mag1'], ['get', 'mag2']], '#286bff', '#0ebd73'], // 如果cluster 的mag1 属性大于 mag2 属性，优先显示#286bff摄像头颜色
      'circle-radius': ['step', ['get', 'point_count'], 5, 1, 10, 10, 12],// 聚合摄像头数量 1个 圆的半径为5px，1～10 个摄像头 圆的半径为10px，10个摄像头以上，半径为12px
    },
  });
  // 在聚合cluster图标中间渲染摄像头的数量
    map.addLayer({
    id: 'cluster-count',
    type: 'symbol',
    source: sourceName,
    filter: ['has', 'point_count'],
    layout: {
      'text-field': '{point_count_abbreviated}',
      'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
      'text-size': 12,// 规定字体的字号
    },
    paint: {
      'text-color': 'rgba(255,255,255,1)', // 字体颜色
    },
  });

  // 汇聚点击即后，自动展开汇聚点。官网有这个例子
  map.on('click', layerId, function(e: any) {
    const features = map.queryRenderedFeatures(e.point, {
      layers: [layerId],
    });
    const clusterId = features[0].properties.cluster_id; // features
    if (clusterId) {
      map.getSource(sourceName).getClusterExpansionZoom(clusterId, function(err: any, zoom: any) {
        if (err) return;
        map.easeTo({
          center: features[0].geometry.coordinates,
          zoom: zoom,
        });
      });
    }
  });

如果摄像头有变动，需要修改layer 的信息，这时有两种方法。
1.删除原图层然后添加新图层 ：map.getLayer(layer) && map.removeLayer(layer)
2. 直接用mapboxgl 提供的api修改layer的属性： map.getLayer(‘background’) && map.setPaintProperty(‘background’, ‘background-color’, ‘rgba(4,21,37,1)’);

这样整地图除底层的地图瓦片外，其他的效果差不多就已经实现了。