openlayers加kriging出等值线图

已于 2023-06-01 15:17:24 修改
阅读量1.4k 收藏 7
点赞数 2
文章标签： html css 前端
于 2023-04-28 16:24:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwr888/article/details/130428821
版权

openlayers加kriging出等值线图

方法一

效果图

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>前端空间插值</title>
    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="./ol3/ol.css" type="text/css">
    <script src="./ol3/ol.js"></script>
    <script>
  var data={
        "features": [
            {
                "attributes": {
                    "FID": 0,
                    "id": 1,
                    "name": "Beijing US Embassy",
                    "x": 116.468,
                    "y": 39.954999999999998,
                    "z": 46,
                    "xu": 454558.72859999997,
                    "yu": 4422898.159
                },
                "geometry": {
                    "x": 116.468,
                    "y": 39.954999999999998
                }
            },
            {
                "attributes": {
                    "FID": 1,
                    "id": 2,
                    "name": "Temple of Heaven",
                    "x": 116.407,
                    "y": 39.886000000000003,
                    "z": 36,
                    "xu": 449297.45990000002,
                    "yu": 4415272.716
                },
                "geometry": {
                    "x": 116.407,
                    "y": 39.886000000000003
                }
            },
            {
                "attributes": {
                    "FID": 2,
                    "id": 3,
                    "name": "Haidian Beijing Botanical Garden",
                    "x": 116.20699999999999,
                    "y": 40.002000000000002,
                    "z": 40,
                    "xu": 432311.35320000001,
                    "yu": 4428280.3169999998
                },
                "geometry": {
                    "x": 116.20699999999999,
                    "y": 40.002000000000002
                }
            },
            {
                "attributes": {
                    "FID": 3,
                    "id": 4,
                    "name": "Chaoyang Olympic Sports Center116.397",
                    "x": 116.39700000000001,
                    "y": 39.981999999999999,
                    "z": 43,
                    "xu": 448514.42090000003,
                    "yu": 4425933.4840000002
                },
                "geometry": {
                    "x": 116.39700000000001,
                    "y": 39.981999999999999
                }
            },
            {
                "attributes": {
                    "FID": 4,
                    "id": 5,
                    "name": "Chaoyang Agricultural Exhibition Hall",
                    "x": 116.461,
                    "y": 39.936999999999998,
                    "z": 52,
                    "xu": 453948.74660000001,
                    "yu": 4420903.926
                },
                "geometry": {
                    "x": 116.461,
                    "y": 39.936999999999998
                }
            },
            {
                "attributes": {
                    "FID": 5,
                    "id": 6,
                    "name": "Liangxiang",
                    "x": 116.136,
                    "y": 39.741999999999997,
                    "z": 123,
                    "xu": 425971.88909999997,
                    "yu": 4399479.2439999999
                },
                "geometry": {
                    "x": 116.136,
                    "y": 39.741999999999997
                }
            },
            {
                "attributes": {
                    "FID": 6,
                    "id": 7,
                    "name": "Fengtai Yungang",
                    "x": 116.146,
                    "y": 39.823999999999998,
                    "z": 85,
                    "xu": 426915.51539999997,
                    "yu": 4408572.0729999999
                },
                "geometry": {
                    "x": 116.146,
                    "y": 39.823999999999998
                }
            },
            {
                "attributes": {
                    "FID": 7,
                    "id": 8,
                    "name": "Shunyi New Town",
                    "x": 116.655,
                    "y": 40.127000000000002,
                    "z": 154,
                    "xu": 470605.50309999997,
                    "yu": 4441910.1670000004
                },
                "geometry": {
                    "x": 116.655,
                    "y": 40.127000000000002
                }
            },
            {
                "attributes": {
                    "FID": 8,
                    "id": 12,
                    "name": "Donggaocun Zhen",
                    "x": 117.12,
                    "y": 40.100000000000001,
                    "z": 172,
                    "xu": 510228.20750000002,
                    "yu": 4438863.2359999996
                },
                "geometry": {
                    "x": 117.12,
                    "y": 40.100000000000001
                }
            },
            {
                "attributes": {
                    "FID": 9,
                    "id": 13,
                    "name": "Tongzhou New Town",
                    "x": 116.663,
                    "y": 39.886000000000003,
                    "z": 216,
                    "xu": 471185.97159999999,
                    "yu": 4415158.7980000004
                },
                "geometry": {
                    "x": 116.663,
                    "y": 39.886000000000003
                }
            },
            {
                "attributes": {
                    "FID": 10,
                    "id": 14,
                    "name": "Huangcunzhen",
                    "x": 116.404,
                    "y": 39.718000000000004,
                    "z": 226,
                    "xu": 448916.78909999999,
                    "yu": 4396628.5209999997
                },
                "geometry": {
                    "x": 116.404,
                    "y": 39.718000000000004
                }
            },
            {
                "attributes": {
                    "FID": 11,
                    "id": 15,
                    "name": "BDA",
                    "x": 116.506,
                    "y": 39.795000000000002,
                    "z": 216,
                    "xu": 457706.38530000002,
                    "yu": 4405121.3250000002
                },
                "geometry": {
                    "x": 116.506,
                    "y": 39.795000000000002
                }
            },
            {
                "attributes": {
                    "FID": 12,
                    "id": 16,
                    "name": "Yufazhen",
                    "x": 116.3,
                    "y": 39.520000000000003,
                    "z": 204,
                    "xu": 439831.65490000002,
                    "yu": 4374718.0180000002
                },
                "geometry": {
                    "x": 116.3,
                    "y": 39.520000000000003
                }
            },
            {
                "attributes": {
                    "FID": 13,
                    "id": 17,
                    "name": "Yongledianzhen",
                    "x": 116.783,
                    "y": 39.712000000000003,
                    "z": 198,
                    "xu": 481399.35399999999,
                    "yu": 4395815.3370000003
                },
                "geometry": {
                    "x": 116.783,
                    "y": 39.712000000000003
                }
            },
            {
                "attributes": {
                    "FID": 14,
                    "id": 18,
                    "name": "Xianghe EPA",
                    "x": 117.009,
                    "y": 39.765999999999998,
                    "z": 204,
                    "xu": 500770.85320000001,
                    "yu": 4401786.0719999997
                },
                "geometry": {
                    "x": 117.009,
                    "y": 39.765999999999998
                }
            },
            {
                "attributes": {
                    "FID": 15,
                    "id": 19,
                    "name": "Badaling Northwest",
                    "x": 115.988,
                    "y": 40.365000000000002,
                    "z": 46,
                    "xu": 414076.95390000002,
                    "yu": 4468761.409
                },
                "geometry": {
                    "x": 115.988,
                    "y": 40.365000000000002
                }
            },
            {
                "attributes": {
                    "FID": 16,
                    "id": 20,
                    "name": "East Fourth Ring Road",
                    "x": 116.483,
                    "y": 39.939,
                    "z": 181,
                    "xu": 455829.68479999999,
                    "yu": 4421114.7860000003
                },
                "geometry": {
                    "x": 116.483,
                    "y": 39.939
                }
            },
            {
                "attributes": {
                    "FID": 17,
                    "id": 21,
                    "name": "Yanqing town",
                    "x": 115.97199999999999,
                    "y": 40.453000000000003,
                    "z": 59,
                    "xu": 412832.08510000003,
                    "yu": 4478545.159
                },
                "geometry": {
                    "x": 115.97199999999999,
                    "y": 40.453000000000003
                }
            },
            {
                "attributes": {
                    "FID": 18,
                    "id": 22,
                    "name": "Miyun Reservoir",
                    "x": 116.911,
                    "y": 40.499000000000002,
                    "z": 63,
                    "xu": 492458.57429999998,
                    "yu": 4483147.5360000003
                },
                "geometry": {
                    "x": 116.911,
                    "y": 40.499000000000002
                }
            },
            {
                "attributes": {
                    "FID": 19,
                    "id": 23,
                    "name": "Haidian Wanliu",
                    "x": 116.28700000000001,
                    "y": 39.987000000000002,
                    "z": 180,
                    "xu": 439126.71720000001,
                    "yu": 4426557.75
                },
                "geometry": {
                    "x": 116.28700000000001,
                    "y": 39.987000000000002
                }
            },
            {
                "attributes": {
                    "FID": 20,
                    "id": 24,
                    "name": "Yongdingmen Inner St",
                    "x": 116.39400000000001,
                    "y": 39.875999999999998,
                    "z": 196,
                    "xu": 448178.40250000003,
                    "yu": 4414170.284
                },
                "geometry": {
                    "x": 116.39400000000001,
                    "y": 39.875999999999998
                }
            },
            {
                "attributes": {
                    "FID": 21,
                    "id": 25,
                    "name": "Jianshe Road",
                    "x": 117.304,
                    "y": 39.719000000000001,
                    "z": 55,
                    "xu": 526055.42509999999,
                    "yu": 4396613.8959999997
                },
                "geometry": {
                    "x": 117.304,
                    "y": 39.719000000000001
                }
            },
            {
                "attributes": {
                    "FID": 22,
                    "id": 26,
                    "name": "Ligong, Chengde",
                    "x": 117.938,
                    "y": 41.011000000000003,
                    "z": 70,
                    "xu": 578874.61600000004,
                    "yu": 4540401.8559999997
                },
                "geometry": {
                    "x": 117.938,
                    "y": 41.011000000000003
                }
            },
            {
                "attributes": {
                    "FID": 23,
                    "id": 27,
                    "name": "Fengning County City Hall",
                    "x": 116.652,
                    "y": 41.215000000000003,
                    "z": 59,
                    "xu": 470827.95390000002,
                    "yu": 4562682.9199999999
                },
                "geometry": {
                    "x": 116.652,
                    "y": 41.215000000000003
                }
            },
            {
                "attributes": {
                    "FID": 24,
                    "id": 28,
                    "name": "Xiahuayuan EPA",
                    "x": 115.29600000000001,
                    "y": 40.508000000000003,
                    "z": 61,
                    "xu": 355627.29269999999,
                    "yu": 4485537.4510000004
                },
                "geometry": {
                    "x": 115.29600000000001,
                    "y": 40.508000000000003
                }
            },
            {
                "attributes": {
                    "FID": 25,
                    "id": 29,
                    "name": "Yuxian Secondary School",
                    "x": 114.596,
                    "y": 39.845999999999997,
                    "z": 61,
                    "xu": 294324.1188,
                    "yu": 4413430.4780000001
                },
                "geometry": {
                    "x": 114.596,
                    "y": 39.845999999999997
                }
            },
            {
                "attributes": {
                    "FID": 26,
                    "id": 30,
                    "name": "Zhouzhou Monitoring Stations",
                    "x": 116.03400000000001,
                    "y": 39.491999999999997,
                    "z": 80,
                    "xu": 416933.99089999998,
                    "yu": 4371822.0190000003
                },
                "geometry": {
                    "x": 116.03400000000001,
                    "y": 39.491999999999997
                }
            },
            {
                "attributes": {
                    "FID": 27,
                    "id": 31,
                    "name": "Guan Party School, Langfang",
                    "x": 116.30500000000001,
                    "y": 39.445,
                    "z": 70,
                    "xu": 440197.23119999998,
                    "yu": 4366391.0480000004
                },
                "geometry": {
                    "x": 116.30500000000001,
                    "y": 39.445
                }
            },
            {
                "attributes": {
                    "FID": 28,
                    "id": 32,
                    "name": "Guyuan County welfare",
                    "x": 115.681,
                    "y": 41.667999999999999,
                    "z": 63,
                    "xu": 390196.44390000001,
                    "yu": 4613756.0429999996
                },
                "geometry": {
                    "x": 115.681,
                    "y": 41.667999999999999
                }
            }
        ]
  }
    </script>
    <script src="kriging-2014-01-08.min.js"></script>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
function getCanvasVectorContext(canvas, extent, resolution, pixelRatio, size, projection) {
    canvas.width = size[0] * pixelRatio;
    canvas.height = size[1] * pixelRatio;
    let width = Math.round(size[0] * pixelRatio);
    let height = Math.round(size[1] * pixelRatio);
    let context = canvas.getContext('2d');

    let coordinateToPixelTransform = ol.transform.create();
    let pixelTransform = ol.transform.create();
    let inversePixelTransform = ol.transform.create();
 
    let rotation = map.getView().getRotation();
    let center = map.getView().getCenter();
    composeTransform(coordinateToPixelTransform,
        size[0] / 2, size[1] / 2,
        1 / resolution, -1 / resolution,
        -rotation,
        -center[0], -center[1]);
    composeTransform(pixelTransform,
        size[0] / 2, size[1] / 2,
        1 / pixelRatio, 1 / pixelRatio,
        rotation,
        -width / 2, -height / 2
    );
    makeInverse(inversePixelTransform, pixelTransform);
    const transform = multiplyTransform(inversePixelTransform.slice(), coordinateToPixelTransform);
    const squaredTolerance = getSquaredTolerance(resolution, pixelRatio);
    let userTransform;
    const userProjection = getUserProjection();
    if (userProjection) {
        userTransform = getTransformFromProjections(userProjection, projection);
    }
    return new CanvasImmediateRenderer(
        context, pixelRatio, extent, transform,
        rotation, squaredTolerance, userTransform);
}

        let params = {
            mapCenter: [116.40, 39.90],
            krigingModel: 'exponential',//model还可选'gaussian','spherical',exponential
            krigingSigma2: 0,
            krigingAlpha: 100,//226
            canvasAlpha: 0.75,//canvas图层透明度
            colors:["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf","#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"],
            colors0: ["#00A600", "#01A600", "#03A700", "#04A700", "#05A800", "#07A800", "#08A900", "#09A900", "#0BAA00", "#0CAA00", "#0DAB00", "#0FAB00", "#10AC00", "#12AC00", "#13AD00", "#14AD00", "#16AE00", "#17AE00", "#19AF00", "#1AAF00", "#1CB000", "#1DB000", "#1FB100", "#20B100", "#22B200", "#23B200", "#25B300", "#26B300", "#28B400", "#29B400", "#2BB500", "#2CB500", "#2EB600", "#2FB600", "#31B700", "#33B700", "#34B800", "#36B800", "#37B900", "#39B900", "#3BBA00", "#3CBA00", "#3EBB00", "#3FBB00", "#41BC00", "#43BC00", "#44BD00", "#46BD00", "#48BE00", "#49BE00", "#4BBF00", "#4DBF00", "#4FC000", "#50C000", "#52C100", "#54C100", "#55C200", "#57C200", "#59C300", "#5BC300", "#5DC400", "#5EC400", "#60C500", "#62C500", "#64C600", "#66C600", "#67C700", "#69C700", "#6BC800", "#6DC800", "#6FC900", "#71C900", "#72CA00", "#74CA00", "#76CB00", "#78CB00", "#7ACC00", "#7CCC00", "#7ECD00", "#80CD00", "#82CE00", "#84CE00", "#86CF00", "#88CF00", "#8AD000", "#8BD000", "#8DD100", "#8FD100", "#91D200", "#93D200", "#95D300", "#97D300", "#9AD400", "#9CD400", "#9ED500", "#A0D500", "#A2D600", "#A4D600", "#A6D700", "#A8D700", "#AAD800", "#ACD800", "#AED900", "#B0D900", "#B2DA00", "#B5DA00", "#B7DB00", "#B9DB00", "#BBDC00", "#BDDC00", "#BFDD00", "#C2DD00", "#C4DE00", "#C6DE00", "#C8DF00", "#CADF00", "#CDE000", "#CFE000", "#D1E100", "#D3E100", "#D6E200", "#D8E200", "#DAE300", "#DCE300", "#DFE400", "#E1E400", "#E3E500", "#E6E600", "#E6E402", "#E6E204", "#E6E105", "#E6DF07", "#E6DD09", "#E6DC0B", "#E6DA0D", "#E6D90E", "#E6D710", "#E6D612", "#E7D414", "#E7D316", "#E7D217", "#E7D019", "#E7CF1B", "#E7CE1D", "#E7CD1F", "#E7CB21", "#E7CA22", "#E7C924", "#E8C826", "#E8C728", "#E8C62A", "#E8C52B", "#E8C42D", "#E8C32F", "#E8C231", "#E8C133", "#E8C035", "#E8BF36", "#E9BE38", "#E9BD3A", "#E9BC3C", "#E9BB3E", "#E9BB40", "#E9BA42", "#E9B943", "#E9B945", "#E9B847", "#E9B749", "#EAB74B", "#EAB64D", "#EAB64F", "#EAB550", "#EAB552", "#EAB454", "#EAB456", "#EAB358", "#EAB35A", "#EAB35C", "#EBB25D", "#EBB25F", "#EBB261", "#EBB263", "#EBB165", "#EBB167", "#EBB169", "#EBB16B", "#EBB16C", "#EBB16E", "#ECB170", "#ECB172", "#ECB174", "#ECB176", "#ECB178", "#ECB17A", "#ECB17C", "#ECB17E", "#ECB27F", "#ECB281", "#EDB283", "#EDB285", "#EDB387", "#EDB389", "#EDB38B", "#EDB48D", "#EDB48F", "#EDB591", "#EDB593", "#EDB694", "#EEB696", "#EEB798", "#EEB89A", "#EEB89C", "#EEB99E", "#EEBAA0", "#EEBAA2", "#EEBBA4", "#EEBCA6", "#EEBDA8", "#EFBEAA", "#EFBEAC", "#EFBFAD", "#EFC0AF", "#EFC1B1", "#EFC2B3", "#EFC3B5", "#EFC4B7", "#EFC5B9", "#EFC7BB", "#F0C8BD", "#F0C9BF", "#F0CAC1", "#F0CBC3", "#F0CDC5", "#F0CEC7", "#F0CFC9", "#F0D1CB", "#F0D2CD", "#F0D3CF", "#F1D5D1", "#F1D6D3", "#F1D8D5", "#F1D9D7", "#F1DBD8", "#F1DDDA", "#F1DEDC", "#F1E0DE", "#F1E2E0", "#F1E3E2", "#F2E5E4", "#F2E7E6", "#F2E9E8", "#F2EBEA", "#F2ECEC", "#F2EEEE", "#F2F0F0", "#F2F2F2"]
        };
        let baseLayer = new ol.layer.Tile({
            title: "base",
            source: new ol.source.OSM()
        });
        let map = new ol.Map({
            target: 'map',
            layers: [baseLayer],
            view: new ol.View({
                center: params.mapCenter,
                projection: 'EPSG:4326',
                zoom: 8
            })
        });
        let WFSVectorSource = new ol.source.Vector();
        let WFSVectorLayer = new ol.layer.Vector(
            {
                source: WFSVectorSource,
            });
        map.addLayer(WFSVectorLayer);
        //创建要素
        for (let i = 0; i < data.features.length; i++) {
            let feature = new ol.Feature({
                geometry: new ol.geom.Point([data.features[i].attributes.x, data.features[i].attributes.y]),
                value: data.features[i].attributes.z
            });
            feature.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 6,
                    fill: new ol.style.Fill({ color: "#00F" })
                })
            }));
            WFSVectorSource.addFeature(feature);
        }
        //定义裁剪边界
        let coord = [[
            [117.315375, 40.181212],
            [117.367916, 40.135762],
            [116.751758, 40.002595],
            [116.754136, 39.870341],
            [116.913383, 39.804999],
            [116.901858, 39.680614],
            [116.788145, 39.56255],
            [116.535646, 39.590346],
            [116.392103, 39.491124],
            [116.4293, 39.433841],
            [116.387072, 39.417336],
            [116.237232, 39.476253],
            [116.172242, 39.578854],
            [115.728745, 39.479123],
            [115.610225, 39.588658],
            [115.508537, 39.59137],
            [115.416399, 39.733407],
            [115.416624, 39.776734],
            [115.550565, 39.772964],
            [115.408433, 40.015829],
            [115.85422, 40.144999],
            [115.922315, 40.216777],
            [115.708758, 40.499032],
            [115.89819, 40.585919],
            [116.03778, 40.577909],
            [116.208725, 40.741562],
            [116.454984, 40.739689],
            [116.297615, 40.910402],
            [116.43816, 40.870116],
            [116.405424, 40.94854],
            [116.537137, 40.9661],
            [116.621495, 41.057333],
            [116.703349, 40.853574],
            [116.93405, 40.675155],
            [117.454502, 40.647216],
            [117.387854, 40.533274],
            [117.166811, 40.503979],
            [117.164198, 40.373887],
            [117.315375, 40.181212]]];
        let clipgeom = new ol.geom.Polygon(coord);
        //绘制kriging插值图
        let canvasLayer = null;
        let drawKriging =function (extent){
            let values = [], lngs = [], lats = [];
            WFSVectorSource.forEachFeature(function (feature) {
                values.push(feature.getProperties().value);
                lngs.push(feature.getGeometry().getCoordinates()[0]);
                lats.push(feature.getGeometry().getCoordinates()[1]);
            })
            console.log(values.length)
            if (values.length > 3) {
                let letiogram = kriging.train(values, lngs, lats,
                    params.krigingModel, params.krigingSigma2, params.krigingAlpha);
                let ex = clipgeom.getExtent();
                let grid = kriging.grid(coord, letiogram, (ex[2] - ex[0]) / 500);
                //移除已有图层
                if (canvasLayer !== null) {
                    map.removeLayer(canvasLayer);
                }
                //创建新图层
                var canvas = document.createElement('canvas');
                canvasLayer = new ol.layer.Image({
                    source: new ol.source.ImageCanvas({
                        canvasFunction: (extent, resolution, pixelRatio, size, projection) => {
                            console.log(extent);
                            canvas.width = size[0];console.log(size[0]);
                            canvas.height = size[1];console.log(size[1]);
                            canvas.style.display = 'block';
                            //设置canvas透明度
                            //canvas.getContext('2d').globalAlpha = params.canvasAlpha;//放开后有网格线，
                            //canvas.getContext('2d').rect(50,20,200,100);
                            //canvas.getContext('2d').lineWidth = "20";
                            //canvas.getContext('2d').strokeStyle="#0000ff";
                            //canvas.getContext('2d').shadowColor="rgba(0, 0, 255, 0)";
                            //canvas.getContext('2d').strokeStyle="rgba(255,192,203)";
                            //canvas.getContext('2d').fillStyle = "rgba(0,0,255,0.5)";
                            // 先填充颜色
                            //canvas.getContext('2d').fill();
                            // 后画轮廓线
                            //canvas.getContext('2d').stroke();
                            //使用分层设色渲染
                            kriging.plot(canvas, grid, [extent[0], extent[2]], [extent[1], extent[3]], params.colors);
                            return canvas;
                        },
                        projection: 'EPSG:4326'
                    })
                });
                //向map添加图层
                map.addLayer(canvasLayer);
                //创建新图层
                canvasLayer1 = new ol.layer.Image({
                    source: new ol.source.ImageCanvas({
                        canvasFunction: (extent, resolution, pixelRatio, size, projection) => {
                            let canvas = document.createElement('canvas');
                            var vc = getCanvasVectorContext(canvas, extent, resolution, pixelRatio, size, projection);
                            //使用VectorContext对象绘制要素数组
                            randomFeatures.forEach(item => {
                            vc.drawFeature(item, lineStyle)
                            })
                            console.log(new Date().getTime());
                            return canvas;
                        },
                        projection: 'EPSG:4326'
                    })
                });
                //向map添加图层
                //map.addLayer(canvasLayer1);
            } else {
                alert("有效样点个数不足，无法插值");
            }
        }
        //首次加载，自动渲染一次差值图
        let extent = clipgeom.getExtent();
        drawKriging(extent);
        
    </script>
</body>
</html>

 方法二

效果图

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>克里金空间插值</title>
    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="./ol3/ol.css" type="text/css">
    <script src="./ol3/ol.js"></script>
    <script src="kriging-2014-01-08.min.js"></script>
    <script src='turf6.5.0.min.js'></script>
    <script>
  var data={
        "features": [
            {
                "attributes": {
                    "FID": 0,
                    "id": 1,
                    "name": "Beijing US Embassy",
                    "x": 116.468,
                    "y": 39.954999999999998,
                    "z": 46,
                    "xu": 454558.72859999997,
                    "yu": 4422898.159
                },
                "geometry": {
                    "x": 116.468,
                    "y": 39.954999999999998
                }
            },
            {
                "attributes": {
                    "FID": 1,
                    "id": 2,
                    "name": "Temple of Heaven",
                    "x": 116.407,
                    "y": 39.886000000000003,
                    "z": 36,
                    "xu": 449297.45990000002,
                    "yu": 4415272.716
                },
                "geometry": {
                    "x": 116.407,
                    "y": 39.886000000000003
                }
            },
            {
                "attributes": {
                    "FID": 2,
                    "id": 3,
                    "name": "Haidian Beijing Botanical Garden",
                    "x": 116.20699999999999,
                    "y": 40.002000000000002,
                    "z": 40,
                    "xu": 432311.35320000001,
                    "yu": 4428280.3169999998
                },
                "geometry": {
                    "x": 116.20699999999999,
                    "y": 40.002000000000002
                }
            },
            {
                "attributes": {
                    "FID": 3,
                    "id": 4,
                    "name": "Chaoyang Olympic Sports Center116.397",
                    "x": 116.39700000000001,
                    "y": 39.981999999999999,
                    "z": 43,
                    "xu": 448514.42090000003,
                    "yu": 4425933.4840000002
                },
                "geometry": {
                    "x": 116.39700000000001,
                    "y": 39.981999999999999
                }
            },
            {
                "attributes": {
                    "FID": 4,
                    "id": 5,
                    "name": "Chaoyang Agricultural Exhibition Hall",
                    "x": 116.461,
                    "y": 39.936999999999998,
                    "z": 52,
                    "xu": 453948.74660000001,
                    "yu": 4420903.926
                },
                "geometry": {
                    "x": 116.461,
                    "y": 39.936999999999998
                }
            },
            {
                "attributes": {
                    "FID": 5,
                    "id": 6,
                    "name": "Liangxiang",
                    "x": 116.136,
                    "y": 39.741999999999997,
                    "z": 123,
                    "xu": 425971.88909999997,
                    "yu": 4399479.2439999999
                },
                "geometry": {
                    "x": 116.136,
                    "y": 39.741999999999997
                }
            },
            {
                "attributes": {
                    "FID": 6,
                    "id": 7,
                    "name": "Fengtai Yungang",
                    "x": 116.146,
                    "y": 39.823999999999998,
                    "z": 85,
                    "xu": 426915.51539999997,
                    "yu": 4408572.0729999999
                },
                "geometry": {
                    "x": 116.146,
                    "y": 39.823999999999998
                }
            },
            {
                "attributes": {
                    "FID": 7,
                    "id": 8,
                    "name": "Shunyi New Town",
                    "x": 116.655,
                    "y": 40.127000000000002,
                    "z": 154,
                    "xu": 470605.50309999997,
                    "yu": 4441910.1670000004
                },
                "geometry": {
                    "x": 116.655,
                    "y": 40.127000000000002
                }
            },
            {
                "attributes": {
                    "FID": 8,
                    "id": 12,
                    "name": "Donggaocun Zhen",
                    "x": 117.12,
                    "y": 40.100000000000001,
                    "z": 172,
                    "xu": 510228.20750000002,
                    "yu": 4438863.2359999996
                },
                "geometry": {
                    "x": 117.12,
                    "y": 40.100000000000001
                }
            },
            {
                "attributes": {
                    "FID": 9,
                    "id": 13,
                    "name": "Tongzhou New Town",
                    "x": 116.663,
                    "y": 39.886000000000003,
                    "z": 216,
                    "xu": 471185.97159999999,
                    "yu": 4415158.7980000004
                },
                "geometry": {
                    "x": 116.663,
                    "y": 39.886000000000003
                }
            },
            {
                "attributes": {
                    "FID": 10,
                    "id": 14,
                    "name": "Huangcunzhen",
                    "x": 116.404,
                    "y": 39.718000000000004,
                    "z": 226,
                    "xu": 448916.78909999999,
                    "yu": 4396628.5209999997
                },
                "geometry": {
                    "x": 116.404,
                    "y": 39.718000000000004
                }
            },
            {
                "attributes": {
                    "FID": 11,
                    "id": 15,
                    "name": "BDA",
                    "x": 116.506,
                    "y": 39.795000000000002,
                    "z": 216,
                    "xu": 457706.38530000002,
                    "yu": 4405121.3250000002
                },
                "geometry": {
                    "x": 116.506,
                    "y": 39.795000000000002
                }
            },
            {
                "attributes": {
                    "FID": 12,
                    "id": 16,
                    "name": "Yufazhen",
                    "x": 116.3,
                    "y": 39.520000000000003,
                    "z": 204,
                    "xu": 439831.65490000002,
                    "yu": 4374718.0180000002
                },
                "geometry": {
                    "x": 116.3,
                    "y": 39.520000000000003
                }
            },
            {
                "attributes": {
                    "FID": 13,
                    "id": 17,
                    "name": "Yongledianzhen",
                    "x": 116.783,
                    "y": 39.712000000000003,
                    "z": 198,
                    "xu": 481399.35399999999,
                    "yu": 4395815.3370000003
                },
                "geometry": {
                    "x": 116.783,
                    "y": 39.712000000000003
                }
            },
            {
                "attributes": {
                    "FID": 14,
                    "id": 18,
                    "name": "Xianghe EPA",
                    "x": 117.009,
                    "y": 39.765999999999998,
                    "z": 204,
                    "xu": 500770.85320000001,
                    "yu": 4401786.0719999997
                },
                "geometry": {
                    "x": 117.009,
                    "y": 39.765999999999998
                }
            },
            {
                "attributes": {
                    "FID": 15,
                    "id": 19,
                    "name": "Badaling Northwest",
                    "x": 115.988,
                    "y": 40.365000000000002,
                    "z": 46,
                    "xu": 414076.95390000002,
                    "yu": 4468761.409
                },
                "geometry": {
                    "x": 115.988,
                    "y": 40.365000000000002
                }
            },
            {
                "attributes": {
                    "FID": 16,
                    "id": 20,
                    "name": "East Fourth Ring Road",
                    "x": 116.483,
                    "y": 39.939,
                    "z": 181,
                    "xu": 455829.68479999999,
                    "yu": 4421114.7860000003
                },
                "geometry": {
                    "x": 116.483,
                    "y": 39.939
                }
            },
            {
                "attributes": {
                    "FID": 17,
                    "id": 21,
                    "name": "Yanqing town",
                    "x": 115.97199999999999,
                    "y": 40.453000000000003,
                    "z": 59,
                    "xu": 412832.08510000003,
                    "yu": 4478545.159
                },
                "geometry": {
                    "x": 115.97199999999999,
                    "y": 40.453000000000003
                }
            },
            {
                "attributes": {
                    "FID": 18,
                    "id": 22,
                    "name": "Miyun Reservoir",
                    "x": 116.911,
                    "y": 40.499000000000002,
                    "z": 63,
                    "xu": 492458.57429999998,
                    "yu": 4483147.5360000003
                },
                "geometry": {
                    "x": 116.911,
                    "y": 40.499000000000002
                }
            },
            {
                "attributes": {
                    "FID": 19,
                    "id": 23,
                    "name": "Haidian Wanliu",
                    "x": 116.28700000000001,
                    "y": 39.987000000000002,
                    "z": 180,
                    "xu": 439126.71720000001,
                    "yu": 4426557.75
                },
                "geometry": {
                    "x": 116.28700000000001,
                    "y": 39.987000000000002
                }
            },
            {
                "attributes": {
                    "FID": 20,
                    "id": 24,
                    "name": "Yongdingmen Inner St",
                    "x": 116.39400000000001,
                    "y": 39.875999999999998,
                    "z": 196,
                    "xu": 448178.40250000003,
                    "yu": 4414170.284
                },
                "geometry": {
                    "x": 116.39400000000001,
                    "y": 39.875999999999998
                }
            },
            {
                "attributes": {
                    "FID": 21,
                    "id": 25,
                    "name": "Jianshe Road",
                    "x": 117.304,
                    "y": 39.719000000000001,
                    "z": 55,
                    "xu": 526055.42509999999,
                    "yu": 4396613.8959999997
                },
                "geometry": {
                    "x": 117.304,
                    "y": 39.719000000000001
                }
            },
            {
                "attributes": {
                    "FID": 22,
                    "id": 26,
                    "name": "Ligong, Chengde",
                    "x": 117.938,
                    "y": 41.011000000000003,
                    "z": 70,
                    "xu": 578874.61600000004,
                    "yu": 4540401.8559999997
                },
                "geometry": {
                    "x": 117.938,
                    "y": 41.011000000000003
                }
            },
            {
                "attributes": {
                    "FID": 23,
                    "id": 27,
                    "name": "Fengning County City Hall",
                    "x": 116.652,
                    "y": 41.215000000000003,
                    "z": 59,
                    "xu": 470827.95390000002,
                    "yu": 4562682.9199999999
                },
                "geometry": {
                    "x": 116.652,
                    "y": 41.215000000000003
                }
            },
            {
                "attributes": {
                    "FID": 24,
                    "id": 28,
                    "name": "Xiahuayuan EPA",
                    "x": 115.29600000000001,
                    "y": 40.508000000000003,
                    "z": 61,
                    "xu": 355627.29269999999,
                    "yu": 4485537.4510000004
                },
                "geometry": {
                    "x": 115.29600000000001,
                    "y": 40.508000000000003
                }
            },
            {
                "attributes": {
                    "FID": 25,
                    "id": 29,
                    "name": "Yuxian Secondary School",
                    "x": 114.596,
                    "y": 39.845999999999997,
                    "z": 61,
                    "xu": 294324.1188,
                    "yu": 4413430.4780000001
                },
                "geometry": {
                    "x": 114.596,
                    "y": 39.845999999999997
                }
            },
            {
                "attributes": {
                    "FID": 26,
                    "id": 30,
                    "name": "Zhouzhou Monitoring Stations",
                    "x": 116.03400000000001,
                    "y": 39.491999999999997,
                    "z": 80,
                    "xu": 416933.99089999998,
                    "yu": 4371822.0190000003
                },
                "geometry": {
                    "x": 116.03400000000001,
                    "y": 39.491999999999997
                }
            },
            {
                "attributes": {
                    "FID": 27,
                    "id": 31,
                    "name": "Guan Party School, Langfang",
                    "x": 116.30500000000001,
                    "y": 39.445,
                    "z": 70,
                    "xu": 440197.23119999998,
                    "yu": 4366391.0480000004
                },
                "geometry": {
                    "x": 116.30500000000001,
                    "y": 39.445
                }
            },
            {
                "attributes": {
                    "FID": 28,
                    "id": 32,
                    "name": "Guyuan County welfare",
                    "x": 115.681,
                    "y": 41.667999999999999,
                    "z": 63,
                    "xu": 390196.44390000001,
                    "yu": 4613756.0429999996
                },
                "geometry": {
                    "x": 115.681,
                    "y": 41.667999999999999
                }
            }
        ]
  }
    </script>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
        let params = {
            mapCenter: [116.40, 39.90],
            krigingModel: 'exponential',//model还可选'gaussian','spherical',exponential
            krigingSigma2: 0,
            krigingAlpha: 100,//226
            canvasAlpha: 0.75,//canvas图层透明度
            colors:["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf","#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"],
            colors0: ["#00A600", "#01A600", "#03A700", "#04A700", "#05A800", "#07A800", "#08A900", "#09A900", "#0BAA00", "#0CAA00", "#0DAB00", "#0FAB00", "#10AC00", "#12AC00", "#13AD00", "#14AD00", "#16AE00", "#17AE00", "#19AF00", "#1AAF00", "#1CB000", "#1DB000", "#1FB100", "#20B100", "#22B200", "#23B200", "#25B300", "#26B300", "#28B400", "#29B400", "#2BB500", "#2CB500", "#2EB600", "#2FB600", "#31B700", "#33B700", "#34B800", "#36B800", "#37B900", "#39B900", "#3BBA00", "#3CBA00", "#3EBB00", "#3FBB00", "#41BC00", "#43BC00", "#44BD00", "#46BD00", "#48BE00", "#49BE00", "#4BBF00", "#4DBF00", "#4FC000", "#50C000", "#52C100", "#54C100", "#55C200", "#57C200", "#59C300", "#5BC300", "#5DC400", "#5EC400", "#60C500", "#62C500", "#64C600", "#66C600", "#67C700", "#69C700", "#6BC800", "#6DC800", "#6FC900", "#71C900", "#72CA00", "#74CA00", "#76CB00", "#78CB00", "#7ACC00", "#7CCC00", "#7ECD00", "#80CD00", "#82CE00", "#84CE00", "#86CF00", "#88CF00", "#8AD000", "#8BD000", "#8DD100", "#8FD100", "#91D200", "#93D200", "#95D300", "#97D300", "#9AD400", "#9CD400", "#9ED500", "#A0D500", "#A2D600", "#A4D600", "#A6D700", "#A8D700", "#AAD800", "#ACD800", "#AED900", "#B0D900", "#B2DA00", "#B5DA00", "#B7DB00", "#B9DB00", "#BBDC00", "#BDDC00", "#BFDD00", "#C2DD00", "#C4DE00", "#C6DE00", "#C8DF00", "#CADF00", "#CDE000", "#CFE000", "#D1E100", "#D3E100", "#D6E200", "#D8E200", "#DAE300", "#DCE300", "#DFE400", "#E1E400", "#E3E500", "#E6E600", "#E6E402", "#E6E204", "#E6E105", "#E6DF07", "#E6DD09", "#E6DC0B", "#E6DA0D", "#E6D90E", "#E6D710", "#E6D612", "#E7D414", "#E7D316", "#E7D217", "#E7D019", "#E7CF1B", "#E7CE1D", "#E7CD1F", "#E7CB21", "#E7CA22", "#E7C924", "#E8C826", "#E8C728", "#E8C62A", "#E8C52B", "#E8C42D", "#E8C32F", "#E8C231", "#E8C133", "#E8C035", "#E8BF36", "#E9BE38", "#E9BD3A", "#E9BC3C", "#E9BB3E", "#E9BB40", "#E9BA42", "#E9B943", "#E9B945", "#E9B847", "#E9B749", "#EAB74B", "#EAB64D", "#EAB64F", "#EAB550", "#EAB552", "#EAB454", "#EAB456", "#EAB358", "#EAB35A", "#EAB35C", "#EBB25D", "#EBB25F", "#EBB261", "#EBB263", "#EBB165", "#EBB167", "#EBB169", "#EBB16B", "#EBB16C", "#EBB16E", "#ECB170", "#ECB172", "#ECB174", "#ECB176", "#ECB178", "#ECB17A", "#ECB17C", "#ECB17E", "#ECB27F", "#ECB281", "#EDB283", "#EDB285", "#EDB387", "#EDB389", "#EDB38B", "#EDB48D", "#EDB48F", "#EDB591", "#EDB593", "#EDB694", "#EEB696", "#EEB798", "#EEB89A", "#EEB89C", "#EEB99E", "#EEBAA0", "#EEBAA2", "#EEBBA4", "#EEBCA6", "#EEBDA8", "#EFBEAA", "#EFBEAC", "#EFBFAD", "#EFC0AF", "#EFC1B1", "#EFC2B3", "#EFC3B5", "#EFC4B7", "#EFC5B9", "#EFC7BB", "#F0C8BD", "#F0C9BF", "#F0CAC1", "#F0CBC3", "#F0CDC5", "#F0CEC7", "#F0CFC9", "#F0D1CB", "#F0D2CD", "#F0D3CF", "#F1D5D1", "#F1D6D3", "#F1D8D5", "#F1D9D7", "#F1DBD8", "#F1DDDA", "#F1DEDC", "#F1E0DE", "#F1E2E0", "#F1E3E2", "#F2E5E4", "#F2E7E6", "#F2E9E8", "#F2EBEA", "#F2ECEC", "#F2EEEE", "#F2F0F0", "#F2F2F2"]
        };
        let baseLayer = new ol.layer.Tile({
            title: "base",
            source: new ol.source.OSM()
        });
        let map = new ol.Map({
            target: 'map',
            layers: [baseLayer],
            view: new ol.View({
                center: params.mapCenter,
                projection: 'EPSG:4326',
                zoom: 8
            })
        });

        //定义裁剪边界
        let coord = [[
            [117.315375, 40.181212],
            [117.367916, 40.135762],
            [116.751758, 40.002595],
            [116.754136, 39.870341],
            [116.913383, 39.804999],
            [116.901858, 39.680614],
            [116.788145, 39.56255],
            [116.535646, 39.590346],
            [116.392103, 39.491124],
            [116.4293, 39.433841],
            [116.387072, 39.417336],
            [116.237232, 39.476253],
            [116.172242, 39.578854],
            [115.728745, 39.479123],
            [115.610225, 39.588658],
            [115.508537, 39.59137],
            [115.416399, 39.733407],
            [115.416624, 39.776734],
            [115.550565, 39.772964],
            [115.408433, 40.015829],
            [115.85422, 40.144999],
            [115.922315, 40.216777],
            [115.708758, 40.499032],
            [115.89819, 40.585919],
            [116.03778, 40.577909],
            [116.208725, 40.741562],
            [116.454984, 40.739689],
            [116.297615, 40.910402],
            [116.43816, 40.870116],
            [116.405424, 40.94854],
            [116.537137, 40.9661],
            [116.621495, 41.057333],
            [116.703349, 40.853574],
            [116.93405, 40.675155],
            [117.454502, 40.647216],
            [117.387854, 40.533274],
            [117.166811, 40.503979],
            [117.164198, 40.373887],
            [117.315375, 40.181212]]];
        let clipgeom = new ol.geom.Polygon(coord);

        //根据裁剪范围随机生成原始点
        var clipPolygonTurf = turf.polygon(coord, { name: 'poly1' });
        let points = turf.randomPoint(200, { bbox: turf.bbox(clipPolygonTurf) });
        turf.featureEach(points, function (currentFeature, featureIndex) {
            currentFeature.properties = { value: (Math.random() * 100).toFixed(2) };
        });
        //原始点图层
        let WFSVectorSource = new ol.source.Vector();
        let WFSVectorLayer = new ol.layer.Vector(
            {
                source: WFSVectorSource,
            });
        map.addLayer(WFSVectorLayer);
        //创建原始点图层要素
        //for (let i = 0; i < points.features.length; i++) {
        for (let i = 0; i < data.features.length; i++) {
            let feature = new ol.Feature({
                geometry: new ol.geom.Point([data.features[i].attributes.x, data.features[i].attributes.y]),
                value: data.features[i].attributes.z
            });
            //let feature = new ol.Feature({
            //    geometry: new ol.geom.Point(points.features[i].geometry.coordinates),
            //    value: points.features[i].properties.value
            //});
            feature.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 6,
                    fill: new ol.style.Fill({ color: "#00F" })
                })
            }));
            WFSVectorSource.addFeature(feature);
        }

        //利用网格计算点集
        const gridFeatureCollection = function (grid) { //, xlim, ylim
            var range =grid.zlim[1] - grid.zlim[0];
            var i, j, x, y, z;
            var n = grid.length;//列数
            var m = grid[0].length;//行数
            var pointArray = [];
            for (i = 0; i < n ; i++)
                for (j = 0; j < m ; j++) {
                    x = (i) * grid.width + grid.xlim[0];
                    y = (j) * grid.width + grid.ylim[0];
                    z = (grid[i][j] - grid.zlim[0]) / range;
                    if (z < 0.0) z = 0.0;
                    if (z > 1.0) z = 1.0;
                    pointArray.push(turf.point([x, y], { value: z }));
                }
            return pointArray;
        }

        let pointVectorLayer = null, vectorLayer = null;
        //绘制kriging插值图
        let drawKriging =function (extent){
            let values = [], lngs = [], lats = [];
            WFSVectorSource.forEachFeature(function (feature) {
                values.push(feature.getProperties().value);
                lngs.push(feature.getGeometry().getCoordinates()[0]);
                lats.push(feature.getGeometry().getCoordinates()[1]);
            });
            //console.log(values.length);
            if (values.length > 3) {
                let letiogram = kriging.train(values, lngs, lats,params.krigingModel, params.krigingSigma2, params.krigingAlpha);
                let ex = clipgeom.getExtent();
                let grid0 = kriging.grid(coord, letiogram, (ex[2] - ex[0]) / 20);//显示网络点用，否则太多显示不了
                let grid = kriging.grid(coord, letiogram, (ex[2] - ex[0]) / 500);//用来生成色斑图

                //使用turf渲染等值面/线
                let fc0 = gridFeatureCollection(grid0); //, [extent[0], extent[2]], [extent[1], extent[3]]
                let fc = gridFeatureCollection(grid); //, [extent[0], extent[2]], [extent[1], extent[3]]

                //移除已有图层
                if (vectorLayer !== null) {
                    map.removeLayer(vectorLayer);
                }
                //添加色斑图图层
                var vectorSource = new ol.source.Vector();
                vectorLayer = new ol.layer.Vector({
                    source: vectorSource,
                    opacity: 0.7,
                    style: function (feature) {
                        //console.log(feature.get('value').split('-')[0]);
                        console.log(feature.get('value').split('-')[1]*10);
                        console.log(params.colors[parseFloat(feature.get('value').split('-')[1])*10]);
                        var tempValue = parseFloat(feature.get('value').split('-')[0]) + (feature.get('value').split('-')[1]-feature.get('value').split('-')[0])/2;
                        var style = new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: params.colors[parseFloat(feature.get('value').split('-')[1]) * 10]
                            })
                        })
                        return style;
                    }
                });
                var collection = turf.featureCollection(fc);
                var breaks = [-0.1,0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];
                var isobands = turf.isobands(collection, breaks, { zProperty: 'value' });
                function sortArea(a,b)
                {
                    return turf.area(b)-turf.area(a);
                }
                //按照面积对图层进行排序，规避turf的一个bug
                isobands.features.sort(sortArea)


                //turf.isobands有点不符合业务预期,只有一个等级时,结果集可能为空,无图形显示,写点程序(找出那一个等级，并添加进结果集)补救下
                //if(features.length == 0){
                //    let maxAttribute = getMaxAttribute(breaks,collection);
                //    let value = maxAttribute;
                //    if(value!=''){
                //        features.push({"type":"Feature","properties":{"value":value},"geometry":boundaries.features[0].geometry,"id":0});
                //    }
                //}

                var polyFeatures = new ol.format.GeoJSON().readFeatures(isobands, {
                    featureProjection: 'EPSG:4326'
                })
                vectorSource.addFeatures(polyFeatures);
                map.addLayer(vectorLayer);

                //移除已有图层
                if (pointVectorLayer !== null) {
                    map.removeLayer(pointVectorLayer);
                }
                //添加grid网格点图层
                let pointVectorSource = new ol.source.Vector();
                pointVectorLayer = new ol.layer.Vector(
                {
                    source: pointVectorSource,
                });
                map.addLayer(pointVectorLayer);
                //创建要素
                for (let i = 0; i < fc0.length; i++) {
                    let feature = new ol.Feature({
                    geometry: new ol.geom.Point([fc0[i].geometry.coordinates[0], fc0[i].geometry.coordinates[1]]),
                      value: fc0[i].properties.value
                    });

                    let showText = feature.getProperties().value?''+feature.getProperties().value.toFixed(2):'0';
                    feature.setStyle(new ol.style.Style({
                        //fill: new ol.style.Fill({
                        //    color: 'rgba(0, 0, 0, 0.3)'
                        //}),
                        //stroke: new ol.style.Stroke({
                        //    color: 'blue',
                        //    width: 2
                        //}),
                        //image: new ol.style.Circle({
                        //    radius: 6,
                       //    fill: new ol.style.Fill({ color: "#FF0000" })
                        //}),
                        text: new ol.style.Text({
                            text: showText,
                            font: 'normal 14px 微软雅黑', //字体样式
                            //font: '10px sans-serif',
                            //font: 'verdana',
                            textAlign: "center", //对齐方式
                            textBaseline: "middle", //文本基线
                            //文本填充样式（即文字颜色)
                            fill: new ol.style.Fill({
                              color: "#ff0000"
                            }),
                            //backgroundFill: new ol.style.Fill({
                            //  color: "#ff0000"
                            //}),
                            stroke: new ol.style.Stroke({
                              color: "#ffffff",
                              width: 1
                            }),
                            //offsetX: parseInt(0, 10),
                            //offsetY: parseInt(0, 10),
                            //placement: "point", //point 则自动计算面的中心k点然后标注  line 则根据面要素的边进行标注
                            overflow: false //超出面的部分不显示
                        })
                    }));
                    pointVectorSource.addFeature(feature);
                }
            } else {
                alert("有效样点个数不足，无法插值");
            }
        }
        //首次加载，自动渲染一次差值图
        let extent = clipgeom.getExtent();
        drawKriging(extent);
        


//取网格点中等级包含最多的点的等级属性
function getMaxAttribute(inLevelV,inGrid){
    //定义变量
    let levelArray = [];
    let levelLength = inLevelV.length;
    inLevelV.forEach(function (item, index) {
        if(index>0)levelArray.push(0);
    });
    //统计每个等级中网格点数量
    inGrid.features.map((i) => {
        inLevelV.forEach(function (item, index) {
            if(index<levelLength-3){
                if(i.properties.value>=inLevelV[index]&&i.properties.value<inLevelV[index+1])levelArray[index]++;
            }
            if(index==levelLength-2){
                if(i.properties.value>=inLevelV[index])levelArray[index]++;
            }
        });
    });
    //取等级中网格点最多的值
    let maxIndex = -1;
    let maxV = 0;
    levelArray.forEach(function (item, index) {
        if(maxV<item){maxV = item; maxIndex = index;}
    });
    let value = '';
    if(maxIndex != -1){
        value = inLevelV[maxIndex] + '-' + inLevelV[maxIndex+1];
    }
    return value;
}
    </script>
</body>
</html>

cwr888
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Openlayers 教程 12 - 地图中的各种定位：定位点、线、面以及图层等
linzi19900517的博客
03-17 6259
地图定位是非常常用的功能，本教程介绍定位到点、范围、图形要素 feature、图层 layer。
OpenLayers 5 使用turf.js渲染克里金插值计算的等值面
热门推荐
老胡的CSDN博客
10-14 1万+
之前Trojx同学实现了一个克里金插值渲染等值面的例子，使用的是kriging.js内置的绘图函数，然后在openlayer中利用ImageCanvas渲染。 这个方法比较简便，但是有一些性能上的问题： 网格切分比较小的时候，总体的网格数增加，每次重新渲染都要将整个网格数组遍历一次，交互体验不是很好； 网格是以方块的形式呈现的，视觉效果不如曲线和多边形。 我使用了turf.js来处理网格数据...
基于Leaflet.js和Turf.js的等值线区间自定义及颜色自适应实践
夜郎King的博客
04-03 5362
本文将重点讲解在Leaflet中使用turf来生成等值线，同时可以自主适配不同的值域信息，根据值域区间配置不同的颜色，让可视化效果更加贴近实际需要。
Kriging画等值线图
09-13
经典的算法，有源码，经过调试验证，完全可用。
等值线/面生成一站式封装
Moke的博客
10-08 811
等值线/面生成一站式封装 选择要生成的点 前台页面 <a-modal title="设置" :width="900" :visible="AnalysisVisible" @ok="AnalysishandleSubmit" @cancel="AnalysishandleCancel" > <div style="margin-top: 20px"> <span style="w
vue + cesium加载krigingjs插件库生成等值线图
wangyong_h
12-03 4487
vue + cesium加载krigingjs插件库生成等值线图
前端等值线分析DEMO（更新地址）
老郭的专栏
01-28 3614
等值线分析是气象软件开发中最重要的内容，这些年使用C、Delphi、C#、Python、JavaScript完成等值线分析及填色代码编写。今年的又一轮疫情封闭在家，再次把JavaScript版的改用TypeScript改写，并使用leaflet、OpenLayers、ECharts等进行了叠加显示测试。顺便尝试下vue3+vite+typescript组合，真的很好用。 Demo见：Contour V3.0 Demo 传入格点数据二维数组和等值线值，一行语句完成等值线分析、平滑、输出GeoJSON格式.
Java+Geotools+WContour+Openlayers实现等值线等值面功能
最新发布
05-22
总结，通过Java的Geotools处理和分析地理数据，利用WContour生成等值线，再借助OpenLayers在Web上展示这些等值线和等值面，我们可以创建出功能强大的GIS应用。这种方法不仅适用于学术研究，也常用于环境监测、城市...
等值线等值面功能实现.使用技术包括Java+Geotools+WContour+Openlayers
06-04
在本项目中，WContour通过调用其API，计算出给定数据集的等值线，生成可以进一步可视化的线状数据。 OpenLayers是一个JavaScript库，用于在Web浏览器中创建交互式地图。它可以与各种地图服务和数据源集成，提供地图...
openlayers遮罩示例
01-29
**OpenLayers 遮罩示例** OpenLayers 是一个强大的开源JavaScript库，用于在Web上构建交互式的地图应用。这个示例将展示如何在...通过深入学习和实践，你可以利用OpenLayers创建出满足各种业务需求的地图应用。
Kriging内插等值线并绘制三维图形
11-06
极其好用的等值线内插算法源代码，有2、3维两种显示方式。适合于水下地形、水深数据以及地质可视化
降雨量色斑图程序
01-05
非常专业的降雨量色斑图程序，值得拥有和收藏
基于Cesium生成等值线图
12-03
krigingjs是基于普通克里格的地理空间预测与映射Javascript库； 在cesium中生成等值线图等应用
turf.js-等值线等值面-javascript
10-16
处理geojson矢量数据的javascript插件，能生成等值线，等值面，处理各种geojson数据
克里金插值 Kriging
bbbeoy的专栏
08-01 386
https://blog.csdn.net/sinat_23619409/article/details/79974990
前端实现克里金插值分析(二)
SuperMap技术控
11-25 1689
在上一篇文章中我们已经使用了像素法实现克里金插值的方式，但是问题也就随之抛了出来。
【GIS小案例】基于Java + Geotools + wContour的等值面图
心生的小鱼专栏
02-14 8388
1引 言 展示雨量数据的分布情况，等值面图是非常合适的方法。以锦州市某日的降雨量为例，雨量站点大概有100个，分布于整个锦州市。首先尝试的方法是利用kriging.js生成等值面，但是由于锦州市边界区域太大，浏览器客户端生成压力非常大，速度也很慢。所以尝试着在服务端生成，然后客户端调用显示。 2等值面生成的两种方式 2.1 服务端生成 通用的方式是基于Java + Geotools + wContour在服务端处理数据，适用业务如下： 大范围高密度的空间数据插值 服务器端可以设置定时任务...
react + openlayer实现克里金插值效果
weixin_44952328的博客
07-06 538
主要用了turf + openlayer 实现 克里金插值
openlayers 等值线等值面
09-09
Openlayers是一个开源的JavaScript库，用于在Web上展示交互式地图。它提供了丰富的功能，包括展示地图数据、添加图层、添加标记、进行地图操作等等。关于等值线和等值面的展示，可以通过使用Openlayers的相关功能来实现。 首先，你需要使用Openlayers的Image图层来加载地图图像。你可以通过指定图像的URL和图像范围来创建Image图层，如下所示： ```javascript var image = new ol.layer.Image({ source: new ol.source.ImageStatic({ url: "skimg/7.png", imageExtent: bounds }), opacity: 0.6 }); ``` 这里，"skimg/7.png"是你要加载的地图图像的URL，bounds是图像的范围。 然后，你可以将Image图层添加到Openlayers的地图对象中，以展示地图和图像。你可以根据需要设置图层的透明度，以实现你想要的效果。 关于生成等值线和等值面的具体方法，你可以使用Java Geotools WContour库来实现。这个库提供了一些用于生成等值线和等值面的算法和功能。你可以在Java代码中使用这个库来生成等值线和等值面，并将生成的数据以某种格式（如GeoJSON）保存下来。 最后，你可以将生成的等值线和等值面数据加载到Openlayers中，通过添加相关的矢量图层来展示。你可以使用Openlayers的Vector图层和相关的样式来展示这些数据。 综上所述，你可以使用Openlayers进行等值线和等值面的展示。通过加载地图图像、生成等值线和等值面数据，并将它们展示在Openlayers的地图上，你可以实现对等值线和等值面的可视化展示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值