前端等值线分析DEMO（更新地址）

等值线分析是气象软件开发中最重要的内容，这些年陆续使用C、Delphi、C#、Python、JavaScript完成等值线分析及填色代码编写。今年的又一轮疫情封闭在家，再次把JavaScript版的改用TypeScript改写，并使用leaflet、OpenLayers、ECharts等进行了叠加显示测试。顺便尝试下vue3+vite+typescript组合，真的很好用。

Demo见：Contour V3.0 Demo(已失效）

http://111.21.31.154:8000/demo/gcontour/#/

传入格点数据二维数组和等值线值，一行语句完成等值线分析、平滑、输出GeoJSON格式点线面数据，可以很方面地实现在各类GIS系统的叠加显示。

1. 等值线分析

一行语句完成等值线分析，输出geojson

2. 等值线分析参数调整

使用参数选择输出点（高低值中心）、线（等值线）、面（填色）数据

3. leaflet显示测试

简单扩展了leaflet的GeoJson类，实现等值线填色及高低中心标注。

4. OpenLayers显示测试

原以为WebGis的瓦片图只能用3857和4326投影，没想到OpenLayers竟然实现了前端实时栅格投影变换...测试效果不错，相比leaflet，OpenLayers提供了更丰富的模块，等值线显示起来更加容易。

4326投影

53009投影

兰布托投影

移植以前在leaflet下的代码，完成OpenLayers下的高空图绘制

5. ECharts显示测试

6. ECharts 3D显示测试

不要向我要源码，我开源你们立马自主商用，怕了。

前端等值线分析DEMO（更新地址）相关推荐

基于React的PC网站前端架构分析
代码地址如下: http://www.demodashi.com/demo/12252.html 本文适合对象有过一定开发经验的初级前端工程师: 有过完整项目的开发经验,不论大小: 对node有所了 ...
web前端性能分析--实践篇
当我们知道了web前端性能的关键点后,那么接下来要做的就是如何去具体实施并获取这些关键点的数据了.通过前面的学习知道了不少好的工具,经过对比后个人觉得dynatrace还是不错的. 不仅支持ie,ff ...
Android之实现长按Webview页面文字自定义复制、全选、分享、搜索、翻译功能（支持多语言，博文也有Demo下载地址）
1 需求和效果爆照浏览器app封装了Webview,然后实现实现长按Webview页面文字自定义复制.全选.分享.搜索.翻译功能(支持多语言),都在自己的浏览器app里面进行搜索和翻译,不跳到系统浏 ...
《赛博朋克2077》安装方法+使用手册。附补丁更新地址
现已多平台:Steam.GOG.Epic.Playstation.Xbox全面解锁,根据SteamDB数据统计,目前<赛博朋克2077>Steam同时在线玩家数已超过74万. 2020/1 ...
web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址
web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址 Huang Jie Blog .Com-前端开发 http://www.huangjieblog.com/?feed=r ...
游戏接入华为SDK4.0（记录：实名认证问题、错误码查询和支付/游戏/账号demo下载地址）
一.HMS SDK4.0开发前期参数准备 1.打开华为开发者管理中心:链接: 华为开发者管理中心. 按照截图上选择AppGallery Connect 2.打开AppGallery Connect 链 ...
大数据江湖之即席查询与分析（下篇）--手把手教你搭建即席查询与分析Demo
上篇小弟分享了几个"即席查询与分析"的典型案例,引起了不少共鸣,好多小伙伴迫不及待地追问我们:说好的"手把手教你搭建即席查询与分析Demo"啥时候能出?说到就得 ...
前端性能分析工具-Lighthouse
1.前言对于前端开发人员来说,除了实现页面功能外,那就是页面的性能响应问题也要关注.同样对于测试人员在进行性能测试时,也要关注前端页面的性能指标.测试前端性能市面上可以用到的工具也比较多,比如可以用 ...
dynaTrace Ajax：前端性能分析利器
什么是 dynaTrace Ajax 随着 jQuery.Dojo.YUI 等框架的兴起让构建 Web2.0 应用更加容易,但随之带来的定位等应用问题也越来越难,尤其是与性能相关的.dynaTrace ...
前端性能分析工具Dyna Trace使用心得（转）
什么是dynatrace ajax "dynatrace ajax 是一个详细的底层追踪工具,它不仅可以显示所有请求和文件在网络中传输的时间,还会记录浏览器render,CPU消耗.JS解析 ...

前端等值线分析DEMO（更新地址）

前端等值线分析DEMO（更新地址）相关推荐

最新文章

热门文章