<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<script src="/offline_data/newjunbiao/kriging.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
}
.bmgl-widget-credits {
display: none;
}
.tools{
position: absolute;
width: 280px;
height:350px;
bottom: 60px;
left: 60px;
display: flex;
flex-direction: column;
z-index:9;
background-color: aliceblue;
}
.exam{
width: 100%;
text-align: center;
}
.item{
width: 300px;
flex: 0 0 12%;
display: flex;
justify-content: space-around;
align-items: center;
}
.color{
flex: 0 0 30%;
height: 40%;
}
.mount{
flex: 0 0 40%;
text-align: left;
height: 40%;
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id="container">
<div class="tools">
<h5 class="exam">四川省年平均降水量圖例(單位:mm)</h5>
<div class="item">
<div class="color one" style="background-color:#7fffff;"></div>
<h5 class="mount">降雨量0-1000</h5>
</div>
<div class="item">
<div class="color one" style="background-color: #23b7ff;"></div>
<h5 class="mount">降雨量1000-1100</h5>
</div>
<div class="item">
<div class="color one" style="background-color: #0177b4;"></div>
<h5 class="mount">降雨量1100-1200</h5>
</div>
<div class="item">
<div class="color one" style="background-color: #0052ca;"></div>
<h5 class="mount">降雨量1200-1400</h5>
</div>
<div class="item">
<div class="color one" style="background-color: #0310d8;"></div>
<h5 class="mount">降雨量1400-1600</h5>
</div>
<div class="item">
<div class="color one" style="background-color: #9601f9;"></div>
<h5>降雨量1600-1800</h5>
</div>
<div class="item">
<div class="color one" style="background-color: #6f00b8;"></div>
<h5 class="mount">降雨量1800-2000</h5>
</div>
<div class="item">
<div class="color one" style="background-color: #4c0082;"></div>
<h5 class="mount">降雨量2000+</h5>
</div>
</div>
</div>
<script type="module">
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
window.viewer = new bmgl.Viewer("container", {
mapId: "bigemap.dc-satellite",
infoBox: false,
requestRenderMode: false,
});
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
var krigingColors = [
{ min: 0, max: 1000, color: "#7fffff" },
{ min: 1000, max: 1100, color: "#23b7ff" },
{ min: 1100, max: 1200, color: "#0177b4" },
{ min: 1200, max: 1400, color: "#0052ca" },
{ min: 1400, max: 1600, color: "#0310d8" },
{ min: 1600, max: 1800, color: "#9601f9" },
{ min: 1800, max: 2000, color: "#6f00b8" },
{ min: 2000, max: 10000, color: "#4c0082" },
];
// 繪制圖斑的數據
var lngs = []; //經度數組
var lats = []; //緯度數組
var vals = []; //數值數組
var mode = "exponential"; //變異函數模型
var sigma2 = 0; // (σ2)高斯過程的方差參數
var alpha = 100; // (α)變異函數模型的先驗
var gridDivideNum = 800; // 根據格網的寬度/該數量劃分格網單元大小
var resArr = [];
// 加載城市點位數據
var cityPromise = await fetch("/offline_data/newjunbiao/cityData.json");
var cityjson = await cityPromise.json();
var cityArr = cityjson.forEach((v, i) => {
lngs.push(v.pos[0]);
lats.push(v.pos[1]);
vals.push(v.val);
createPoint(v);
});
//加載四川省的邊界數據
var scPromise = await fetch("/offline_data/newjunbiao/scs.json");
var broderjson = await scPromise.json();
var pos = broderjson.features[0].geometry.coordinates[0];
let scCartesian3 = bmgl.Cartesian3.fromDegreesArray(pos.flat());
createpolyline(scCartesian3);
//根據邊界數據計算外接矩形
var outerRect = getRec(pos);
var minx = outerRect[0];
var miny = outerRect[1];
var maxx = outerRect[2];
var maxy = outerRect[3];
// 外接矩形范圍
var polygonExtentCoords = [
[
[minx, miny],
[maxx, miny],
[maxx, maxy],
[minx, maxy],
],
];
// 訓練并得到格網
var variogram = kriging.train(
vals,
lngs,
lats,
mode,
sigma2,
alpha
);
//克里金生成格網
var grid = kriging.grid(
polygonExtentCoords,
variogram,
(maxx - minx) / gridDivideNum
);
// 繪制canvas圖片
var canvas = document.createElement("canvas");
canvas.width = 1000;
canvas.height = 1000;
canvas.style.display = "block";
canvas.getContext("2d").globalAlpha = 1.0;
drawImg(canvas, grid, grid.xlim, grid.ylim, krigingColors);
var polygonGeom = new bmgl.PolygonGeometry({
polygonHierarchy: new bmgl.PolygonHierarchy(scCartesian3),
});
//添加以插值圖片加載的多邊形
var primitive = new bmgl.GroundPrimitive({
geometryInstances: new bmgl.GeometryInstance({
geometry: polygonGeom,
}),
appearance: new bmgl.Appearance({
material: bmgl.Material.fromType("Image", {
image: canvas,
}),
}),
});
viewer.scene.primitives.add(primitive);
//計算外接矩形
function getRec(array) {
let xmin, ymin, xmax, ymax;
for (let i in array) {
var coordinates = array[i];
var x = coordinates[0];
var y = coordinates[1];
if (!xmin) {
xmin = x;
} else {
if (x * 1000000 < xmin * 1000000) {
xmin = x;
}
}
if (!ymin) {
ymin = y;
} else {
if (y * 1000000 < ymin * 1000000) {
ymin = y;
}
}
if (!xmax) {
xmax = x;
} else {
if (x * 1000000 > xmax * 1000000) {
xmax = x;
}
}
if (!ymax) {
ymax = y;
} else {
if (y * 1000000 > ymax * 1000000) {
ymax = y;
}
}
}
// console.log(xmin, ymin, xmax, ymax);
// return [
// [xmin, ymin],
// [xmax, ymax],
// ];
return [xmin, ymin, xmax, ymax];
}
//創建點位
function createPoint(data) {
viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(...data.pos),
point: {
pixelSize: 6,
color: bmgl.Color.RED,
outlineColor: bmgl.Color.WHITE,
outlineWidth: 2,
},
label: {
text: data.val + "",
fillColor: bmgl.Color.WHITE,
pixelOffset: new bmgl.Cartesian2(6, 14),
font: "16px 楷體",
},
});
}
//創建四川省邊界的發光線
function createpolyline(data) {
viewer.entities.add({
polyline: {
positions: data,
material: new bmgl.PolylineGlowMaterialProperty({
glowPower: 0.2,
color: bmgl.Color.ORANGE,
}),
width: 1.0,
},
});
}
//返回需要呈現的顏色
function getColor(colors, z) {
var len = colors.length;
let minVal = colors[0].min;
for (var i = 0; i < len; i++) {
minVal = Math.min(minVal, colors[i].min);
if (z >= colors[i].min && z < colors[i].max)
return colors[i].color;
}
if (z <= minVal) {
return colors[0].color;
} else {
return colors[len - 1].color;
}
}
//繪制圖片
function drawImg(canvas, grid, xlim, ylim, colors) {
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
let range = [
xlim[1] - xlim[0],
ylim[1] - ylim[0],
grid.zlim[1] - grid.zlim[0],
];
let i, j, x, y, z;
let n = grid.length;
let m = grid[0].length;
let wx = Math.ceil(
(grid.width * canvas.width) / (xlim[1] - xlim[0])
);
let wy = Math.ceil(
(grid.width * canvas.height) / (ylim[1] - ylim[0])
);
for (i = 0; i < n; i++) {
for (j = 0; j < m; j++) {
if (grid[i][j] == undefined) continue;
x =
(canvas.width *
(i * grid.width + grid.xlim[0] - xlim[0])) /
range[0];
y =
canvas.height *
(1 -
(j * grid.width + grid.ylim[0] - ylim[0]) /
range[1]);
z = (grid[i][j] - grid.zlim[0]) / range[2];
if (z < 0.0) z = 0.0;
if (z > 1.0) z = 1.0;
ctx.fillStyle = getColor(colors, grid[i][j]);
ctx.fillRect(
Math.round(x - wx / 2),
Math.round(y - wy / 2),
wx,
wy
);
}
}
}
</script>
</body>
</html>