Как украсить карты OpenLayers - PullRequest
Новая
       21

Как украсить карты OpenLayers

4 голосов
/ 11 октября 2011

Мне нужно создать веб-приложение, которое отображает карту с разными маркерами.Я думаю использовать решение в качестве OpenLayers, но мне бы хотелось, чтобы карты выглядели «лучше» (например, http://leaflet.cloudmade.com/).. Знаете ли вы какую-либо библиотеку, которую можно использовать с OpenLayers для улучшения ее внешнего вида?

Ответы [ 4 ]

4 голосов
/ 21 декабря 2011

Вы можете стилизовать кнопки карты, как вы хотите, используя CSS и изображения. Популярная тема поверх синей кнопки по умолчанию: https://github.com/developmentseed/openlayers_themes (дополнительная информация http://support.mapbox.com/kb/mapping-101/openlayers-themes)

Для стилей функций взгляните на http://docs.openlayers.org/library/feature_styling.html

2 голосов
/ 20 февраля 2012

Настройка OpenLayers даст вам головную боль, просто она не должна была выглядеть красиво. Просто используйте Leaflet, и все будет в порядке. :)

1 голос
/ 01 июня 2015

Вы можете сделать это легко, если используете карты 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}]},{}]

}),

Недостатком здесь является то, что если API Google и / или скрипт openlayers.js когда-либо изменятся, вы рискуете сломать карту, так как у вас есть статическая копия скрипта. Я считаю, что это редкое событие, и это небольшая цена за более красивую карту.

0 голосов
/ 31 октября 2011

не слишком уверен, какие части вы хотите «украсить», но вы могли бы сделать хуже, чем взглянуть на GeoExt , это объединяет пользовательский интерфейс Sensha Extjs с openlayers. я использовал его для создания очень привлекательных приложений webGIS

надеюсь, что это поможет

Олли

...