如何使用轮廓（填充）绘图层创建交互式在线地图？

Question

我想创建一个带有填充轮廓图层的在线交互式地图，就像在openweathermaps上可以看到的那样（我想用我自己的数据作为图表）。

我需要的也与Leaflet热图（heatmap.js）类似，但没有动态更改图形对象的颜色和范围（如heatmap.js的情况）。我们称之为静态热图。

我想知道可以使用哪个映射代码/库来生成这样的映射。 我真是新手，所以请耐心等待。

我尝试了Leaflet，但没有找到任何可以创建填充轮廓图层（静态热图）的插件。我使用Leaflet创建了以下地图，其中矩形是geojson折线，颜色基于每个矩形的一些指定值（海拔）

my leaflet attempt

这种方法的问题在于，如果需要更高的分辨率（更小和更多的矩形），该网站真的会变慢。 我检查了OpenLayers，但没有看到任何类似的例子。

我有矩阵格式的数据：
纬度;长;值
。
。 值在每个网格点中给出。

（如果需要，我会转换成其他格式，例如上面尝试使用geojson格式的情况）

数据是静态的，将保存在服务器上。 所以我基本上想要完成的是一个站点，其中一些空间数据表示为填充轮廓图（静态热图），并将其绘制在地图上。

Answer 1

以下是我使用开源程序和免费在线服务解决问题的方法：

（1）处理GIS程序中的数据。我使用了 QGIS 。我插入了网格点中的数据，以获得高分辨率的栅格地图。

（2）将经过后处理的栅格地图另存为地理参考* .tif图像。

（3）将图片导入 TileMill 。删除底图并仅将图像保留为唯一图层（样式）。

（4）从TileMill导出'map'作为MBTiles。这将保存对应于不同缩放级别的多个* .png文件（切片）。这些与google或openstreetmap用于其在线地图的类型相同。

（5）在 Mapbox 创建一个免费帐户并创建一个新的地图项目。上传由TileMill创建的MBTiles（可以直接从它上传）。风格吧。

（6）使用与您创建的项目相对应的地图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);

<强> Example hosted on Mapbox

示例图片（我不知道上面的链接会持续多久）：

回想起来，这个问题更适合GIS stack exchange。