使用电网一张图进行图标撒点展示

一、前言

思极地图是基于mapBox平台开发而成，被电网一张图提供给个网省公司和总部项目使用，一张图提供的示例如果不全面的话可以寻找mapBox上的解决方案。

二、地图撒点展示

//通过一张图案例先引入地图,直接查看案例即可,此处不多赘述,把地图参数挂载到window上可以显著提高地图加载速度，读者可以用以参考
windwo.map = initNarMapMap({
  container: 'NarMap', // 地图容器的id
  style: 'aegis://style/aegis/StreetsDark-v2', // 使用的地图样式
  center: [-74.5, 40], // 初始中心点坐标
  zoom: 9 // 初始缩放级别
});
 

进行少数图标撒点

map.on('load', function() {
  // 添加点图层
  map.addLayer({
    'id': 'points',
    'type': 'symbol',
    'source': {
      'type': 'geojson',
      'data': {
        'type': 'FeatureCollection',
        'features': [
          {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': [-74.5, 40] // 点的坐标
            }
          }
          // 可以添加更多的点
        ]
      }
    },
    'layout': {
      'icon-image': 'marker-15', // 使用的图标图像
      'icon-size': 0.5, // 图标大小
      'icon-offste': [0,0], // 设置图标偏移量
      'icon-size': 0.5, // 图标缩放
      'icon-allow-overlap': true, // 允许图标重叠
      'icon-ignore-placement': true, // 展示被遮盖的图标
      'text-ignore-placement': false, // 不展示被遮盖的文字图层
      'text-offste': [0,0], // 设置文字偏移量
      'text-anchor': 'top', // 文字展示位置
      'text-size': 12, // 文字大小
    },
    'paint':{
		'text-color': '#FFFFFF',//文字颜色
	}
  });
});

进行很多图标撒点

图标过多时，使用图层addLayer渲染会出现页面卡顿情况，这个时候应该考虑marker组,一张图的方法不能很灵活操作样式，这边给出其他方案供读者参考

map.on('load', function() {
	let scale = 0.5 //图标缩放
	let backgroundColor = 'pink'//颜色
	for(let i = 0;i < 10;i++){
		const element = document.createElement('div');
		element.innerHTML = 
		"<div class="markerClass" style='background:url(" + 你的图标地址 +") no-repeat;width:" + scale + "px;height:" + scale + "px;background-size:100%;background-color:"+ backgroundColor + "'></div>"
		const marker = new narimap.Marker({
          element: element,//引入自定义样式
          anchor: "center",
        });
        marker.setLngLat([-74.5 + Math.random(), 40 + Math.random()])
        window.markerGroup.addMarker('marker'+ i, marker);
	}
})