Vue結(jié)合leaflet實現(xiàn)克里金插值
更新時間：2023年06月26日 15:27:58 作者：努力搬磚的giser
本文主要介紹了Vue結(jié)合leaflet實現(xiàn)克里金插值，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
本文介紹了Web端使用 Leaflet開發(fā)庫進行克里金插值的三種方法 (底圖來源:天地圖)，分別結(jié)合了kriging、kriging-contour組件庫實現(xiàn)克里金插值功能，效果如下圖所示。
開發(fā)環(huán)境
- Vue開發(fā)庫：3.2.37 & Leaflet開發(fā)庫：1.9.3
- Leaflet主要插件：
turf、kriging.js、kriging-contour
代碼簡介
組件庫簡介
kriging.js是一個開源的克里金插值算法組件庫，核心方法如下：
// 使用gaussian、exponential或spherical模型對數(shù)據(jù)集進行訓練，返回的是一個variogram對象； kriging.train(t, x, y, model, sigma2, alpha) // 使用variogram對象使polygons范圍描述的地理位置內(nèi)的格網(wǎng)元素具備不一樣的預測值,width是插值格點精度大小 kriging.grid(polygons,variogram,width) // 將得到的格網(wǎng)grid渲染至canvas上。 kriging.plot(canvas,grid,xlim,ylim,colors):
kriging-contour組件庫是一個基于克里金插值算法，根據(jù)離散點位置及其權(quán)重，生成等值面矢量數(shù)據(jù)(GeoJSON格式)和柵格數(shù)據(jù)(Canvas繪制圖片)，這些數(shù)據(jù)在任何WebGIS客戶端上都可通用展示。
安裝依賴庫
# 安裝克里金插值所需的插件
npm i @turf/turf
# 方法一
npm i @sakitam-gis/kriging
# 方法二
npm i kriging-contour
# 引入kriging.js
import kriging from '@sakitam-gis/kriging';
# 引入kriging-contour
import { getVectorContour, drawCanvasContour } from 'kriging-contour/dist/kriging-contour.js'實現(xiàn)思路
首先劃定一個區(qū)域，利用turfJS隨機一部分數(shù)據(jù)(也可使用真實點狀數(shù)據(jù)集)，然后插件渲染空間插值至canvas或生成面狀geojson，然后添加到地圖容器中進行展示。
turf生成隨機數(shù)據(jù)
// 隨機點的邊界(折線的最大包圍盒坐標)
const boundaries = turf.lineString([[110, 32], [118, 40], [120, 35]]);
// 隨機50個點狀要素數(shù)據(jù)
let positionData = turf.randomPoint(50, { bbox: turf.bbox(boundaries) });
// 再生成些隨機數(shù)做屬性
turf.featureEach(positionData, function (currentFeature, featureIndex) {
currentFeature.properties = { value: (Math.random() * 100).toFixed(2) };
});方法一：kriging庫插值
使用體驗：在大量數(shù)據(jù)進行插值時，處理速度較慢；色帶顏色如果較少，格網(wǎng)間顏色差異較大；插值的范圍要按照特定的格式填入，否則無法加載。
核心代碼
效果預覽
方法二：kriging-contour插值(矢量)
使用體驗：插值效果較為平滑；可以對插值效果進行裁剪，僅保留研究區(qū)的范圍；顏色樣式定制更方便一些。
核心代碼
效果預覽
方法三：kriging-contour插值(柵格)
使用體驗：相比kriging庫使用起來更簡單，需要設置的參數(shù)更少，更容易上手；海量數(shù)據(jù)插值時，處理速度較慢；
核心代碼
效果預覽
詳細源碼
<template>
<div class="app-contain">
<!-- leaflet 地圖容器 -->
<canvas id="canvasMap" style="display: none;"></canvas>
<div id="myMap"></div>
<div class="controls">
<el-button color="#626aef" @click="startKriging('kriging')">普通克里金</el-button>
<el-button color="#626aef" @click="startKriging('Vector')">克里金矢量</el-button>
<el-button color="#626aef" @click="startKriging('Image')">克里金圖像</el-button>
<el-button color="#626aef" @click="clearKriging()">清空</el-button>
</div>
</div>
</template>
<script setup>
// 引入樣式
import L from 'leaflet';
import 'leaflet/dist/leaflet.css'
// 引入turf
import * as turf from '@turf/turf'
// 引入kriging.js
import kriging from '@sakitam-gis/kriging';
// 引入kriging-contour
import { getVectorContour, drawCanvasContour } from 'kriging-contour/dist/kriging-contour.js'
// VUE組件
import { onMounted, reactive, ref } from "vue"
// 天地圖TK
let tdtKey = 'YOURS_TK'
let map = null;
let featureLayerGroup = null;
let imageLayerGroup = null;
const initMap = () => {
// 矢量地圖
const tiandituMap = new L.TileLayer(`http://t0.tianditu.gov.cn/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=${tdtKey}`,
{
tileSize: 512,
noWrap: true,
bounds: [[-90, -180], [90, 180]]
})
// 文字注記
const tiandituText = new L.TileLayer(`http://t0.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=${tdtKey}`,
{
tileSize: 512,
noWrap: true,
bounds: [[-90, -180], [90, 180]]
})
const layers = L.layerGroup([tiandituText, tiandituMap])
map = L.map('myMap', { //需綁定地圖容器div的id
center: [39.56, 116.20], //初始地圖中心
crs: L.CRS.EPSG4326,
zoom: 5, //初始縮放等級
maxZoom: 18, //最大縮放等級
minZoom: 0, //最小縮放等級
zoomControl: true, //縮放組件
attributionControl: false, //去掉右下角logol
scrollWheelZoom: true, //默認開啟鼠標滾輪縮放
// 限制顯示地理范圍
maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)),
layers: [layers] // 圖層
})
// 矢量圖層組
featureLayerGroup = new L.FeatureGroup().addTo(map).bringToFront()
// 圖像圖層組
imageLayerGroup = new L.FeatureGroup().addTo(map).bringToFront()
}
const startKriging = (krigingType) => {
// 隨機點的邊界(折線的最大包圍盒坐標)
const boundaries = turf.lineString([[110, 32], [118, 40], [120, 35]]);
// 隨機50個點狀要素數(shù)據(jù)
let positionData = turf.randomPoint(50, { bbox: turf.bbox(boundaries) });
// 再生成些隨機數(shù)做屬性
turf.featureEach(positionData, function (currentFeature, featureIndex) {
currentFeature.properties = { value: (Math.random() * 100).toFixed(2) };
});
if ('Vector' == krigingType) {
showKrigingVector(boundaries, positionData);
} else if ('Image' == krigingType) {
showKrigingImage(boundaries, positionData)
} else if ('kriging' == krigingType) {
showKriging(boundaries, positionData)
}
}
const showKriging = (boundaries, positionData) => {
// 清空圖層
clearKriging();
// 完全透明
let scope = L.geoJSON(boundaries, {
style: function () {
return {
fillColor: '6666ff',
color: 'red',
weight: 2,
opacity: 0,
fillOpacity: 0,
};
}
}).addTo(imageLayerGroup);
map.fitBounds(scope.getBounds());
//根據(jù)scope邊界線，生成范圍信息
let xlim = [scope.getBounds()._southWest.lng, scope.getBounds()._northEast.lng];
let ylim = [scope.getBounds()._southWest.lat, scope.getBounds()._northEast.lat];
function loadkriging(points) {
let canvas = document.getElementById("canvasMap");
canvas.width = 2000;
canvas.height = 1000;
// 數(shù)量
let pointLength = points.features.length;
let t = [];// 數(shù)值
let x = [];// 經(jīng)度
let y = [];// 緯度
// 加載點數(shù)過多的話，會出現(xiàn)卡頓
for (let i = 0; i < pointLength; i++) {
x.push(points.features[i].geometry.coordinates[0]);
y.push(points.features[i].geometry.coordinates[1]);
t.push(points.features[i].properties.value);
// 將插值點展示到地圖中,并添加提示文字(可刪除，非核心代碼)
L.circle([y[i], x[i]], { radius: 1 })
.addTo(imageLayerGroup)
.bindTooltip(points.features[i].properties.value, {
permanent: true, //是永久打開還是懸停打開
direction: 'top' //方向
}).openTooltip();
}
// 克里金插值參數(shù)
const params = {
krigingModel: 'exponential',//model還可選'gaussian','spherical'
krigingSigma2: 0,
krigingAlpha: 100,
canvasAlpha: 0.8,//canvas圖層透明度-0.75
colors: ["#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"
]
}
// 對數(shù)據(jù)集進行訓練
let variogram = kriging.train(t, x, y, params.krigingModel, params.krigingSigma2, params.krigingAlpha);
// 將插值范圍封裝成特定格式
let bbox = turf.bbox(boundaries); // 外包矩形范圍
// 根據(jù)外包矩形范圍生成外包矩形面Polygon
let bboxPolygon = turf.bboxPolygon(bbox);
let positions = [];
bboxPolygon.geometry.coordinates[0].forEach((v) => {
positions.push([v[0], v[1]])
})
// 將邊界封裝成特定的格式
let range = [positions]
// 使用variogram對象使polygons描述的地理位置內(nèi)的格網(wǎng)元素具備不一樣的預測值,最后一個參數(shù)，是插值格點精度大小
let grid = kriging.grid(range, variogram, 0.05);
// 將得到的格網(wǎng)grid渲染至canvas上
kriging.plot(canvas, grid, [xlim[0], xlim[1]], [ylim[0], ylim[1]], params.colors);
}
//將canvas對象轉(zhuǎn)換成image的URL
function returnImgae() {
let mycanvas = document.getElementById("canvasMap");
return mycanvas.toDataURL("image/png");
}
// 執(zhí)行克里金插值函數(shù)
loadkriging(positionData);
let imageBounds = [[ylim[0], xlim[0]], [ylim[1], xlim[1]]];
L.imageOverlay(returnImgae(), imageBounds, { opacity: 0.8 }).addTo(imageLayerGroup);
}
// 生成矢量等值面并渲染
const showKrigingVector = (boundaries, positionData) => {
// 清空圖層
clearKriging();
// 展點(可刪除)
L.geoJSON(positionData, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 5,
fillColor: '#6666ff',
fillOpacity: 1,
color: "#fff",
weight: 2,
});
}, onEachFeature(feature, layer) {
// 顯示文字
let content = feature.properties.value
// marker的icon文字
let myIcon = L.divIcon({
html: `<div style="white-space: nowrap;color:#6666ff;">${content}</div>`,
iconAnchor: [0, 0],
className: 'my-div-icon',
iconSize: 120
});
let featureCenter = L.latLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]);
featureLayerGroup.addLayer(L.marker(featureCenter, { icon: myIcon }));
}
}).addTo(featureLayerGroup)
// 顏色色帶
let colors = [{ fill: "#ffdc84" }, { fill: "#ffd782" },
{ fill: "#ffd281" }, { fill: "#ffcd7f" }, { fill: "#ffc87e" }, { fill: "#ffc37c" }, { fill: "#ffbe7a" }, {fill: "#ffb979"}, {fill: "#feb477"},{fill: "#feaf76"},
{fill: "#feaa74"}, {fill: "#fea573"}, {fill: "#fea071"}, {fill: "#fe9b6f"},
{fill: "#fe966e"}, {fill: "#fe906c"}, {fill: "#fe8b6b"}, {fill: "#fe8669"},
{fill: "#fe8167"}, {fill: "#fe7c66"}, {fill: "#fe7764"}, {fill: "#fe7263"},
{fill: "#fd6d61"}, {fill: "#fd6860"}, {fill: "#fd635e"}, {fill: "#fd5e5c"},
{fill: "#fd595b"}, {fill: "#fd5459"}, {fill: "#fd4f58"}, {fill: "#fd4a56"}]
// 等級分級
let levelV = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 250, 260, 270, 280, 290, 300, 400];
let kriging_contours = getVectorContour(positionData, 'value', {
model: 'exponential',
sigma2: 0,
alpha: 100
}, levelV, boundaries);
// 展示生成的矢量等值面
L.geoJSON(kriging_contours, {
style: function (feature) {
return {
fillColor: hotColor(feature.properties.value),
weight: 0,
fillOpacity: 0.3,
};
}
}).addTo(featureLayerGroup);
// 根據(jù)值來配色
function hotColor(d) {
let index = levelV.findIndex((item) => item >= d);
if (index > -1) {
return colors[index].fill
} else {
return colors[colors.length - 1].fill
}
}
}
// 生成圖像等值面并渲染
const showKrigingImage = (boundaries, positionData) => {
// 清空圖層
clearKriging();
// 完全透明
let scope = L.geoJSON(boundaries, {
style: function () {
return {
fillColor: '6666ff',
color: 'red',
weight: 2,
opacity: 0,
fillOpacity: 0,
};
}
}).addTo(imageLayerGroup);
map.fitBounds(scope.getBounds());
//根據(jù)scope邊界線，生成范圍信息
let xlim = [scope.getBounds()._southWest.lng, scope.getBounds()._northEast.lng];
let ylim = [scope.getBounds()._southWest.lat, scope.getBounds()._northEast.lat];
// 色帶
let colors = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"]
// 畫布
let canvas = document.getElementById("canvasMap");
canvas.width = 1000;
canvas.height = 1000;
let kriging_contours = drawCanvasContour(positionData, 'value', {
model: 'exponential',
sigma2: 0,
alpha: 100
}, canvas, [xlim[0], xlim[1]], [ylim[0], ylim[1]], colors);
//將canvas對象轉(zhuǎn)換成image的URL
function returnImgae() {
let mycanvas = document.getElementById("canvasMap");
return mycanvas.toDataURL("image/png");
}
let imageBounds = [[ylim[0], xlim[0]], [ylim[1], xlim[1]]];
L.imageOverlay(returnImgae(), imageBounds, { opacity: 0.9 }).addTo(imageLayerGroup);
}
// 清空圖層
const clearKriging = () => {
imageLayerGroup.clearLayers();
featureLayerGroup.clearLayers();
}
onMounted(() => {
initMap();
})
</script>
<style scoped>
#myMap {
width: 96vw;
height: 96vh;
}
.controls {
position: absolute;
top: 0px;
left: 200px;
padding: 15px;
z-index: 1000;
}
</style>到此這篇關于Vue結(jié)合leaflet實現(xiàn)克里金插值的文章就介紹到這了,更多相關Vue leaflet克里金插值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在 Vue.js 中,組件的重復渲染是一個常見的問題,可能會影響應用的性能和用戶體驗,為了提升應用的性能,開發(fā)者需要理解 Vue 的渲染機制,并應用有效的方法來避免不必要的組件重渲染,本文將深入探討如何防止 Vue 組件重復渲染,并提供相關示例代碼,需要的朋友可以參考下2024-10-10
在微信小程序中，可以使用全局配置和使用開發(fā)、體驗、生產(chǎn)環(huán)境的地址，這篇文章主要介紹了Vue微信和uniapp配置環(huán)境地址,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了詳解Vscode中使用Eslint終極配置大全，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要給大家介紹了如何利用vue.js實現(xiàn)拖放功能的相關資料，本文并未使用現(xiàn)有的庫，而是使用內(nèi)置的HTML拖放API來實現(xiàn)簡單的拖放系統(tǒng)，需要的朋友可以參考下2021-06-06
這篇文章主要介紹了vue實現(xiàn)PC端分辨率適配操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本文主要介紹了VUE3之Non-Props屬性的具體使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
vue3+vite項目中按需引入vant報錯:Failed?to?resolve?import的解決方案
最近在vue項目中引入vant的時候發(fā)現(xiàn)報錯了,經(jīng)過嘗試發(fā)現(xiàn)了問題,現(xiàn)將完整引入流程提供給大家參考,下面這篇文章主要給大家介紹了關于vue3+vite項目中按需引入vant報錯:Failed?to?resolve?import的解決方案,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue3關于RouterView插槽和過渡動效,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Vite3結(jié)合Svelte3使用@import導入scss樣式
這篇文章主要為大家介紹了Vite3結(jié)合Svelte3使用@import導入scss樣式實現(xiàn)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue3實現(xiàn)canvas畫布組件自定義畫板實例代碼
Vue?Canvas是一個基于Vue.js的輕量級畫板組件,旨在提供一個簡易的畫布功能,用戶可以在網(wǎng)頁上進行自由繪圖,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09