如何美化OpenLayers地图

发布于 2024-12-09 09:04:25 字数 203 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空城之時有危險 2024-12-16 09:04:25

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

有关功能样式，请查看http://docs.openlayers.org/library/feature_styling.html

回复收藏 0 原文

红颜悴 2024-12-16 09:04:25

如果您使用谷歌地图，您可以轻松做到这一点！

您必须做的是将 openlayers.js 脚本的源代码复制到您的公开目录，例如 public/js/openlayers.js。脚本已缩小。您需要打开它并找到它显示 google.maps.Map 的位置，并通过在必要时添加中断来缩小该语句（这只会使其更易读）。然后，您需要将 styles 属性添加到第二个参数。一些样式选项可以在这个网站上免费找到：

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 脚本发生更改，您就有破坏地图的风险，因为您拥有该脚本的静态副本。我发现这是一个罕见的事件，并且为了一张更漂亮的地图而付出的代价很小。

You can do this easily if you are using google maps!

What you must do is copy the source of the openlayers.js script to your publicly available directory, such as public/js/openlayers.js. The script is minified. You need to open it up and find where it says google.maps.Map and unminify this statement by adding breaks where necessary ( this just makes it more readible ). You then need to add a styles property to the second argument. Some style options can be found for free at this website:

https://snazzymaps.com/explore

In the end you should have a section like this in your customized openlayers.js file:

 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}]},{}]

}),

The downside here is that if the Google API and/or the openlayers.js script ever change you risk breaking your map since you have a static copy of the script. I find that to be a rare event and is a small price to pay for a more beautiful map.

回复收藏 0 原文