turf.js + maptalks 实现等值图

1、将坐标点信息经过turf转转成FeatureCollection类型

// 参数说明 data 数组对象：[{x: 119.017266, y: 39.453112, value:100}]
let colorChart = ['#79b837', '#078f33', '#014b24', '#eec040', '#d05d2c', '#830826']

dataDased(data) {
    return new Promise((resolve, reject) => {
        const _this = this;
        // 绘制区域范围GeoJson
        const basinRes = 'https://geo.datav.aliyun.com/areas_v3/bound/130100.json';
        // interpolate 只接受FeatureCollection,先构造FeatureCollection 
        const pointFeature = {
            type: 'FeatureCollection',
            features: data.map(i => {
                return {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [Number(i.x), Number(i.y)],
                    },
                    properties: i,
                 };
                }),
            };
                // 插值配置
        const interpolate_options = {
            gridType: 'points',
            // value 为参数 data 数值字段的key value
            property: 'value',
            units: 'degrees',
            weight: 10,
        };
        //  生成插入值
        const gridInterpolate = turf.interpolate(pointFeature, 0.01, interpolate_options)
        // 等值线分割点，跟zProperty比较
        const breaks = [10, 20, 30, 40, 50];
        // 根据色卡生成颜色
        const color = colorChart.map((color) => { return { fill: color } })
        // 配置 
        const isolines_options = {
            // value 为参数 data 数值字段的key value
            zProperty: 'value',
            commonProperties: {
                'fill-opacity': 0.7,
             },
             breaksProperties: color
         };

         // 等压线处理
         // gridIsobands是FeatureCollection <MultiPolygon>类型
         let gridIsobands = turf.isobands(gridInterpolate, breaks, isolines_options);
         // 先将gridIsobands需要先 flatten() 处理一下
         gridIsobands = turf.flatten(gridIsobands);
         // 剔除超出区域范围数据
         const features = [];
         gridIsobands.features.forEach((layer1) => {
             basinRes.features.forEach((layer2) => {
                 let intersection = turf.intersect(layer1, layer2);
                 if (intersection != null) {
                     intersection.properties = layer1.properties;
                     intersection.id = Math.random() * 100000;
                     features.push(intersection);
                  }
              });
          });
          // 将裁切之后的数据转成FeatureCollection类型
          const geojson = turf.featureCollection(features);
          resolve(geojson)
    })
}

2、将生成的geojson，添加值地图。

let legends = [] // 图例
// 开始绘制
drawChart(geojson) {
    const map = this.map
    // 添加至地图
    let v = map.getLayer("v-t")
    if (!v) v = new maptalks.VectorLayer("v-t").addTo(map)
    v.clear()
    const geo = new maptalks.GeoJSON.toGeometry(geojson, geometry => {
    geometry.config('symbol',
        {
            'lineColor': geometry.properties.fill,
            'lineWidth': 1,
            'lineDasharray': null,//线形
            'lineOpacity': 1,
            'polygonFill': geometry.properties.fill,
            'polygonOpacity': geometry.properties['fill-opacity'],
        });
        geometry.addTo(v);

        // 此处为获取图例
        let flag = legends.some(item => {
            if (item.value == geometry.properties.value) return true
        })
        if (!flag) legends.push({ fill: geometry.properties.fill, value: geometry.properties.value })
    })
}

参考

Turf.js 文档 (psilocine.github.io)

maptalks - 官网

maptalks - 示例中心