Листовка - изменить цвет карты

Question

Можно ли нарисовать карту буклета следующим образом (вода: серый, земля: желтый;)? Мне не удалось найти ссылку в документах. http://leafletjs.com/features.html

Если да, то легко, как с картами google, или мне нужно как-то окрасить многоугольники, представляющие землю и воду?

Я хотел бы воспользоваться информационными окнами листовка, но мне нужно создать такую ​​карту.

Answer 1

Самый простой способ будет сделать это, добавив их в качестве многоугольников листовка-х L.GeoJSON. Сначала вам нужно найти правильный набор данных о границах мира. Я нашел его здесь: https://github.com/johan/world.geo.json Сохраните файл world.geo.json, чтобы вы могли использовать его на своем собственном сервере. Теперь инициализировать простую карту:

var map = L.map('map', { 
    'center': [0, 0], 
    'zoom': 0, 
    'layers': [ 
     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
      'attribution': 'Map data © OpenStreetMap contributors' 
     }) 
    ] 
}); 

Fetch файл GeoJSON с помощью своей любимой библиотеки XHR (я использую JQuery в данном примере), а затем использовать эти данные для инициализации GeoJSON слоя и сделать некоторые стили:

$.getJSON('world.geo.json', function (geojson) { // load file 
    L.geoJson(geojson, { // initialize layer with data 
     style: function (feature) { // Style option 
      return { 
       'weight': 1, 
       'color': 'black', 
       'fillColor': 'yellow' 
      } 
     } 
    }).addTo(map); // Add layer to map 
}); 

Вот и все, не может быть проще. Вот рабочий пример на Plunker:

http://plnkr.co/edit/UGQ9xt?p=preview

(обратите внимание, что я загрузить файл GeoJSON непосредственно через Gitraw/Github, но вы не должны делать это в производственной площадке)

И вот ссылка на L.GeoJSON:

http://leafletjs.com/reference.html#geojson

Edit: Другие варианты являются более сложными, но не имеют некоторые недостатки вы упоминали в комментариях, здесь лучшее, что я могу придумать:

Используя комбинацию листовки и потрясающую библиотеку D3 от Майка Бостока. Вот краткий пример: http://bost.ocks.org/mike/leaflet/ Он не страдает от перерисовывания на кастрюле, но его сложнее понять.

Другое решение использует Mapbox У них есть инструмент под названием TileMill, который позволяет создавать собственные плитки. Это было бы идеальным решением, у него не было бы ни одного из упомянутых недостатков, и вы можете создать почти все. Единственным недостатком является то, что вам нужно будет устраивать плитки самостоятельно.

Answer 2

Чтобы добавить ответ @ iH8 дал:

Я использовал TileMill с TileStache настроить довольно базовую карту мира, и это выглядело великолепно. С ним было очень легко работать. Он также поддерживает использование файлов формы - если вы так склонны.

Вот .mss вы можете начать ерзать вокруг с подобраться к цветовой схеме вы хотите:

Map { 
    background-color: #e0e0e0; 
} 

#countries { 
    ::outline { 
    line-color: #000000; 
    line-width: 2; 
    line-join: round; 
    } 
    polygon-fill: #ffce0c; 
} 

Сделав красивую карту, которую вы можете генерировать MBtiles и служить это с TileStache.

При использовании TileStache используется tut. Надеюсь, что это поможет!