console
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="referrer" content="never">
<title>克里金插值</title>
<script src="https://cdn.bootcdn.net/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
<script src="https://cdns.jsrun.top/res/roshomon/simplegis-umd-v0188.js"></script>
<script src="https://cdns.jsrun.top/res/roshomon/data.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.map {
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
const mapOptions = {
"center": [119.779, 32.889],
"zoom": 7,
}
let map = new simplegis.MapX("map", mapOptions)
const baseLayerOptions = {
"urlTemplate": "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
}
let baseLayer = new simplegis.TileLayerX("gaodemap", baseLayerOptions)
map.setBaseLayer(baseLayer)
const pointArray = [
{ "lat": 32.0000, "lon": 118.8000, "value": 46 },
{ "lat": 31.5800, "lon": 120.3200, "value": 100 },
{ "lat": 32.2200, "lon": 119.4700, "value": 40 },
{ "lat": 31.3200, "lon": 120.6300, "value": 43 },
{ "lat": 32.0200, "lon": 120.8500, "value": 52 },
{ "lat": 32.4200, "lon": 119.4200, "value": 123 },
{ "lat": 33.3800, "lon": 120.1300, "value": 85 },
{ "lat": 34.2800, "lon": 117.1500, "value": 154 },
{ "lat": 33.5300, "lon": 119.1700, "value": 172 },
{ "lat": 34.5800, "lon": 119.1700, "value": 216 },
{ "lat": 31.7700, "lon": 119.9300, "value": 226 },
{ "lat": 32.5000, "lon": 119.9300, "value": 216 },
{ "lat": 33.9500, "lon": 118.2300, "value": 204 }];
const colorArr = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"]
let breaks = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];
let max = -1
pointArray.forEach(i => {
if (i.value > max) {
max = i.value
}
})
let dataset = pointArray.map(i => {
return [i.lon, i.lat, i.value / max]
})
const contourRes = simplegis.Analysis.krigingVectorContour(dataset,
breaks,
{
model: 'exponential',
sigma2: 0,
alpha: 226
},
jiangsu
)
let stops = []
for (let index = 0; index < breaks.length - 1; index++) {
stops.push([`${breaks[index]}-${breaks[index + 1]}`, colorArr[index]])
}
const polygonLayer = new simplegis.VLayer('polygon', contourRes, {
style: {
symbol: {
polygonFill: {
type: 'categorical',
property: 'value',
stops: stops,
default: 'white'
},
polygonOpacity: 1
}
}
}).addTo(map);
</script>
</body>
</html>