Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Создание интерактивных карт с Leaflet
Search
fwdays
March 05, 2013
Programming
0
5.4k
Создание интерактивных карт с Leaflet
fwdays
March 05, 2013
Tweet
Share
More Decks by fwdays
See All by fwdays
Symfony best practices и не только Олег Зинченко
fwdays
0
2.1k
Beyond Testing Михаил Боднарчук
fwdays
0
770
Yii2 - на пути от Alpha до GA. Взгляд с практической стороны Александр Бордун
fwdays
0
1.8k
Laravel 4: простота во всем. Евгений Косинский
fwdays
0
950
Маленькая библиотека для большой компании. Антон Шевчук
fwdays
0
3.8k
Phalcon. Что нового? Александр Торош
fwdays
0
1.1k
Выбираем поисковик умом головы. Андрей Аксенов
fwdays
0
1.4k
Past, Present, and Future: The Evolution of PHP Development. Nate Abele
fwdays
0
760
Функциональный тулчейн Nix
fwdays
1
450
Other Decks in Programming
See All in Programming
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
PicoRuby on Rails
makicamel
2
120
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
620
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
290
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
3
1k
NPOでのDevinの活用
codeforeveryone
0
650
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
170
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Featured
See All Featured
Side Projects
sachag
455
42k
Thoughts on Productivity
jonyablonski
69
4.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
The World Runs on Bad Software
bkeepers
PRO
69
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Docker and Python
trallard
44
3.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Transcript
Владимир Агафонкин 03.2013 создание интерактивных карт с
agafonkin.com
agafonkin.com
agafonkin.com /mourner
rain.in.ua
leafletjs.com
None
None
None
None
None
None
open source
• 2.5 года разработки
• 2.5 года разработки • 6335 строки кода
• 2.5 года разработки • 6335 строки кода • 2081
коммита от 109 разных человек
• 2.5 года разработки • 6335 строки кода • 2081
коммита от 109 разных человек • 3935 stars, 690 forks
• 2.5 года разработки • 6335 строки кода • 2081
коммита от 109 разных человек • 3935 stars, 690 forks • issues: 167 открытых, 1310 закрытых
• 2.5 года разработки • 6335 строки кода • 2081
коммита от 109 разных человек • 3935 stars, 690 forks • issues: 167 открытых, 1310 закрытых • pull requests: 25 открытых, 480 закрытых
простота
скорость отзывчивость легковесность
(min, gzip) JS 28KB CSS 2KB PNG 7KB
современные мобильные старые (доступно) поддержка браузеров
количество возможностей 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
качество возможностей 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 + сторонние плагины
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
None
<div id="map"></div> инициализация карты
<div id="map"></div> body { padding: 0; margin: 0; } html,
body, #map { height: 100%; } инициализация карты
var map = new L.Map('map'); map.setView(new L.LatLng(51.505, -0.09), 13); инициализация
карты
var map = L.map('map') .setView([51.505, -0.09], 13); синтаксический сахар
var map = L.map('map') .setView([51.505, -0.09], 13); •фабрики классов синтаксический
сахар
var map = L.map('map') .setView([51.505, -0.09], 13); •фабрики классов •методы
по цепочке синтаксический сахар
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.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '(c) OSM contributors' }).addTo(map); указываем копирайт
None
• таскание карты с инерцией (мышью и пальцами)
• таскание карты с инерцией (мышью и пальцами) • зум
скроллом мыши
• таскание карты с инерцией (мышью и пальцами) • зум
скроллом мыши • зум двойным кликом
• таскание карты с инерцией (мышью и пальцами) • зум
скроллом мыши • зум двойным кликом • зум к области (shift-drag)
• таскание карты с инерцией (мышью и пальцами) • зум
скроллом мыши • зум двойным кликом • зум к области (shift-drag) • зум жестами пальцев
• таскание карты с инерцией (мышью и пальцами) • зум
скроллом мыши • зум двойным кликом • зум к области (shift-drag) • зум жестами пальцев • навигация клавиатурой
• таскание карты с инерцией (мышью и пальцами) • зум
скроллом мыши • зум двойным кликом • зум к области (shift-drag) • зум жестами пальцев • навигация клавиатурой • анимации
• таскание карты с инерцией (мышью и пальцами) • зум
скроллом мыши • зум двойным кликом • зум к области (shift-drag) • зум жестами пальцев • навигация клавиатурой • анимации • кнопки зума
• таскание карты с инерцией (мышью и пальцами) • зум
скроллом мыши • зум двойным кликом • зум к области (shift-drag) • зум жестами пальцев • навигация клавиатурой • анимации • кнопки зума • строка копирайта
http://{s}.tile.osm.org/{z}/{x}/{y}.png тайлы
None
проекции
меркатор
var map = L.map('map', { crs: L.CRS.EPSG3857 }); системы привязки
координат
var map = L.map('map', { crs: L.CRS.EPSG3857 }); • EPSG
3857 (Spherical Mercator) системы привязки координат
var map = L.map('map', { crs: L.CRS.EPSG3857 }); • EPSG
3857 (Spherical Mercator) • EPSG 3395 (True Mercator) системы привязки координат
var map = L.map('map', { crs: L.CRS.EPSG3857 }); • EPSG
3857 (Spherical Mercator) • EPSG 3395 (True Mercator) • EPSG 4326 (Equirectangular) системы привязки координат
var map = L.map('map', { crs: L.CRS.EPSG3857 }); • EPSG
3857 (Spherical Mercator) • EPSG 3395 (True Mercator) • EPSG 4326 (Equirectangular) • Simple (flat maps) системы привязки координат
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) системы привязки координат
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-слой
None
L.marker([51.504, -0.159]) .addTo(map); маркеры
None
L.marker([51.504, -0.159]) .addTo(map) .bindPopup('Очень серьёзное место') .openPopup(); маркеры с попапом
None
None
свои иконки для маркеров 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);
HTML-иконки var icon = L.divIcon({ html: '<div><span>' + num +
'</span></div>', className: 'marker-cluster-' + size, iconSize: [40, 40] });
группы var group = L.layerGroup(); marker1.addTo(group); marker2.addTo(group); group.addTo(map);
L.control.layers({ "Minimal": minimal, "Night View": midnight }, { "Motorways": motorways,
"Cities": cities }) .addTo(map); control.layers
None
Leaflet.markercluster var group = L.markerClusterGroup(); marker1.addTo(group); marker2.addTo(group); ... group.addTo(map);
None
None
векторные слои
L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(map); векторные слои
векторные слои • SVG
векторные слои • SVG • Canvas
векторные слои • SVG • Canvas • VML
векторные слои • SVG • Canvas • VML • клиппинг
векторные слои • SVG • Canvas • VML • клиппинг
• упрощение
mourner.github.com/simplify-js
L.polygon([...], { weight: 2, opacity: 1, color: 'white', dashArray: '3',
fillOpacity: 0.7, fillColor: '#FC4E2A' }).addTo(map); векторные слои
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
function style(feature) { return { fillColor: getColor(feature.properties.density) }; } L.geoJson(statesData,
{ style: style }).addTo(map); GeoJSON
function addInteraction(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click:
zoomToFeature }); } L.geoJson(statesData, { style: style onEachFeature: addInteraction }).addTo(map); GeoJSON
события 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
события map.on('click', function (e) { console.log(e.latlng); });
Leaflet.draw
leafletjs.com/plugins.html 48 плагинов
Спасибо! Вопросы? Владимир Агафонкин
[email protected]