文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用geoJSON坐标(或数据)在HTML5画布上绘制交互式地图

问如何使用geoJSON坐标(或数据)在HTML5画布上绘制交互式地图
EN

Stack Overflow用户

提问于 2013-02-15 05:08:12

回答 2查看 3.7K关注 0票数 1

我正在开发一个类似于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等图书馆。这些都很棒，但也伴随着重要的学习曲线。我不反对学习，但我想要最简单的解决方案来完成这个项目。

html

canvas

map

geojson

回答 2

Stack Overflow用户

发布于 2013-02-15 05:53:29

您需要一个javascript映射包。开源选择包括openlayers和leaflet。谷歌会帮你找到它们。

票数 0

Stack Overflow用户

发布于 2018-06-04 20:11:42

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

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

//或…

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

请参阅[http://mikefowler.me/smallworld.js][1]

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14884066

复制

相似问题

问如何使用geoJSON坐标(或数据)在HTML5画布上绘制交互式地图
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用geoJSON坐标(或数据)在HTML5画布上绘制交互式地图EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用geoJSON坐标(或数据)在HTML5画布上绘制交互式地图
EN