leaflet地图分级设色

关键词：leaflet; geojson; wkt; 分级设色; 地图渲染；颜色映射；颜色转换；图例

案例需求：各省级专题数据分级设色
数据准备：1.地图数据geojson格式（https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json）来源：http://datav.aliyun.com/portal/school/atlas/area_selector
2.专题数据，通过随机数生成

示例

效果

渲染效果

以上使用的离散颜色数组渲染，生成连续颜色可使用如下方法

  //根据数值范围、颜色范围（16进制类型），获取数值范围中某一数值对应颜色范围中的颜色
  //颜色要求：选择相邻色系
  function getContinuationColorByVal(minVal, maxVal, firstColor, secondColor, val){
    let ratio = (val-minVal)/(maxVal - minVal);
    let fArr = hex2RgbArr(firstColor);
    let sArr = hex2RgbArr(secondColor);
    let color = [];
    for(let i = 0; i < fArr.length; i++){
      let c = (fArr[i] #ffffff
      if (color.length === 4) {
        var colorNew = '#';
        for (var i = 1; i < 4; i += 1) {
          colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
        }
        color = colorNew;
      }
      // 处理六位的颜色值，转为RGB
      var colorChange = [];
      for (var i = 1; i < 7; i += 2) {
        colorChange.push(parseInt('0x' + color.slice(i, i + 2)));
      }
      return colorChange;
    }
  }
  //rgb颜色数组[255, 255, 255]转16进制颜色#ffffff
  function rgbArr2Hex(rgbArr){
    let strHex = '#';
    // 转成16进制
    for (var i = 0; i < rgbArr.length; i++) {
      let hex = Number(rgbArr[i]).toString(16);
      hex = hex.length == 1 ? '0' + hex : hex;
      strHex += hex;
    }
    return strHex;
  }

实际开发，地图要素范围数据可能后端返回wkt类型数据，wkt数据转换layer图层，需用leaflet插件leaflet-omnivore

//wkt转leaflet layer
wkt2Layer(wktShape) {
  if(!!wktShape){
    var geoJson = omnivore.wkt.parse(wktShape);
    let feature = geoJson.getLayers()[0].feature;
    return L.GeoJSON.geometryToLayer(feature);
   }
}

参考资料：
https://blog.csdn.net/mossbaoo/article/details/93484635
https://htmlcolorcodes.com/zh/yanse-xuanze-qi/
http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5
https://www.jianshu.com/p/1cbfa0ed2051