Vue中使用Kriging.js做克里金插值图
生活随笔
收集整理的這篇文章主要介紹了
Vue中使用Kriging.js做克里金插值图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個，我完全是照抄大佬的
參考鏈接：https://blog.csdn.net/weixin_40184249/article/details/90521127
addKriging() {
let _this = this
let params = {
mapCenter: [107.249894, 29.99305],
krigingModel: 'exponential', //model還可選'gaussian','spherical'
krigingSigma2: 0,
krigingAlpha: 226,
canvasAlpha: 0.75, //canvas圖層透明度
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',
],
}
// 裁切邊界
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],
],
]
// 數據源
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,
},
},
],
}
let WFSVectorSource = new VectorSource()
let WFSVectorLayer = new LayerVec({
source: WFSVectorSource,
})
_this.map.addLayer(WFSVectorLayer)
for (let i = 0; i < data.features.length; i++) {
let feature = new Feature({
geometry: new Point([data.features[i].attributes.x, data.features[i].attributes.y]),
value: data.features[i].attributes.z,
})
feature.setStyle(
new Style({
image: new Circle({
radius: 6,
fill: new Fill({
color: '#00F',
}),
}),
}),
)
WFSVectorSource.addFeature(feature)
}
let clipgeom = new Polygon(coord)
//繪制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])
})
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]) / 200)
//移除已有圖層
if (_this.canvasLayer !== null) {
_this.map.removeLayer(_this.canvasLayer)
}
//創建新圖層
_this.canvasLayer = new Image({
source: new ImageCanvas({
canvasFunction: (extent, resolution, pixelRatio, size, projection) => {
let canvas = document.createElement('canvas')
canvas.width = size[0]
canvas.height = size[1]
canvas.style.display = 'block'
//設置canvas透明度
canvas.getContext('2d').globalAlpha = params.canvasAlpha
//使用分層設色渲染
kriging.plot(canvas, grid, [extent[0], extent[2]], [extent[1], extent[3]], params.colors)
return canvas
},
projection: 'EPSG:4326',
}),
})
//向map添加圖層
_this.map.addLayer(_this.canvasLayer)
_this.onKriging = false
_this.$message({
type: 'success',
message: '開啟熱力圖成功！',
})
} else {
alert('樣點少，無法插值')
}
}
//首次加載，自動渲染一次差值圖
let extent = clipgeom.getExtent()
drawKriging(extent)
},
這是demo，實際使用過程中，需要在data中定義map，canvasLayer為null，地圖為openlayers，需要安裝openlayers, npm i ol --save
Kriging.js地址：https://blog-static.cnblogs.com/files/lyt520/kriging.js
總結
以上是生活随笔為你收集整理的Vue中使用Kriging.js做克里金插值图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用 Sql 中查看表结构信息
- 下一篇： CSS角度单位：deg、grad、rad