5.gis空间插值之前端turf+kriging

前言

本文主要讲述通过前端来实现通过空间插值生成等值线面、泰森多边形、TIN三角网,除此也可使用arcgis发布gp模型服务,再通过arcgis api调用


参数准备

import kriging from '@sakitam-gis/kriging'
import * as turf from '@turf/turf'

let params = {
    krigingModel: 'exponential',//model还可选'gaussian'高斯,'spherical'球状,exponential指数
    krigingSigma2: 0,
    krigingAlpha: 100,
    poygon: {//等值面
        id: {
           
            colors: ["#00a6ff", "#00ebff", "#00ffb5", "#00ff94", "#00ff08", "#10ff00", "#31fe00", "#52fe00","#9bff00", "#94ff00", "#b5ff00", "#deff00", "#ffff00", "#ffe700", "#ffc300","#ffa200", "#ff8200", "#ff6100", "#ff4100", "#ff2c00", "#ff2000", "#ff0000", "#790024", "#790024"],
            breaks: [-20, -16, -12, -8, -4, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 33, 36, 40],
            values: {
                "-20--16": 1, "-16--12": 2, "-12--8": 3, "-8-0": 4, "0-2": 5, "2-4": 6, "4-6": 7,
                "6-8": 8, "8-10": 9, "10-12": 10, "12-14": 11, "14-16": 12, "16-18": 13, "18-20": 14,
                "20-22": 15, "22-24": 16, "24-26": 17, "26-28": 18, "28-30": 19, "30-33": 20, "33-36": 21, "36-40": 22
            }
        }

    },
     line: {//等值线
        sx_dq_qxzqyid: {//气压
            colors: ["#96c69a", "#45c681", "#04a95a", "#04d209", "#070fde"],
            values: { "800": 0, "810": 0, "820": 1, "840": 1, "860": 1, "880": 2, "900": 2, "920": 3, "940": 3, "950": 4, "960": 4, "970": 4, "980": 4, "1200": 4 },
            breaks: [800, 810, 820, 840, 860, 880, 900, 920, 940, 950, 960, 970, 980, 1200]
        }
    }
 }

克里金插值


// geom 裁剪范围坐标 items点集[{longitude:108,latitude:34,value}] type线面类型 filed字段名
export const drawKriging = (geom, items, type, filed) => {
   let values = [], lngs = [], lats = [];
   items.forEach(item => {
       values.push(item[filed]);
       lngs.push(item.longitude);
       lats.push(item.latitude);
   });

   if (values.length > 3) {
       //kriging插值生成格网点集
       let variogram = kriging.train(values, lngs, lats, params.krigingModel, params.krigingSigma2, params.krigingAlpha);
       let polygons = geom.coordinates[0];
       let extent = geom.extent;

       let grid = kriging.grid(polygons, variogram, (extent[2] - extent[0]) / 100);
       let fc = gridFeatureCollection(grid);
       var collection = turf.featureCollection(fc);
       var features;
       let breaks = params[type][layerid].breaks;
       if (type === "poygon") {
           // 等值面生成
           features = turf.isobands(collection, breaks, { zProperty: 'value' });
           const sortArea = (a, b) => {
               return turf.area(b) - turf.area(a);
           };
           //按照面积对图层进行排序,规避turf的一个bug
           features.features.sort(sortArea)
       } else if (type === "line") {
           // 等值线生成
           features = turf.isolines(collection, breaks, { zProperty: 'value' });
       }

      
   } else {
       alert("有效样点个数不足,无法插值");
   }
}

反距离权重

// geom 裁剪范围坐标 items点集[{longitude:108,latitude:34,value}] type线面类型 filed字段名
export const drawFjlqz = (geom, items, type, filed) => {
    let bbs = [];
    items.forEach(item => {
        bbs.push(turf.point([item.longitude, item.latitude], { value: item[filed] }));
    });
    if (bbs.length > 3) {
        var points = turf.featureCollection(bbs);
        // 反距离权重插值生成格网点集
          let polygons = geom.coordinates[0];
        let extent = geom.extent;
        var collection = turf.interpolate(points, (extent[2] - extent[0]) / 100, { gridType: 'points', property: 'value', units: 'degrees' });
        var features;
        let breaks = params[type][layerid].breaks;
        if (type === "poygon") {
            // 等值面生成
            features = turf.isobands(collection, breaks, { zProperty: 'value' });
            const sortArea = (a, b) => {
                return turf.area(b) - turf.area(a);
            };
            //按照面积对图层进行排序,规避turf的一个bug
            features.features.sort(sortArea)
        } else if (type === "line") {
            // 等值线生成
            features = turf.isolines(collection, breaks, { zProperty: 'value' });
        }
        let intersectfeatures = []
        let polygon = turf.polygon(coord);
        features.features.forEach(feature => {
            let intersection = turf.intersect(polygon, feature);
            if (intersection) {
                intersection.properties = feature.properties;
                intersectfeatures.push(intersection);
            }
        });
        let intersections = turf.featureCollection(intersectfeatures);
       
    } else {
        alert("有效样点个数不足,无法插值");
    }
}

泰森多边形

// geom裁剪范围坐标 items点集[{longitude:108,latitude:34,value}]  filed字段名
export const drawTsdbx = (geom, items, filed) => {
    let bbs = [];
    items.forEach(item => {
        bbs.push(turf.point([item.longitude, item.latitude], { value: item[filed] }));
    });
    if (bbs.length > 3) {
        var points = turf.featureCollection(bbs);
         let coord = geom.coordinates[0];
        let extent = geom.extent;
        var features = turf.voronoi(points, { bbox: extent });
        let intersectfeatures = []
        let polygon = turf.polygon(coord);
        features.features.forEach(feature => {
            let intersection = turf.intersect(polygon, feature);
            if (intersection) {
                intersection.properties = feature.properties;
                intersectfeatures.push(intersection);
            }
        });
        let intersections = turf.featureCollection(intersectfeatures);
    
    } else {
        alert("有效样点个数不足,无法计算");
    }
}


TIN三角网

// geom 裁剪范围坐标 items点集[{longitude:108,latitude:34,value}] filed字段名
export const drawTin = (geom, items, filed) => {
    let bbs = [];
    items.forEach(item => {
        bbs.push(turf.point([item.longitude, item.latitude], { value: item[filed] }));
    });
    if (bbs.length > 3) {
        var points = turf.featureCollection(bbs);
         let coord = geom.coordinates[0];
      
        var features = turf.tin(points, 'value');
        let intersectfeatures = []
        let polygon = turf.polygon(coord);
        features.features.forEach(feature => {
            let intersection = turf.intersect(polygon, feature);
            if (intersection) {
                intersection.properties = feature.properties;
                intersectfeatures.push(intersection);
            }
        });
        let intersections = turf.featureCollection(intersectfeatures);
      
    } else {
        alert("有效样点个数不足,无法计算");
    }
}

总结

IDW 法概念很简单,每个内插点 (网格) 的值与邻近样本点的关系是距离,距离越远关系越小。所以取值点与样本点间的距离为权重进行加权平均,离内插点越近的样本点赋予的权重越大。

TIN 是不规则三角网,在电脑视觉领域或是GIS都很常见,跟前面 IDW 法是内插在规则的形状中有所不同,TIN 组成的不规则三角网是将样本点连成连续的三角网,而在众多产生三角网的算法中,Delaunay 三角化是公认最佳解:
Delaunay 三网化:数据中任三点取其外置圆,若此圆内没有包含任何其它点,则这三角形加入三角网中。这样的目的是让三角形都能越接近正三角形,狭长得三角形出现机会越低,因为三角形三边长若越接近,外置圆越小。
另外,GIS 领域有很多其他更多内插方法,例如 Bilinear, Kriging, nearest neighbor 等等

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
要在 React.js 和 Mapbox 地图上实现测距功能,可以使用 Mapbox GL JS 库结合 Turf.js 库来实现。 首先,确保你已经在 React 项目中安装了 mapbox-gl 和 turf 库: ```shell npm install mapbox-gl turf ``` 然后,在你的 React 组件中引入所需的库: ```javascript import React, { useRef, useEffect } from 'react'; import mapboxgl from 'mapbox-gl'; import * as turf from '@turf/turf'; ``` 接下来,在你的组件函数中创建地图容器和引用: ```javascript const MapComponent = () => { const mapContainerRef = useRef(null); useEffect(() => { // 初始化地图 mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; const map = new mapboxgl.Map({ container: mapContainerRef.current, style: 'mapbox://styles/mapbox/streets-v11', center: [lng, lat], // 设置地图初始中心点经纬度 zoom: 10, // 设置初始缩放级别 }); // 添加地图控件 map.addControl(new mapboxgl.NavigationControl()); // 添加测距功能 let lineString = turf.lineString([]); let distance = 0; let measureStartPoint = null; map.on('click', (e) => { if (!measureStartPoint) { measureStartPoint = e.lngLat; } else { const endPoint = e.lngLat; distance += turf.distance(measureStartPoint, endPoint); lineString.geometry.coordinates.push([ measureStartPoint.lng, measureStartPoint.lat, ]); lineString.geometry.coordinates.push([endPoint.lng, endPoint.lat]); map.getSource('measure-line').setData(lineString); measureStartPoint = null; } }); map.on('load', () => { // 添加测距线 map.addSource('measure-line', { type: 'geojson', data: { type: 'Feature', geometry: lineString.geometry, }, }); map.addLayer({ id: 'measure-line', type: 'line', source: 'measure-line', paint: { 'line-color': '#0080ff', 'line-width': 2, }, }); }); return () => map.remove(); // 清除地图实例 }, []); return <div ref={mapContainerRef} style={{ width: '100%', height: '400px' }} />; }; ``` 请注意,上述代码中需要替换 `YOUR_MAPBOX_ACCESS_TOKEN` 为你自己的 Mapbox 访问令牌。 以上代码创建了一个地图容器和引用,并在组件加载时初始化地图。通过点击地图,你可以在不同位置之间绘制线段并计算总距离。测距线的样式可以根据需要进行自定义。 希望这可以帮助你在 React.js 和 Mapbox 地图上实现测距功能!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

紫雪giser

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值