leaftjs+turfjs+idw纯前端实现等值面绘图+九段线

news2024/5/19 19:03:38

最近有个绘制等值面图的需求。我们一般的实现路径是:

1.后台绘图,用surfer绘制好,给前端调用叠加到地图。

2.后台用python绘图,绘制好给前端调用,叠加到地图。

3.后台进行插值计算、地图裁剪、最终生成geojson文件或kml给地图,前端做叠加操作。

4.数据查出来全扔给前端利用canvas绘等值面图,叠加到地图。

5.前端用turf绘制等值面。

6.直接后端计算好发布图层服务,或者直接将等值面图做成瓦片服务。

目前从效果来看,6效果最好,但实现难度较大;1和2绘制完成后前端叠加地图不能完全重合,可能也更坐标系有关,放大后锯齿感明显;3是比较兼顾的做法,4在前端做克里金或idw简直要命,感觉电脑都能跑报废了。下面是idw插值0.5度的效果。勉强3s以内可以出来。要做10*10公里基本就卡死了。

下面说一下实现步骤:

1.获取数据

2.清洗成格点数据。

3.进行插值计算、参数训练

4.等值面绘制

5.获取边界数据

6.进行边界裁剪

7.进行地图叠加

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

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

相关文章

电商技术揭秘三十四:智能风控业务架构浅析

相关系列文章 电商技术揭秘相关系列文章合集(1) 电商技术揭秘相关系列文章合集(2) 电商技术揭秘二十八:安全与合规性保障 电商技术揭秘二十九:电商法律合规浅析 电商技术揭秘三十:知识产权保…

vue 3 —— 笔记(模板语法,响应式变量)

模板语法: Vue 使用一种基于 html 的模板语法,使我们能声明式将其组件实例绑定到呈现的 dom 上 文本插值 基础数据绑定形式 双大括号 会替换相应组件实例 msg 属性的值 原始html 双大括号会将数据解释为纯文本 不是html 想插入html 使用 v-html 指令 &…

短距离无线通信-Zigbee

阅读引言: 最近在复习之前做过的项目, 所以向将zigbee这个协议分享出来, 一方面可以给需要的人看到, 一方面也方便自己整理zigbee的知识。 目录 一、什么是 ZigBee? 二、Zigbee 通信频段和信道 三、Zigbee协议和Zigbee协议栈 …

ATFX汇市:日本央行并未连续加息,日元剧烈贬值

ATFX汇市:今日11:22,日本央行公布4月利率决议结果,宣布维持0~0.1%的基准利率不变。日元应声贬值,三十分钟内,USDJPY从155.42猛涨至155.89,涨幅47基点。今日14:30,日本央行行长植田和男召开货币政…

类与对象(四)

目录 1.构造函数 1.1初始化列表 1.2 隐式类型转换 2.静态成员 2.1 静态成员变量 2.2静态成员函数 3.友元 3.1 友元函数 3.2 友元类 4.内部类 5.匿名对象 6.拷贝对象时的一些编译器优化 1.构造函数 1.1初始化列表 我们在将构造函数的时候讲过构造函数是对一个对象整体的…

HarmonyOS ArkUI实战开发-NAPI方法扩展

在前 3 小结笔者简单介绍了 NAPI 工程并对生成的源码进行了简单介绍,本节笔者在前 3 小节的基础上对 NAPI 工程做个扩展,再额外添加一个计算 MD5 的方法 md5()。 声明md5方法 在 index.d.ts 文件中声明一个 md5() 方法,该方法接收一个 stri…

自己搭建的大疆无人机RTMP流媒体服务延迟太大

流程:无人机摄像头->图传->遥控器->流媒体服务器->取流播放,延迟有10秒来的,大家有没有什么好的方案。

思考(1)

思考: 1. windows登录的明文密码,存储过程是怎么样的,密文存在哪个文件下,该文件是否可以打开,并且查看到密文 Windows登录的明文密码:是通过LSA(Local Security Authority)进行存储…

用过最佳的wordpress模板

西瓜红,作为一种充满活力和激情的颜色,总是能给人留下深刻的印象。当这种鲜艳的色彩与经典的设计元素相结合时,就能打造出一款既时尚又实用的WordPress企业模板。今天,我们向您隆重推荐这款西瓜红经典配色WordPress企业模板。 这…

HTML批量文件上传方案——图像预览方式

作者:私语茶馆 1.HTML多文件上传的关键方案 多文件上传包括:文件有效性校验,文件预览、存储和进度展示多个方面,本章节介绍的是文件预览的实现方案。 2.文件上传前预览 2.1.效果 选择文件前: 选择文件后: 2.2.CSS文件代码 StorageCenter.css代码 html {font-family:…

计算机组成原理实验(一)--可控加减法电路设计实验

一、一位全加器的设计 视频学习链接:3-2-4 定点数的加法和减法运算 — 一位全加器的硬件逻辑实现_哔哩哔哩_bilibili 仿真电路图: 总结:奇数个1时Si输出为1,偶数个1输出为0;1的个数大于等于2时,Ci输出1 实…

NEMU模拟器源码编译与使用

NEMU模拟器源码编译与使用 1 NEMU介绍2 NEMU编译3 NEMU使用3.1 下载MySBIBenOS3.2 使用riscv64-benos_defconfig编译NEMU3.3 编译MySBIBenOS3.4 运行MySBIBenOS 4 解决NEMU编译报错4.1 找不到readline/readline.h4.2 找不到path_manager.h 1 NEMU介绍 NEMU(NJU Emu…

探索和构建 LLaMA 3 架构:深入探讨组件、编码和推理技术(三)KV缓存

探索和构建 LLaMA 3 架构:深入探讨组件、编码和推理技术(三) KV缓存 在推理的每一步中,只对模型输出的最后一个标记感兴趣,因为已经有了之前的标记。然而,模型需要访问所有先前的标记来决定输出哪个标记&…

Redis入门到实战教程(基础篇)笔记

教学来源: Redis课程介绍导学_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1cr4y1671t?p1一、Redis 入门 1.认识NoSQL 2.Redis在虚拟机中的安装和开机自启 Redis在虚拟机中安装和配置开机自启-CSDN博客https://blog.csdn.net/qq_69183322/article/deta…

力扣37题:回溯算法之解数独

编写一个程序,通过填充空格来解决数独问题。 数独的解法需 遵循如下规则: 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。(请参考示例图) 数独部分空…

每日一题(力扣45):跳跃游戏2--贪心

由于题目已经告诉了我们一定可以跳到,所以我们只需去考虑前进最快的方法。即 判断当前下一步能跳的各个位置中,哪个能带你去去向最远的地方(why? 因为其他位置所能提供的最大范围都没最远那个大,所以最远的那个已经可以…

【元启发式算法】学生心理学优化算法 SPBO算法【Matlab代码#88】

文章目录 【获取资源请见文章第4节:资源获取】1. 学生心理学优化算法(SPBO)1.1 最好的学生1.2 次好的学生1.3 一般的学生1.4 随机提高成绩的学生 2. 部分代码展示3. 仿真结果展示4. 资源获取说明 【获取资源请见文章第4节:资源获取…

VTK----VTK数据结构详解3(代码篇)

上篇文章(VTK----VTK数据结构详解(计算机篇)-CSDN博客)从计算机数据结构(数组、链表等)的角度对数据数组、数据对象、数据属性的实现原理进行了说明,下面从代码的层面详细说明它们的使用及相关实…

【Leetcode笔记】501.二叉搜索树中的众数

文章目录 题目要求ACM 模式代码知识点 题目要求 给你一个含重复值的二叉搜索树(BST)的根节点 root ,找出并返回 BST 中的所有 众数(即,出现频率最高的元素)。 如果树中有不止一个众数,可以按 …

智能合约——提案demo

目录 这是一个超超超级简单的智能合约提案项目,你确定不点进来看一下吗? 引言: 1、搭建开发环境: 2、编写智能合约: 3、部署智能合约: ​编辑​编辑4、编写前端交互代码(使用web3.js&…