Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Создание интерактивных карт с Leaflet

Dd3f18c87b851137000c7427d7bd5d32?s=47 fwdays
March 05, 2013

Создание интерактивных карт с Leaflet

Dd3f18c87b851137000c7427d7bd5d32?s=128

fwdays

March 05, 2013
Tweet

More Decks by fwdays

Other Decks in Programming

Transcript

  1. Владимир Агафонкин 03.2013 создание интерактивных карт с

  2. agafonkin.com

  3. agafonkin.com

  4. agafonkin.com /mourner

  5. rain.in.ua

  6. leafletjs.com

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. open source

  14. • 2.5 года разработки

  15. • 2.5 года разработки • 6335 строки кода

  16. • 2.5 года разработки • 6335 строки кода • 2081

    коммита от 109 разных человек
  17. • 2.5 года разработки • 6335 строки кода • 2081

    коммита от 109 разных человек • 3935 stars, 690 forks
  18. • 2.5 года разработки • 6335 строки кода • 2081

    коммита от 109 разных человек • 3935 stars, 690 forks • issues: 167 открытых, 1310 закрытых
  19. • 2.5 года разработки • 6335 строки кода • 2081

    коммита от 109 разных человек • 3935 stars, 690 forks • issues: 167 открытых, 1310 закрытых • pull requests: 25 открытых, 480 закрытых
  20. простота

  21. скорость отзывчивость легковесность

  22. (min, gzip) JS 28KB CSS 2KB PNG 7KB

  23. современные мобильные старые (доступно) поддержка браузеров

  24. количество возможностей Images Markers Popups Vectors XYZ tiles GeoJSON WMS

    Layer groups Inertial pan Scroll zoom Dblclick zoom Box zoom Keyboard nav Pinch zoom Dbltap zoom Marker drag Pan anim Zoom anim Zoom buttons Attribution Layer switcher Scale Map rotation Fractional zoom WebGL renderer TMS WMTS TileCache MapGuide MapServer KaMap KaMapCache MultiMap Google Yahoo WorldWind Virtual Earth Bing Zoomify UTFGrid OSM ArcGIS ArcIMS GML GeoRSS KML WFS WFST ArcXML Atom CQL SLD GPX OSM XML OWS Context WKT XLS XML Drawing Editing Graticule Measure Pan control Minimap Permalink Clustering
  25. качество возможностей XYZ tiles WMS Images Markers Popups Vectors GeoJSON

    Layer groups Inertial pan Scroll zoom Dblclick zoom Box zoom Keyboard nav Pinch zoom Dbltap zoom Marker drag Pan anim Zoom anim Zoom buttons Attribution Layer switcher Scale + сторонние плагины
  26. var map = L.map('map') .setView([51.505, -0.09], 13); L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png') .addTo(map);

    L.marker([51.5, -0.09]) .addTo(map) .bindPopup('Hello World!') .openPopup(); максимально простой API
  27. None
  28. <div id="map"></div> инициализация карты

  29. <div id="map"></div> body { padding: 0; margin: 0; } html,

    body, #map { height: 100%; } инициализация карты
  30. var map = new L.Map('map'); map.setView(new L.LatLng(51.505, -0.09), 13); инициализация

    карты
  31. var map = L.map('map') .setView([51.505, -0.09], 13); синтаксический сахар

  32. var map = L.map('map') .setView([51.505, -0.09], 13); •фабрики классов синтаксический

    сахар
  33. var map = L.map('map') .setView([51.505, -0.09], 13); •фабрики классов •методы

    по цепочке синтаксический сахар
  34. var map = L.map('map') .setView([51.505, -0.09], 13); •фабрики классов •методы

    по цепочке •координаты массивами синтаксический сахар
  35. L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' ).addTo(map); добавляем слой карты

  36. L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '(c) OSM contributors' }).addTo(map); указываем копирайт

  37. None
  38. • таскание карты с инерцией (мышью и пальцами)

  39. • таскание карты с инерцией (мышью и пальцами) • зум

    скроллом мыши
  40. • таскание карты с инерцией (мышью и пальцами) • зум

    скроллом мыши • зум двойным кликом
  41. • таскание карты с инерцией (мышью и пальцами) • зум

    скроллом мыши • зум двойным кликом • зум к области (shift-drag)
  42. • таскание карты с инерцией (мышью и пальцами) • зум

    скроллом мыши • зум двойным кликом • зум к области (shift-drag) • зум жестами пальцев
  43. • таскание карты с инерцией (мышью и пальцами) • зум

    скроллом мыши • зум двойным кликом • зум к области (shift-drag) • зум жестами пальцев • навигация клавиатурой
  44. • таскание карты с инерцией (мышью и пальцами) • зум

    скроллом мыши • зум двойным кликом • зум к области (shift-drag) • зум жестами пальцев • навигация клавиатурой • анимации
  45. • таскание карты с инерцией (мышью и пальцами) • зум

    скроллом мыши • зум двойным кликом • зум к области (shift-drag) • зум жестами пальцев • навигация клавиатурой • анимации • кнопки зума
  46. • таскание карты с инерцией (мышью и пальцами) • зум

    скроллом мыши • зум двойным кликом • зум к области (shift-drag) • зум жестами пальцев • навигация клавиатурой • анимации • кнопки зума • строка копирайта
  47. http://{s}.tile.osm.org/{z}/{x}/{y}.png тайлы

  48. None
  49. проекции

  50. меркатор

  51. var map = L.map('map', { crs: L.CRS.EPSG3857 }); системы привязки

    координат
  52. var map = L.map('map', { crs: L.CRS.EPSG3857 }); • EPSG

    3857 (Spherical Mercator) системы привязки координат
  53. var map = L.map('map', { crs: L.CRS.EPSG3857 }); • EPSG

    3857 (Spherical Mercator) • EPSG 3395 (True Mercator) системы привязки координат
  54. var map = L.map('map', { crs: L.CRS.EPSG3857 }); • EPSG

    3857 (Spherical Mercator) • EPSG 3395 (True Mercator) • EPSG 4326 (Equirectangular) системы привязки координат
  55. var map = L.map('map', { crs: L.CRS.EPSG3857 }); • EPSG

    3857 (Spherical Mercator) • EPSG 3395 (True Mercator) • EPSG 4326 (Equirectangular) • Simple (flat maps) системы привязки координат
  56. var map = L.map('map', { crs: L.CRS.EPSG3857 }); • EPSG

    3857 (Spherical Mercator) • EPSG 3395 (True Mercator) • EPSG 4326 (Equirectangular) • Simple (flat maps) • ... (Proj4Leaflet plugin) системы привязки координат
  57. var map = L.map('map', {crs: L.CRS.EPSG4326}); var bluemarble = L.tileLayer.wms(

    'http://maps.opengeo.org/geowebcache/service/wms', { layers: 'bluemarble', attribution: '(c) NASA Blue Marble' }).addTo(map); WMS-слой
  58. None
  59. L.marker([51.504, -0.159]) .addTo(map); маркеры

  60. None
  61. L.marker([51.504, -0.159]) .addTo(map) .bindPopup('Очень серьёзное место') .openPopup(); маркеры с попапом

  62. None
  63. None
  64. свои иконки для маркеров var greenIcon = L.icon({ iconUrl: 'leaf-green.png',

    shadowUrl: 'leaf-shadow.png', iconSize: [38, 95], shadowSize: [50, 64], iconAnchor: [22, 94], shadowAnchor: [4, 62], popupAnchor: [-3, -76] }); L.marker([51.504, -0.159], {icon: greenIcon}) .addTo(map);
  65. HTML-иконки var icon = L.divIcon({ html: '<div><span>' + num +

    '</span></div>', className: 'marker-cluster-' + size, iconSize: [40, 40] });
  66. группы var group = L.layerGroup(); marker1.addTo(group); marker2.addTo(group); group.addTo(map);

  67. L.control.layers({ "Minimal": minimal, "Night View": midnight }, { "Motorways": motorways,

    "Cities": cities }) .addTo(map); control.layers
  68. None
  69. Leaflet.markercluster var group = L.markerClusterGroup(); marker1.addTo(group); marker2.addTo(group); ... group.addTo(map);

  70. None
  71. None
  72. векторные слои

  73. L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(map); векторные слои

  74. векторные слои • SVG

  75. векторные слои • SVG • Canvas

  76. векторные слои • SVG • Canvas • VML

  77. векторные слои • SVG • Canvas • VML • клиппинг

  78. векторные слои • SVG • Canvas • VML • клиппинг

    • упрощение
  79. mourner.github.com/simplify-js

  80. L.polygon([...], { weight: 2, opacity: 1, color: 'white', dashArray: '3',

    fillOpacity: 0.7, fillColor: '#FC4E2A' }).addTo(map); векторные слои
  81. var geojsonFeature = { "type": "Feature", "properties": { "name": "Coors

    Field", "amenity": "Baseball Stadium" }, "geometry": { "type": "Point", "coordinates": [-104.99404, 39.75621] } }; L.geoJson(geojsonFeature).addTo(map); GeoJSON
  82. function style(feature) { return { fillColor: getColor(feature.properties.density) }; } L.geoJson(statesData,

    { style: style }).addTo(map); GeoJSON
  83. function addInteraction(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click:

    zoomToFeature }); } L.geoJson(statesData, { style: style onEachFeature: addInteraction }).addTo(map); GeoJSON
  84. события L.Map: click dblclick mousedown mouseup mouseover mouseout mousemove contextmenu

    focus blur preclick load viewreset movestart move moveend dragstart drag dragend zoomstart zoomend autopanstart layeradd layerremove baselayerchange locationfound locationerror popupopen popupclose
  85. события map.on('click', function (e) { console.log(e.latlng); });

  86. Leaflet.draw

  87. leafletjs.com/plugins.html 48 плагинов

  88. Спасибо! Вопросы? Владимир Агафонкин agafonkin@gmail.com