openlayers5-webpack 入門開發系列結合 turf.js 實現等值線（附源碼下載）

前言

openlayers5-webpack 入門開發系列環境知識點了解：

• node 安裝包下載
  webpack 打包管理工具需要依賴 node 環境，所以 node 安裝包必須安裝，上面鏈接是官網下載地址
• webpack 配置介紹文檔
  詳細的 webpack 文檔配置介紹，適合新手查看，我也是邊看邊學
  
• vscode 安裝包下載，我這邊用 vscode工具編譯開發前端項目，個人覺的這款工具還不錯
• openlayers5 api文檔介紹，詳細介紹 openlayers5 每個類的函數以及屬性等等
• openlayers5 在線例子

內容概覽

openlayers5 結合 turf.js 實現等值線
源代碼 demo 下載

效果圖如下：

• 關鍵函數 turf.pointGrid，從邊界框，FeatureCollection 或 Feature創建點網格
  
• 關鍵函數turf.isolines，采用具有z值和值中斷數的 Point 要素的網格 FeatureCollection 並生成等值線
  
• 關鍵函數 turf.bezierSpline，通過應用 Bezier 樣條算法獲取一條線並返回彎曲版本
  
• 核心代碼如下：

import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import 'ol/ol.css';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import CircleStyle from 'ol/style/Circle';
import GeoJSON from 'ol/format/GeoJSON';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import * as turf from "@turf/turf";
 
/*
*根據要素feature動態渲染樣式符號
*/
function styleFunction(feature) {
var tem = feature.get("temperature");//獲取屬性temperature值
var colors = ["#5a9fdd", "#f7eb0c", "#fc9e10", "#f81e0d", "#aa2ab3"];//定義顏色分組
var color = colors[parseInt(tem/2)];//根據屬性值來計算對應的顏色值
return new Style({
fill: new Fill({
color: color
}),
stroke: new Stroke({
color: color,
width: 4
}),
image: new CircleStyle({
radius: 5,
fill: new Fill({
color: color
}),
stroke: new Stroke({
color: '#fff',
width: 1
})
})
});
}
var extent = [72.8613, 20.0559, 133.9453, 54.5721];//網格點插值范圍經緯度
var cellWidth = 3;//等距點，單位為經緯度
var pointGrid = turf.pointGrid(extent, cellWidth, {units: 'degrees'});//創建等距點的網格,單位為經緯度
for (var i = 0; i < pointGrid.features.length; i++) {
pointGrid.features[i].properties.temperature = Math.random() * 10;//隨機0-10之間隨機賦值溫度屬性值temperature
}
……

完整demo源碼見小專欄文章尾部：GIS之家openlayers小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波