openlayers加kriging出等值线图

article/2025/5/2 14:57:48

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',exponentialkrigingSigma2: 0,krigingAlpha: 100,//226canvasAlpha: 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',exponentialkrigingSigma2: 0,krigingAlpha: 100,//226canvasAlpha: 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, ylimvar 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的一个bugisobands.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>


http://chatgpt.dhexx.cn/article/s8M4P3rf.shtml

相关文章

leflet使用kriging.js构建气象图层

一、克里金法 kriging.js kriging.js是一个 Javascript 库&#xff0c;通过普通克里金算法提供空间预测和映射功能。 克里金法是一种高斯过程&#xff0c;其中使用核回归将二维坐标映射到某个目标变量。该算法经过专门设计&#xff0c;可通过为变异函数参数分配先验参数来准确…

Kriging(克里金模型)介绍

克里金模型最早出现在地质学文献中&#xff0c;用来估计有价值矿物的分布。萨克斯艾尔1989年将这种方法应用于近似的计算机实验。此后&#xff0c;克里格法被广泛研究并应用于工程领域。 克里格模型也称为高斯过程模型&#xff0c;因为它将目标函数建模为高斯过程的实现。定义…

克里金(kriging)模型的推导详解

Kriging模型理论推导 1、前言2、条件3、基础知识3.1、方差的理解3.2、概率密度函数3.3、多元正态分布 4、理论推导4.1 模型建立4.2 模型预测 1、前言 简介&#xff1a;Kriging模型是一种通过已知试验点信息来预测未知试验点上响应的无偏估计模型&#xff0c;其最早是由南非矿业…

c语言函数库----<ctype.h>

<ctype.h>是c标准函数库中的头文件&#xff0c;定义了一批c语言字符分类函数&#xff0c;下面将介绍<ctype.h>中的一些函数。 1、isascii()函数 isascii()函数是c语言中字符检测函数。通常用于检查参数c是否为ASCII 码字符&#xff0c;也就是判断c 的范围是否在0…

C语言——标准函数库

<stdlib.h> 算数&#xff1a; 1、函数abs和labs返回参数的绝对值 int abs( int value ); long int labs( long int value ); 2、函数div和ldiv做除法运算 div_t div( int numerator, int denominator ); ldiv_t ldiv( long int numer, long int denom ); 函数第一个参数…

Qt中调用C语言函数库

接着上一篇文章&#xff0c;试图画出速度模型时&#xff0c;中间会有用到调用C库函数--gsl库&#xff1b;记一下怎么使用的&#xff1a; 和C语言中类似&#xff0c;但要使用到条件编译&#xff1a; #ifdef __cplusplus extern "C" { #endif #include <gsl/gsl_…

c语言标准函数库怎么建立教程,C语言-基础教程-C语言函数库和文件

一个函数设计完后&#xff0c;我们可以用三种方法处理它&#xff1a;1)把它放在main()函数的同一个文件中&#xff1b;2)把它和写好的其它函数一起放在另一个文件中&#xff1b;3)把它放在函数库中。下面分别讨论这三种方法。 4.6.1程序文件的大小 因为C语言允许分别编译&#…

C语言字符串处理函数库

C语言的字符串处理函数库包括复制函数、拼接函数、比较函数、搜索函数等&#xff0c;这些函数的声明都位于头文件<string.h>。使用这些函数时&#xff0c;需要使用#include<string.h>指令将头文件包含到文件中。 复制函数 复制函数的功能是将字符&#xff08;节&…

C语言数学函数库

数学函数库 几乎所有语言都会提供数学函数库&#xff0c;数学函数库起码包含幂&#xff0c;对数、三角函数等最基本的运算&#xff0c;C对于基本数学函数还算全面&#xff0c;如下表&#xff1a; 使用数学函数库需要导入math.h&#xff0c;表中所有参数和返回值都是double&am…

c语言常用库函数

c语言常用库函数 1、数学函数 abs 原型&#xff1a;extern int abs(int x); 功能&#xff1a;求整数x的绝对值 说明&#xff1a;计算|x|, 当x不为负时返回x&#xff0c;否则返回-xfabs 原型&#xff1a;extern float fabs(float x); 功能&#xff1a;求浮点数x的绝对值 说明&…

简单实现破解Root密码

破解步骤&#xff1a; 在系统启动时进入grub选项菜单 在grub选项菜单按e进入编辑模式 编辑kernel那行 添加 /init 1 &#xff0c;相当于告诉linux下次启动启用单用户模式这个特殊模式启动。 按b重启 进入系统后&#xff0c;将root密码设置为空密码。 #vim /etc/passwd …

vue-admin-beautiful-pro源码、vue admin pro、vue admin plus 基于element-plus的vue3.0 admin前端框架

Vue Admin Plus已拥有四种布局&#xff08;画廊布局、综合布局、纵向布局、横向布局&#xff09;四种主题&#xff08;默认、海洋之心、绿茵草场&#xff0c;荣耀典藏&#xff09;&#xff0c;共计16布局主题种组合&#xff0c;满足所有项目场景&#xff0c;已支持常规bug自动修…

【Mockplus教程】安装Mockplus

MAC上安装Mockplus 1 下载 进入摩客官网桌面端下载页面&#xff0c;选择MAC版本下载&#xff1b; 2 安装 下载完成后&#xff0c;打开dmg包&#xff0c;将Mockplus图标拖动到Applications快捷图标上面即可完成安装。 整个过程见下方视频&#xff1a; 进入摩客官网桌面端下载页面…

VUE 使用 mock

mock使用背景 实际开发采用前后端分离形式&#xff0c;意味着后端API正在开发中&#xff0c;前端只需知道需要的数据格式即可进行开发&#xff0c;与后端开发同步进行。mock模拟后端提供api的调用&#xff0c;并返回数据。 mock使用步骤 1. 安装依赖 npm install mockjs 2…

抱歉,Xposed真的可以为所欲为——5.我自己刷的Xposed凭什么不给我用

抱歉&#xff0c;Xposed真的可以为所欲为——5.我自己刷的Xposed凭什么不给我用 标签&#xff1a; 2018 一句话概括本文 分析定位排查下厨房APP检测手机是否安装了Xposed框架的方法&#xff0c;然后一步步 Hook掉对应代码&#xff0c;以此去掉恶心的重复弹出警告对话框。 引…

2022最新 vue中mock的使用步骤 亲测可用

第一步&#xff1a;在src目录下创建文件夹mock&#xff0c;mock下创建文件index.js存放mock数据 index.js代码&#xff1a; import Mock from "mockjs" // const chartData { // "Msg": "success", // "ResCode": 200, // …

Mock 使用方式 + 在 Vue 项目中使用 Mock

Mock Mock 介绍搭建测试项目mock.js 模拟数据的基础使用方式Vue 项目中使用 mock.js 拦截数据后端接口写好后&#xff0c;mock.js 的移除处理 写下博客用于自我复习、总结。 如有错误之处&#xff0c;请各位大佬指出。 学习资料来源于&#xff1a;尚硅谷 Mock 介绍 在前后端开…

尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P051-100]

视频链接&#xff1a;尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili P1-50&#xff1a;尚硅谷Vue2.0Vue3.0全套教程视频笔记 代码 [P001-050]_小白桶子的博客-CSDN博客 P51-100&#xff1a;当前页面 P101-135&#xff1a;尚硅谷Vue2.0Vue3.0全套教程视频…

VirtualXposed 免ROOT使用Xposed模块

免ROOT使用Xposed模块 一&#xff0c;下载工具 VirtualXposed 官网地址 或者 百度网盘 提取码&#xff1a;39hu 二&#xff0c;安装应用 安装完成打开VirtualXposed可以看到界面&#xff0c;点击下面圆圈就可以进入添加应用&#xff0c;模块管理&#xff0…

Vue.js 框架源码与进阶 - Vue.js 源码剖析 - 模板编译

文章目录 一、模板编译简介二、体验模板编译的结果三、Vue Template Explorer四、编译的入口函数五、模板编译过程5.1 compileToFunctions5.2 compile5.3 baseCompile5.3.1 baseCompile-AST5.3.2 baseCompile-parse5.3.3 baseCompile-optimize5.3.4 baseCompile-generate 5.4 模…