如何使用等高线（填充）绘图层创建交互式在线地图？
罗萨萨皮
我想创建一个在线交互式地图，其中填充了等高线图图层，就像可以在openweathermaps上看到的那样（我想将自己的数据用于这些图）。
我需要的也类似于Leaflet热图（heatmap.js），但没有动态更改图形对象的颜色和范围（例如heatmap.js）。我们称它们为静态热图。
我想知道可以使用哪个映射代码/库来生成此类地图。我真的是这些东西的新手，所以请多多包涵。
我尝试了Leaflet，但没有找到任何可创建填充轮廓图图层（静态热图）的插件。我使用Leaflet创建了以下地图，其中矩形是geojson折线，颜色基于为每个矩形分配的某些值（高程）
这种方法的问题在于，如果需要更高的分辨率（更小和更多的矩形），则该站点确实会变慢。我检查了OpenLayers，但没有看到任何类似的示例。
我有矩阵格式的数据：
纬度；长; 价值
。
。在每个网格点中都给出值。
（如果需要，我会转换为其他格式，例如在上述尝试转换为geojson格式的情况下）
数据是静态的，将保存在服务器上。因此，我基本上想要完成的是一个站点，其中一些空间数据表示为填充轮廓图（静态热图），并将其绘制在地图上。
罗萨萨皮
这是我使用开源程序和免费的在线服务解决问题的方法：
（1）在GIS程序中处理数据。我使用了QGIS。我对网格点中的数据进行了插值以获得高分辨率的栅格图。
（2）将后处理的栅格地图另存为经过地理处理的* .tif图像。
（3）将图像导入TileMill。删除底图，仅将图像保留为唯一图层（设置其样式）。
（4）从TileMill中将“地图”导出为MBTiles。这将保存许多与不同缩放级别相对应的* .png文件（图块）。这些类型与Google或openstreetmap用于其在线地图的类型相同。
（5）在Mapbox上创建一个免费帐户，然后创建一个新的Map项目。上载TileMill创建的MBTiles（可以直接从中上传）。样式化。
（6）使用与您创建的项目相对应的Map ID将地图嵌入到html站点中，例如javascript代码：
// Provide your access token
L.mapbox.accessToken = 'Mapbox will generate this for you';
// Create a map in the div #map
var map = L.mapbox.map('map', 'username.mapid', {
minZoom: 5,
maxZoom: 10
}).setView([47, 20], 8);
示例图片（我不希望上面的链接存活多长时间）： 
回想起来，这个问题本来可以更好地适合于GIS堆栈交换。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用Vaadin创建交互式图形？
- 2
如何使用WPF创建交互式图形？
- 3
在 R 中创建交互式绘图
- 4
使用HTML5，CSS3，Javascript创建交互式地图
- 5
使用C＃构建交互式地图
- 6
如何创建交互式USSD菜单？
- 7
如何使用Swift Cocoa Touch创建交互式动画
- 8
如何使用Python脚本在Paraview中创建交互式窗口？
- 9
如何使用Node JS创建交互式控制台界面？
- 10
如何在python中使用MySql数据创建交互式列表
- 11
如何使用WebGL在JavaScript中创建交互式全景查看器？
- 12
R使用滑杆创建交互式绘图，其宽度可以像在Google财经中一样更改（可调整的时间窗口）
- 13
Matlab：用等高线填充等高线图
- 14
Matlab：用等高线填充等高线图
- 15
用libgdx创建交互式动画
- 16
创建交互式SVG HTML表单的最佳方法
- 17
Web库创建交互式流程图
- 18
创建交互式登录会话窗口7
- 19
为命令创建交互式外壳
- 20
创建交互式SVG HTML表单的最佳方法
- 21
在 pexpect 中创建交互式选项
- 22
如何在大数据集上创建交互式图形？
- 23
Vue-如何为文本区域和输入字段创建交互式功能？
- 24
如何创建交互式图纸管理器？
- 25
如何在我的React JS应用中创建交互式复选框？
- 26
如何在Angular中创建交互式Google图表（UI事件）？
- 27
three.jsl-如何创建交互式鼠标控制的360度图像？
- 28
您可以使用字符串拆分创建交互式菜单吗？
- 29
如何使用angularjs构建交互式滚动登录页面？
我来说两句