库在浏览器中渲染基于矢量的地图


13

是否有像Leaflet或OpenLayers这样的开源JavaScript库,可在Web或移动应用程序中使用并加载基于矢量的地图而不是图像?我只需要道路信息和一些POI。

我发现的唯一库是polymaps-但我仍然需要一个服务器或服务来提供矢量SVG数据(最好来自OpenStreetMap)。另外,还有一个不错的Android项目Mapsforge,但对于Web应用程序或其他移动设备,我将需要它。

Answers:



10

对于仅绘制矢量,LeafletOpenLayers都可以。那里没有新东西。

对于矢量平铺地图(即,不同缩放级别下的不同分辨率/细节级别), TileStache是一个简单而优质的服务器。我一直在使用Polymaps(AFAIK,唯一通用的可工作js平铺矢量查看器)进行实验。有人使用OpenLayers来添加平铺的矢量支持,但是AFAIK尚未在一年内将其集成到主干中,因此由于缺乏兴趣,它可能不会在不久的将来出现。

TileStache(服务器)本身运行良好。但是,我发现了Polymaps的几个错误,并且由于它不再被更新(废弃的项目),所以我无法说服自己在生产中使用它(我必须自己维护它……我不能证明它的合理性)我自己。)

对我来说,我的解决方案是编写一个可用于AmigoCloud的自定义OpenGL本机矢量渲染器。实际上,这就是在我们的服务中渲染所有地图的方式。为此,TileStache的交付情况很好。

您想看一下TileStache Vector Provider。有关如何使用它的示例,您可以看一下我编写的一个非常基本的矢量测试套件

可悲的是,我不认为Leaflet支持平铺矢量。


谢谢!网络上是否有一个简单的tiletache演示?
Karussell

多图人口密度使用平铺的矢量提供程序缓存(即,不运行tiletache服务器,而只是输出内容的副本)。查看代码应该可以清楚地看到它是矢量平铺的polymaps.org/ex/population.html。遗憾的是,在线提供的tiletache演示不使用矢量提供程序。不过,如果您在本地运行tiletache-server并将本地主机的演示URL替换为配置的矢量数据源(shapefile,postgis等),它将起作用。如果需要,可以在这里寻求帮助。
Ragi Yaser Burhum 2013年

我不同意这个答案,特别是For just drawing vectors, Leaflet or OpenLayers will do just fine. Nothing new there.如果要叠加矢量,这将是可行的,但是如果整个地图(所有基础层)都组织为矢量又会怎么样呢?
giser

@giser这就是为什么我要区分“仅绘制向量”和“向量平铺地图”的原因。第二个答案是我使用纯粹矢量构成的“整个”地图这一术语。这是一个这样的例子:bl.ocks.org/mbostock/5593150
Ragi Yaser Burhum 2013年

@RagiYaserBurhum:对不起,我误会了。
giser

10

更新:自发布以来,Mapbox发布了Mapbox GL JS,它在浏览器中进行基于WebGL的矢量底图渲染。

目前,还没有确定的选项。唯一的完全矢量的生产中地图是Google的MapsGL,由于浏览器的支持和性能,该地图非常有限。

目前,与开源软件最接近的是Kothic.js,并使用Kothic的脚本滚动自己的磁贴。


+1嘿,这很酷!不知道为什么你被否决了!
Karussell

6

如果我正确理解了您的问题,则OpenLayers和Leaflet都将加载/显示矢量数据。

例如

http://leafletjs.com/examples/geojson/

这会将GeoJSON文件加载到传单地图上,该地图在后台通过CloudMade使用OSM。

OpenLayers可能支持更多不同类型的矢量格式,例如KML

http://dev.openlayers.org/examples/dynamic-text-layer.html

如果您是想在服务器上将矢量数据提供到地图上,请查看MapServer,GeoServer和ESRI ArcGIS Server,它们都将矢量数据作为Web Feature Server(WFS)提供到地图上。


我更指的是地图本身是矢量数据,而不是我加载到地图上的某些要素。
Karussell

通过向量类型提供大量数据可能会挂起甚至杀死浏览器,由于<svg>元素过多,您应牢记这一点
Krystian

@Krystian那就是如果您使用SVG渲染地图。显然,您可以使用OpenGL / WebGL进行渲染(就像Google Maps在Android / iOS和实验性WebGL javascript地图中所做的那样)。
Ragi Yaser Burhum 2013年

@RagiYaserBurhum是的,我没有考虑这一点,但是,在这种特殊情况下,由于API的限制,您不能使用webGL。–
Krystian

1
OP没有提到ArcGIS API,因此我没有做过这样的假设(没有GIS就可以完成很多GIS)。是的,我同意将ArcGIS JS与WebGL混合使用会很痛苦。平铺向量是新的-但它们很有可能成为未来。也许
Ragi Yaser Burhum 2013年

2

我发现了另一个有趣的项目GL-Solar,该项目基于webgl技术而不是SVG或canvas。尽管它尚处于早期开发阶段,但这看起来很有希望。

此外MapCSSCartagend3.js应该被提及。d3.js在网上OSM编辑器所使用的iD。还有一篇关于传单和html5渲染的博客文章。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.