openlayers5-webpack 入门开发系列结合 turf.js 实现等值线(附源码下载)
2023-09-11 14:19:51 时间
前言
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小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
相关文章
- vue - webpack.dev.conf.js for FriendlyErrorsPlugin
- vue - webpack.dev.conf.js for merge
- vue - webpack.prod.conf.js
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
- Js和Jquery中ajax返回JSON格式的两种方法!(各有示例代码)
- vue 项目中 自定义 webpack 的 配置文件(webpack.config.babel.js)
- 31dwr - util.js 功能
- JS OOP编程
- 「Vue.js」Vue-Router + Webpack 路由懒加载实现
- 【HarmonyOS】【JS】 鸿蒙js开发使用div自带的scroll,滑动条拉不到最下面?
- 在vue.config.js中模拟后端接口数据
- 《Node.js区块链开发》——3.6 总结
- 【Webpack】webpack的基础使用详细总结 下(建议收藏)
- 【Webpack】webpack的基础使用详细总结 上(建议收藏)
- thinkphp js带参数跳转页面
- vue-cli脚手架之webpack.base.conf.js
- JS 将数字字符串数组转为 数字数组 (互换),js获取数组对象中 某一个key的值,js判断一个数组是否包含另一个数组(一维数组)
- js数组方法汇总
- js实现裁剪头像上传编辑器
- Three 之 three.js (webgl)模型的删除/场景的清空/内存的释放 的简单整理
- Js apply 方法 具体解释
- node js实战:带数据库,加密的注册登录表单
- js实现无缝滚动
- JQuery/JS插件 jsrender 遍历数组