vue3+高德地图+turfjs实现等压线,色斑图(用于显示气象,环境等地图场景)

首先是turf.js(英文官网),也有中文网不过也就目录翻译了一下.
高德官网自行获得key
使用turf的isobands api实现.
数据: 需要准备geojson格式经纬度信息+业务值(比如温度,高度,光照只要是number值什么数据都可以)
国内各地区geojson数据点这里获得

参考的是这位大佬写的内容
我这个是贵州的实例
业务值 使用的是随机值
效果图

<style scoped lang="scss">.About{height: 100%;width: 100%;position: relative;#map {position: absolute;top: 0;bottom: 0;width: 100%;}}
</style><template><div class="About"><div id='map'></div></div>
</template><script>
import * as turf from '@turf/turf'
import mapData from "../assets/json/guizhougexiancenter.json";
import guizhoulunkuo from "../assets/json/guizhoulunkuo.json";
import { onMounted, ref } from 'vue'
import AmapLoader from '@amap/amap-jsapi-loader'
export default {name: 'About',components: {},setup () {console.log('mapData', mapData)const calculateContourLines = () => {// 第一步  生成点位// 计算贵州东南西北最远坐标  var bbox = turf.bbox(guizhoulunkuo); // 数组组合 01   03   21   23console.log('bbox', bbox)let coordinates = [...(mapData.features[0].geometry.coordinates[0][0][0]),[bbox[0], bbox[1]],[bbox[2], bbox[1]],[bbox[2], bbox[3]],[bbox[0], bbox[3]],]// 绑定各经纬度第三个业务值let centerPositionList = coordinates.map((item, index) => {return {type: "Feature",properties: {// 这个value就是温度;气温;光照等,除经纬度外影响划分区域的业务值value: (Math.random() * 100).toFixed(2)},geometry: {type: "Point",coordinates: item  //经纬度}}})// points为每个点数据let points = {type: "FeatureCollection",features: centerPositionList}// 第二步  网格点let interpolate_options = {// 点位gridType: "points",// property中取那个元素property: "value",// 单位units: "degrees",// 权重weight: 10};// interpolate中第一是点位数据   第二个是精细度(值越小画的点越多)  配置项// grid网格点let grid = turf.interpolate(points, 0.05, interpolate_options);// value保留两位小数  经过interpolate计算后value会变得很长grid.features.map((i) => (i.properties.value = i.properties.value.toFixed(2)));// 第三步  等压线// 规定样式配置let isobands_options = {zProperty: "value",commonProperties: {"fill-opacity": 0.8},breaksProperties: [{ fill: "#e3e3ff" },{ fill: "#c6c6ff" },{ fill: "#a9aaff" },{ fill: "#8e8eff" },{ fill: "#7171ff" },{ fill: "#5554ff" },{ fill: "#3939ff" },{ fill: "#1b1cff" },{ fill: "#1500ff" }]};// isobands没有经过编辑裁剪 是正方形图层,   是根据网格点,取值范围和样式配置返回等压线(geojson)let isobands = turf.isobands(grid,[1, 10, 20, 30, 50, 70, 80, 90 ,100],isobands_options);// flatten 减少geoJson嵌套层级guizhoulunkuo = turf.flatten(guizhoulunkuo);isobands = turf.flatten(isobands);// console.log('isobands', isobands)// 第四步  将等压线限制在贵州范围内并生成最终等压线// 通过intersect判断是否存在交集  来判断是否在贵州范围内// features存放有交集的点位let features = [];isobands.features.forEach(function (layer1) {guizhoulunkuo.features.forEach(function (layer2) {let intersection = null;try {intersection = turf.intersect(layer1, layer2);} catch (e) {layer1 = turf.buffer(layer1, 0);intersection = turf.intersect(layer1, layer2);}if (intersection != null) {intersection.properties = layer1.properties;intersection.id = Math.random() * 100000;features.push(intersection);}});});// intersection为最终完整图层let intersection = turf.featureCollection(features);console.log('intersection', intersection)// 最后  将数据传入地图// initMap(points, isobands, intersection)initGaoDeMap(points, isobands, intersection)}const initGaoDeMap = (points, isobands, intersection) => {// 可视化及交互部分AmapLoader.load({key:"高德地图key", // keyversion:"2.0", plugins:['AMap.DistrictSearch', 'AMap.GeoJSON'], // 需要使用的的插件列表}).then((AMap) => {const district = new AMap.DistrictSearch({subdistrict:2,extensions:'all',level:'province'});district.search('贵州',function(status, result){const bounds = result.districtList[0].boundariesconst mask = []for (let i=0;i<bounds.length;i++){mask.push([bounds[i]])}const map = new AMap.Map("map",{  // 设置地图容器idmask: mask, zoom:8, // 设置当前显示级别expandZoomRange:true, // 开启显示范围设置zooms: [7, 20], //最小显示级别为7,最大显示级别为20center:[106.629577,26.684338], // 设置地图中心点位置zoomEnable:true, // 是否可以缩放地图resizeEnable:true,});// 添加描边for (let i=0;i<bounds.length; i++) {const polyline = new AMap.Polyline({path:bounds[i], // polyline 路径,支持 lineString 和 MultiLineString})polyline.setMap(map);}loadGeoJson(AMap,map)})}).catch(e=>{console.log(e);})const loadGeoJson = (AMap, map) => {var geojson = new AMap.GeoJSON({geoJSON: intersection,getPolygon: function(geojson, lnglats) {return new AMap.Polygon({path: lnglats,strokeColor: 'white',fillColor: geojson.properties.fill,fillOpacity: geojson.properties['fill-opacity'],strokeWeight:0,});}});map.add(geojson)}}onMounted(() => {calculateContourLines()})return {}}
}
</script>

guizhoulunkuo.json是贵州轮廓通过我最上面获得geojson的网站获取
guizhougexiancenter.json 贵州各县中心点geojosn

// guizhougexiancenter.json
{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"adcode": 520000,"name": "贵州省","center": [106.713478,26.578343],"centroid": [106.880455,26.826368],"childrenNum": 9,"level": "province","acroutes": [100000],"parent": {"adcode": 100000}},"geometry": {"type": "MultiPolygon","coordinates": [[[[[106.943784,27.694395],[106.937265,27.706626],[106.831668,27.535288],[106.826591,28.131559],[107.191024,27.951342],[107.441872,28.550337],[107.605342,28.880088],[107.887857,28.521567],[107.722021,27.960858],[107.485723,27.765839],[107.892566,27.221552],[106.200954,28.327826],[105.698116,28.587057],[106.412476,27.803377],[109.192117,27.718745],[109.21199,27.51903],[108.848427,27.691904],[108.917882,27.238024],[108.229854,27.519386],[108.255827,27.941331],[108.405517,27.997976],[108.117317,28.26094],[108.495746,28.560487],[109.202627,28.165419],[107.977541,26.582964],[107.901337,26.896973],[108.12678,27.034657],[108.681121,26.959884],[108.423656,27.050233],[108.816459,27.173244],[109.212798,26.909684],[109.20252,26.680625],[108.440499,26.727349],[108.314637,26.669138],[109.136504,26.230636],[108.521026,25.931085],[108.912648,25.747058],[108.079613,26.381027],[107.593172,26.494803],[107.794808,26.199497],[107.517021,26.258205],[107.513508,26.702508],[107.8838,25.412239],[107.233588,26.580807],[107.478417,27.066339],[107.542757,25.826283],[107.32405,25.831803],[106.750006,25.429894],[106.447376,26.022116],[106.977733,26.448809],[106.657848,26.128637],[107.87747,25.985183],[106.715963,26.573743],[106.713397,26.58301],[106.670791,26.410464],[106.762123,26.630928],[106.633037,26.676849],[106.626323,26.646358],[106.969438,27.056793],[106.737693,27.092665],[106.599218,26.840672],[106.470278,26.551289],[105.946169,26.248323],[106.259942,26.40608],[105.745609,26.305794],[105.768656,26.056096],[105.618454,25.944248],[106.084515,25.751567],[104.897982,25.088599],[105.192778,25.431378],[104.955347,25.786404],[105.218773,25.832881],[105.650133,25.385752],[106.091563,25.166667],[105.81241,24.983338],[105.471498,25.108959],[104.846244,26.584805],[105.474235,26.210662],[104.95685,26.540478],[104.468367,25.706966],[105.284852,27.302085],[105.609254,27.143521],[106.038299,27.024923],[106.222103,27.459693],[105.768997,26.668497],[105.375322,26.769875],[104.286523,26.859099],[104.726438,27.119243]]]]]}}]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/809709.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

洛谷 - P1187 3D模型

3D模型 题目描述 一座城市建立在规则的 n m n \times m nm 网格上&#xff0c;并且网格均由 1 1 1 \times 1 11 正方形构成。在每个网格上都可以有一个建筑&#xff0c;建筑由若干个 1 1 1 1 \times 1 \times 1 111 的立方体搭建而成&#xff08;也就是所有建筑的底部…

Unity MySql安装部署与Unity连接 下篇

一、前言 上篇讲到了如何安装与部署本地MySql&#xff1b;本篇主要讲Unity与MySql连接、创建表、删除表&#xff0c;然后就是对表中数据的增、删、改、查等操作。再讲这些之前会说一些安装MySql碰到的一些问题和Unity连接的问题。 当把本地MySql部署好之后&#xff0c;我们可能…

rollup 插件架构-驱动设计 PluginDriver

文章目录 GraphPluginDriver生成 PluginDriver 实例和 PluginCache 缓存创建插件上下文 pluginContext初始化 pluginContext 缓存设置、方法插件中使用缓存可替换的 replace pluginContextPluginDriver 提供 asyn、first、parallel 等类型 hookgetSortedPlugins 运行时收集并存…

uniapp 小程序获取WiFi列表

<template><view ><button click"getWifiList">获取WiFi列表</button><scroll-view:scroll-top"scrollTop"scroll-yclass"content-pop"><viewclass"itemInfo"v-for"(item, index) in wifiList&…

网络原理(应用层、传输层)

文章目录 一、应用层1.1 自定义协议1.2 通用协议XMLJSONprotobuf 二、传输层2.1 UDP协议2.2 TCP协议协议端格式及解析可靠性机制确认应答超时重传连接管理&#xff08;三次握手&#xff0c;四次挥手&#xff09;流量控制拥塞控制 效率机制滑动窗口延迟应答捎带应答 粘包问题TCP…

3月产品更新来袭,快来看有没你期待的功能

亮点更新一览 增强制作报表易用性&#xff0c;提升用户体验&#xff0c;如仪表盘图层锁定保持原有层级、即席查询支持批量选择表字段。 增强报表展示和分析能力&#xff0c;满足更多项目需求&#xff0c;如仪表盘表格支持配置是否显示分析菜单按钮、Web电子表格新增多选输入…

Unity(MVC思想)

MVC 一下演示使用MVC和不使用MVC的做法区别。 前两个没有使用MVC 主面板逻辑&#xff1a; mainPanel是该脚本名字 每个场景中不一定存在该面板&#xff0c;单纯的显隐需要去手动挂载过于麻烦。 所以自己读取创建面板出来(每个场景仅创建一次)&#xff0c;存下该面板&#xf…

车载平板丨车载数据终端是什么,如何在农机领域发挥作用

车载数据终端是指一种能够获取和处理车辆及其周边环境信息的设备&#xff0c;它集成了GPS导航、行车记录仪、车况诊断、通信等功能&#xff0c;能够实时监测车辆的位置、速度、行驶路线、油耗等数据&#xff0c;为车辆管理和运营提供数据支持。在农机领域&#xff0c;车载数据终…

C++ //练习 11.16 使用一个map迭代器编写一个表达式,将一个值赋予一个元素。

C Primer&#xff08;第5版&#xff09; 练习 11.16 练习 11.16 使用一个map迭代器编写一个表达式&#xff0c;将一个值赋予一个元素。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /*************************************…

负荷预测 | Matlab基于TCN-BiGRU-Attention单输入单输出时间序列多步预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于TCN-BiGRU-Attention单输入单输出时间序列多步预测&#xff1b; 2.单变量时间序列数据集&#xff0c;采用前12个时刻预测未来96个时刻的数据&#xff1b; 3.excel数据方便替换&#xff0c;运行环境matlab…

Ant Desgin Vue Tree Tab 个性化需求

背景 个人对前端不是很熟&#xff0c;或者说过目就忘&#xff0c;但是对前端还要求不少&#xff0c;这就难搞了。 使用的前端是Mudblazor和ant design vue, Mudblazor 还没有开始搞&#xff0c;现在先用ant design vue&#xff0c;版本是vue3&#xff0c; ant design vue 4版…

经典面试:MySQL的锁机制,表级锁和行级锁的使用场景及解决方案

大家好&#xff0c;今天我们来聊一聊MySQL中的锁机制&#xff0c;特别是表级锁和行级锁的使用场景和解决方案。锁机制是数据库管理系统中用来确保数据一致性和完整性的重要工具。MySQL为我们提供了多种锁机制&#xff0c;每种锁都有其特定的使用场景和注意事项。 一、MySQL的锁…

webpack打包携带某个文件到dist目录

在 Webpack 配置文件 webpack.config.js 中&#xff0c;可以使用 CopyWebpackPlugin 插件实现将特定文件复制到dist目录&#xff1b;安装 CopyWebpackPlugin 插件&#xff1b; npm install copy-webpack-plugin --save-dev 在 webpack.config.js 中引入 CopyWebpackPlugin 插件…

CentOS 7下Vim常用工作模式详解

CentOS 7下Vim常用工作模式详解 在Linux系统中,Vim是一款功能强大的文本编辑器,被广大开发者所青睐。CentOS 7作为广泛使用的Linux发行版,Vim自然也是其标准配置之一。本文将详细介绍CentOS 7下Vim的常用工作模式及其相关命令选项和格式,帮助读者更好地掌握Vim的使用技巧。…

OSPF 开放式最短路径优先协议

目录 技术产生原因&#xff1a;因为RIP存在不足 OSPF优点&#xff1a; RIPV2和OSPFV2比较&#xff1a; 相同点&#xff1a; 不同点&#xff1a; OSPF的结构化部署 --- 区域划分 区域划分的主要目的&#xff1a; 区域边界路由器 --- ABR &#xff1a; 区域划分的要求&am…

【静态分析】静态分析笔记03 - 数据流分析(应用)

参考&#xff1a; 【课程笔记】南大软件分析课程3——数据流分析应用&#xff08;课时3/4&#xff09; - 简书 ---------------------------------------------------------------------------- 1. 数据流分析总览 may analysis: 输出可能正确的信息&#xff08;需做 over-…

【感谢】心怀感恩,共赴知识之旅——致每一位陪伴我突破百万总访问量的您

小伙伴朋友们&#xff1a; 此刻&#xff0c;我怀着无比激动与深深感激的心情&#xff0c;写下这篇特别的博文。今天&#xff0c;我的CSDN总访问量成功突破了百万大关&#xff0c;这不仅是一个数字的跨越&#xff0c;更是你们对我的支持、信任与鼓励的有力见证。在此&#xff0…

C语言学习笔记之操作符篇

目录 算术运算符 移位操作符 整型在内存中的存储&#xff08;补充知识&#xff09; ​编辑左移操作符 右移操作符 位操作符 赋值操作符 复合赋值操作符 单目操作符 关系操作符 逻辑操作符 && 与 || 的计算特点 条件操作符 逗号表达式 下标引用操作符 函…

Bert 将长段分成句子放在一个batch输入

from nltk.tokenize import RegexpTokenizersentence """Thomas Jefferson began building Monticello at the age of 26.""" # 按照自己的规则进行分词,使用正则分词器 # \w 匹配字母、数字、下划线 # 匹配任何非空白字符 tokenizer RegexpTo…

Canal 同步mysql 到es 日期格式报错解决

第一步&#xff1a;下载源码alibaba/canal: 阿里巴巴 MySQL binlog 增量订阅&消费组件 (github.com) 第二步&#xff1a;编辑源码&#xff08;client-adapter下面的clinet-adapter.escore)&#xff1a; com.alibaba.otter.canal.client.adapter.es.core.support.ESSyncUt…