如何美化OpenLayers地圖

Question

我需要構建一個Web應用程序，該應用程序呈現具有不同標記的地圖。 我認爲要使用OpenLayers的解決方案，但我希望地圖具有「更好」的外觀（例如，http://leaflet.cloudmade.com/）。你知道任何可以與OpenLayers一起使用的庫來改善它的外觀嗎？

Answer 1

不太確定你想「美化」哪些部分，但你可以做的比看看GeoExt更糟糕，這將sensha Extjs的UI與開放層組合在一起。我用它來產生一些非常有吸引力的WebGIS應用

希望是幫助

奧利

Answer 2

可以樣式地圖按鈕，只要你想使用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 3

定製的OpenLayers會給你頭都疼，只是並不意味着要好看。只需使用傳單，你會沒事的。 :)

Answer 4

如果你使用谷歌地圖，你可以輕鬆做到這一點！

您必須做的是將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腳本改變了你的腳本的靜態副本，那麼你可能會冒險破壞你的地圖。我覺得這是一件很罕見的事情，並且爲了更漂亮的地圖付出的代價是很小的。