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>