SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="referrer" content="never">
  <title>克里金插值</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
  <script src="https://cdns.jsrun.top/res/roshomon/simplegis-umd-v0188.js"></script>
  <script src="https://cdns.jsrun.top/res/roshomon/data.js"></script>

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    .map {
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="map" class="map"></div>
  <script>
    // 地图参数
    const mapOptions = {
      "center": [119.779, 32.889],// 地图中心点
      "zoom": 7,
    }
    // 初始化地图
    let map = new simplegis.MapX("map", mapOptions)
    // 底图参数
    const baseLayerOptions = {
      "urlTemplate": "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    }
    // 初始化底图
    let baseLayer = new simplegis.TileLayerX("gaodemap", baseLayerOptions)
    // 加载底图
    map.setBaseLayer(baseLayer)

    const pointArray = [
      { "lat": 32.0000, "lon": 118.8000, "value": 46 },
      { "lat": 31.5800, "lon": 120.3200, "value": 100 },
      { "lat": 32.2200, "lon": 119.4700, "value": 40 },
      { "lat": 31.3200, "lon": 120.6300, "value": 43 },
      { "lat": 32.0200, "lon": 120.8500, "value": 52 },
      { "lat": 32.4200, "lon": 119.4200, "value": 123 },
      { "lat": 33.3800, "lon": 120.1300, "value": 85 },
      { "lat": 34.2800, "lon": 117.1500, "value": 154 },
      { "lat": 33.5300, "lon": 119.1700, "value": 172 },
      { "lat": 34.5800, "lon": 119.1700, "value": 216 },
      { "lat": 31.7700, "lon": 119.9300, "value": 226 },
      { "lat": 32.5000, "lon": 119.9300, "value": 216 },
      { "lat": 33.9500, "lon": 118.2300, "value": 204 }];



    const colorArr = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"]
    let breaks = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];

    let max = -1
    pointArray.forEach(i => {
      if (i.value > max) {
        max = i.value
      }
    })
    let dataset = pointArray.map(i => {
      return [i.lon, i.lat, i.value / max]
    })

    // 生成插值结果(多边形集合数据)
    const contourRes = simplegis.Analysis.krigingVectorContour(dataset, // 点geojson
      breaks,
      {
        model: 'exponential',
        sigma2: 0,
        alpha: 226
      },
      jiangsu
    )

    let stops = []
    for (let index = 0; index < breaks.length - 1; index++) {
      stops.push([`${breaks[index]}-${breaks[index + 1]}`, colorArr[index]])
    }
    // 添加图层
    const polygonLayer = new simplegis.VLayer('polygon', contourRes, {
      style: {
        symbol: {
          polygonFill: {
            type: 'categorical',
            property: 'value',
            stops: stops,
            default: 'white'
          },
          polygonOpacity: 1
        }
      }
    }).addTo(map);
  </script>
</body>

</html>