openlayers5-webpack 入门开发系列结合 turf.js 实现等值线(附源码下载)

前言

openlayers5-webpack 入门开发系列环境知识点了解:

内容概览

openlayers5 结合 turf.js 实现等值线
源代码 demo 下载

效果图如下:
openlayers5-webpack 入门开发系列结合 turf.js 实现等值线(附源码下载)

openlayers5-webpack 入门开发系列结合 turf.js 实现等值线(附源码下载)

  • 关键函数 turf.pointGrid,从边界框,FeatureCollection 或 Feature创建点网格
    openlayers5-webpack 入门开发系列结合 turf.js 实现等值线(附源码下载)
  • 关键函数turf.isolines,采用具有z值和值中断数的 Point 要素的网格 FeatureCollection 并生成等值线
    openlayers5-webpack 入门开发系列结合 turf.js 实现等值线(附源码下载)
  • 关键函数 turf.bezierSpline,通过应用 Bezier 样条算法获取一条线并返回弯曲版本
    openlayers5-webpack 入门开发系列结合 turf.js 实现等值线(附源码下载)
  • 核心代码如下:
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小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

上一篇:leaflet结合turf.js实现多边形分割(附源码下载)


下一篇:jQuery插件编写笔记