Truf.js的浅使用(生成网格)

 

随机一组业务数据

随机生成30个随机点,并给每个点设置value属性为随机数

var points = turf.randomPoint(30, { bbox: turf.bbox(boundaries) });

//再生成些随机数做属性
turf.featureEach(points, function (currentFeature, featureIndex) {
  currentFeature.properties = { value: (Math.random() * 100).toFixed(2) };
});

 

差值算法

turf.interpolate() 提供了基于 IDW（反距离权重）算法的将数据插值为格点的方法。插值的精度是由第二个参数与 interpolate_options.units 共同决定的，单位支持 degrees, radians, miles, or kilometers，IDW 要为每个格点计算所有散点的权重，计算规模是 (散点数 * 格点数)，所以要在精度与性能间做好平衡。 我们将之前的散点（points）代入

var interpolate_options = {
  gridType: "points",
  property: "value",
  units: "degrees",// 单位
  weight: 10 // 权重
};
// 点数, 格子大小, 配置
var grid = turf.interpolate(points, 0.05, interpolate_options);
// 适当降低插值结果的精度便于显示
grid.features.map((i) => (i.properties.value = i.properties.value.toFixed(2)));

画网格

根据算出的随机点,生成3dPolygon,并把value的值作为高度

/**
 * 添加热力
 * @param borderCoords 范围坐标
 * @param index
 */
const addHeat = async (borderCoords: any, index: number) => {
    let points: any = pointsArr[index]
    // 随机点添加随机value值
    turf.featureEach(points, function (point: any) {
        point.properties.value = getRandNumBetween(10, 100)
    })
    // 配置
    let options: any = {
        gridType: 'points', // FeatureCollection <Point>
        property: 'value', // 差值的属性值
        units: 'kilometers', // 单位 千米
        weight: weight // 权重
    }
    const grid = turf.interpolate(points, cellSize, options)
    console.log(grid, '---grid')
    // 判断范围
    // 将投影坐标转换为地理坐标
    const coords = borderCoords.map((item: any) => {
        const [x, y, z] = item
        const [longitude, latitude] = (window as any).proj4(Projection, 'EPSG:4326', [x, y])
        return [longitude, latitude]
    })
    const poly = turf.polygon([coords])

    // 3dPolygon数组
    const polygon3dArr = []
    for (const item of grid.features) {
        const pt = turf.point(item.geometry.coordinates)
        if (!turf.booleanPointInPolygon(pt, poly)) continue
        const index = grid.features.indexOf(item)
        // 地理坐标
        const [longitude, latitude] = item.geometry.coordinates
        // 地理坐标转换为投影坐标
        let [x, y] = (window as any).proj4('EPSG:4326', Projection, [longitude, latitude])
        // 差值
        // @ts-ignore
        const val = Math.floor(item.properties.value)
        // 盒子z轴高度
        const z = val * 30 + 700
        // 计算四个角
        const topLeft = [x - sideLength, y + sideLength, z]
        const topRight = [x - sideLength, y - sideLength, z]
        const bottomLeft = [x + sideLength, y - sideLength, z]
        const bottomRight = [x + sideLength, y + sideLength, z]

        polygon3dArr.push({
            id: 'polygon3d_' + index, //折线唯一标识id
            coordinates: [topLeft, topRight, bottomLeft, bottomRight], //构成折线的坐标点数组
            color: [ColorList[val][0], ColorList[val][1], ColorList[val][2], val / 200], //颜色值
            height: -z, //3D多边形的高度
            intensity: 1, //亮度
            style: 3, //3DPolygon的样式 请参照API开发文档选取枚举
            generateTop: false, //是否生成顶面
            generateSide: true, //是否生成侧面
            generateBottom: false, //是否生成底面
            z: z,
            value: val
        })
        needDelete3dPolygonArr.push('polygon3d_' + index)
    }
    await __g.polygon3d.add(polygon3dArr)
}