Question

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

要求是地图应具有可点击区域，以便加载特定于该区域的数据，并且区域应具有悬停效果much like this one。我不想使用谷歌地图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等图书馆。这些都很棒，但具有重要的学习曲线。我没有反对学习，但我想要完成项目的最简单的解决方案。

Answer 1

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

Answer 2

使用Smallworld.js完成任务。

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

// OR ...

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

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

如何使用geoJSON坐标（或数据）在HTML5画布上绘制交互式地图

2 个答案: