等直面绘图解决方案

[复制链接]
查看: 1426   回复: 0

265

主题

265

帖子

1494

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1494
2023-11-4 17:32:20   显示全部楼层   阅读模式  
1.png


等值面绘图解决方案:

攻略1:点击跳转

攻略2:https://blog.csdn.net/jessezappy/article/details/108891162


1.读取产生等直面绘图得原始数据.geojson格式得文件

首先,您需要安装 D3.js三方库来读取这个文件。您可以通过npm来安装:
npm install d3

[color=rgba(85, 119, 51, 0.733333333333333)]d3.js库得开发文档https://d3js.org/d3-color

[color=rgba(85, 119, 51, 0.733333333333333)]然后,您可以使用以下代码来读取和解析GeoJSON文件:

const GeoJSON = require('geojson-io').GeoJSON;  
  
let reader = new GeoJSON();  
  
reader.parse(geojsonData).then(features => {  
    console.log(features);  
});
在上述代码中,geojsonData应该是您的GeoJSON数据的字符串表示形式。parse方法将解析GeoJSON数据并返回一个Promise,该Promise在解析完成后将解析出的特征作为参数解决。
如果你的数据来自URL,你可以使用Fetch API或者XMLHttpRequest来获取数据,然后再用parse方法解析。
另外值得注意的是,geojson-io库还可以将JavaScript对象转换为GeoJSON对象,这对于将您的数据导出为GeoJSON格式非常有用。


2.geojson测试数据下载如果客户,geojson读取不了可以去阿里云下载测试数据测试自己写的对不对

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4%20%20下载后用%20https://mapshaper.org/

参考:https://blog.csdn.net/nihaowoshi ... 06580-null-null.142^v96^pc_search_result_base8&utm_term=kriging.js%E7%AD%89%E5%80%BC%E5%9B%BE&spm=1018.2226.3001.4187

3.我们使用d3.js库来制作我们得图表
https://d3js.org/


4.等值面图实现得其中一个库kriging.js

https://github.com/oeo4b/kriging.js


安装口令
npm install kriging
vue3导入方法
import * as kriging from "kriging"


回复

使用道具 举报

您需要登录后才可以回帖   登录 立即注册

高级模式

南通谢凡软件科技有限公司