Question

我需要构建一个Web应用程序，用于呈现具有不同标记的Map。我认为使用OpenLayers的解决方案，但我希望地图具有“更好”的外观（例如，http://leaflet.cloudmade.com/）。你知道任何可以与OpenLayers一起使用的库来改善它的外观吗？

Answer 1

您可以根据需要使用css和图像设置地图按钮的样式。蓝色默认按钮上的热门主题是https://github.com/developmentseed/openlayers_themes（更多信息http://support.mapbox.com/kb/mapping-101/openlayers-themes）

对于要素样式，请查看http://docs.openlayers.org/library/feature_styling.html

Answer 2

自定义OpenLayers会给你带来痛苦，但这并不意味着看起来不错。只需使用Leaflet，你就可以了。：）

Answer 3

如果您使用的是Google地图，则可以轻松完成此操作！

您必须执行的操作是将openlayers.js脚本的源复制到公共目录，例如public/js/openlayers.js。脚本缩小了。你需要打开它并找到它所在的位置google.maps.Map并通过在必要时添加断点来解释这个语句（这只是让它更容易阅读）。然后，您需要将样式属性添加到第二个参数。在这个网站上可以找到一些样式选项：

https://snazzymaps.com/explore

最后，您应该在自定义的openlayers.js文件中包含这样的部分：

 google.maps.Map(b,{
    center:a?new google.maps.LatLng(a.lat,a.lon):new google.maps.LatLng(0,0),
    zoom:this.map.getZoom()||0,
    mapTypeId:this.type,
    disableDefaultUI:!0,
    keyboardShortcuts:!1,
    draggable:!1,
    disableDoubleClickZoom:!0,
    scrollwheel:!1,
    streetViewControl:!1,
    styles: [{"featureType":"road","stylers":[{"hue":"#5e00ff"},{"saturation":-79}]},{"featureType":"poi","stylers":[{"saturation":-78},{"hue":"#6600ff"},{"lightness":-47},{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"lightness":22}]},{"featureType":"landscape","stylers":[{"hue":"#6600ff"},{"saturation":-11}]},{},{},{"featureType":"water","stylers":[{"saturation":-65},{"hue":"#1900ff"},{"lightness":8}]},{"featureType":"road.local","stylers":[{"weight":1.3},{"lightness":30}]},{"featureType":"transit","stylers":[{"visibility":"simplified"},{"hue":"#5e00ff"},{"saturation":-16}]},{"featureType":"transit.line","stylers":[{"saturation":-72}]},{}]

}),

这里的缺点是，如果Google API和/或openlayers.js脚本发生了变化，那么由于您拥有该脚本的静态副本，因此可能会破坏您的地图。我发现这是一个罕见的事件，并且为一张更漂亮的地图付出的代价很小。

Answer 4

不太确定哪些部分你想要“美化”，但你可能比看GeoExt更糟糕，这将sensha Extjs的UI与openlayers相结合。我用它来制作一些非常有吸引力的webGIS应用程序

希望有帮助

奥利

如何美化OpenLayers地图

4 个答案: