1

我正在开发一个类似于Google Analytics的类似仪表板的 Web 应用程序，其中不同的数据集以不同的格式显示，包括地图。

要求是地图应该具有可点击区域，以便加载特定于该区域的数据，并且这些区域应该具有悬停效果，就像这个一样。我不想使用谷歌地图 API，但我对图书馆持开放态度。

现在，我有 geoJSON 中的地图数据（见下面的片段），这让我想到了我的问题，如何使用 geoJSON 数据在 HTML5 画布中绘制地图？我知道这个问题有多笼统，因为我真的不知道从哪里开始。所以我非常需要有人牵着我的手给我指路。请尽可能详细地保留您的答案。谢谢。

    {
    "type": "FeatureCollection", 
    "features": [{ "type": "Feature", "id": 0, 
    "properties": { "OBJECTID_1": 29, "OBJECTID": 29, "COUNTY_NAM": "BARINGO", "COUNTY_COD": 30, "Shape_Leng": 5.81571392065, "Shape_Area": 0.88451236881 }, 
    "geometry": { "type": "Polygon", "coordinates": [ [ [ 36.028686523000033, 1.276123047000056 ], [ 36.036499023000033, 1.263916016000053 ], [ 36.039306641000053, 1.259887695000032 ],............[ 36.028686523000033, 1.276123047000056 ] ] ] } }
    ]
    }

我的研究使我找到了诸如 openlayers、leaflet 和 d3 之类的库。这些都很棒，但伴随着显着的学习曲线。我不反对学习，但我想要最简单的解决方案来完成这个项目。

4

2 回答 2

0

您需要一个 javascript 映射包。开源选择包括 openlayers 和传单。Google 会为您找到它们。

于 2013-02-14T21:53:28.587 回答
0

使用 Smallworld.js 完成您的任务。

$('.map').smallworld({
    geojson: data
});

// 或者…</p> 

Smallworld.defaults.geojson = data;
$('.map').smallworld();

见 [ http://mikefowler.me/smallworld.js][1]

于 2018-06-04T12:11:41.850 回答