{"id":297950,"date":"2020-01-30T15:00:15","date_gmt":"2020-01-30T15:00:15","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=297950"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2020-01-30T15:00:15","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=297950","title":{"rendered":"Leaflet. \u0414\u0440\u0443\u0436\u0438\u043c Image \u0441 Canvas"},"content":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/485698\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/cw\/6h\/fe\/cw6hfekjfdvlkgjvjrpaw4lhen0.jpeg\" alt=\"Leaflet Map\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u043e\u0440\u043e\u0433\u0438\u0435 \u0445\u0430\u0431\u0440\u0430\u0445\u0430\u0431\u0440\u043e\u0432\u0446\u044b!<\/p>\n<p>  <b>Leaflet<\/b> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u044b \u043d\u0430 \u0412\u0430\u0448 \u0441\u0430\u0439\u0442 \u0438 \u043b\u0435\u0433\u043a\u043e \u0438\u0445 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Canvas-\u0441\u043b\u043e\u0435 \u043a\u0430\u0440\u0442, \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u043c\u0430\u0440\u043a\u0435\u0440\u0430\u043c\u0438.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2>\u0417\u0430\u0434\u0430\u0447\u0430<\/h2>\n<p>  \u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u0440\u0435\u043a \u0441 \u043e\u0442\u043c\u0435\u0442\u043a\u043e\u0439 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0421\u0442\u0430\u0442\u0443\u0441\u044b \u043e\u0442\u043c\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043c\u0430\u0440\u043a\u0435\u0440\u0430\u043c\u0438. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442.<\/p>\n<ul>\n<li>\u0414\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u0440\u0442\u044b, \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Canvas.<\/li>\n<li>\u041c\u0430\u0440\u043a\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0434\u0432\u0443\u0445 \u0442\u0438\u043f\u043e\u0432: \u0442\u043e\u0447\u043a\u0438 \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430 \u2014 \u0442\u043e \u0441\u0432\u0435\u0440\u0445\u0443 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043c\u0430\u0440\u043a\u0435\u0440 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u0430.<\/li>\n<li>\u041a\u0430\u0436\u0434\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043d\u0435\u0433\u043e \u043c\u044b\u0448\u043a\u043e\u0439 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438).<\/li>\n<\/ul>\n<p>  <\/p>\n<h2>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h2>\n<p>  \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/leafletjs.com\/\">Leaflet.js<\/a> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043a\u0430\u0440\u0442\u0443.<\/p>\n<pre><code class=\"javascript\">const map = L.map('map', {     preferCanvas: true, }).setView([51.505, -0.09], 13); L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map);<\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c 3 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430: \u0431\u0430\u0437\u043e\u0432\u044b\u0439 (\u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0440), \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435) \u0438 \u043e\u0448\u0438\u0431\u043a\u0430 (\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0440).<\/p>\n<p>  \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u2014 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0440.<\/p>\n<pre><code class=\"javascript\">\/* \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0440 *\/ L.circleMarker(L.latLng(51.52, -0.109), {     radius: 10,     fillColor: '#27ae60',     fillOpacity: 1,     color: '#fff',     weight: 3, }).addTo(map);  \/* \u041c\u0430\u0440\u043a\u0435\u0440 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f *\/ L.marker(L.latLng(51.52, -0.109), {     icon: L.icon({         iconUrl: 'icon.png',   \/\/ url \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438         iconSize: [40, 40],   \/\/ \u0440\u0430\u0437\u043c\u0435\u0440 \u043c\u0430\u0440\u043a\u0435\u0440\u0430         iconAnchor: [20, 20],   \/\/ \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0446\u0435\u043d\u0442\u0440\u0430     }), }).addTo(map);  \/* \u041c\u0430\u0440\u043a\u0435\u0440 \u043e\u0448\u0438\u0431\u043a\u0438 *\/ L.circleMarker(L.latLng(51.52, -0.109), {     radius: 8,     fillColor: '#f44334',     fillOpacity: 1,     color: '#fff',     weight: 3, }).addTo(map);<\/code><\/pre>\n<p>  <\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h2>\n<p>  Leaflet \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u043f\u043e\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439. \u041d\u043e \u043d\u0430 \u0434\u0435\u043b\u0435 \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. L.marker \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0431\u044b\u043a\u043d\u043e\u0432\u0435\u043d\u043d\u043e\u0433\u043e IMG, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 \u0441\u043b\u043e\u044f Canvas.<\/p>\n<p>  \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043b\u0438\u0431\u043e \u043f\u0435\u0440\u0435\u0434, \u043b\u0438\u0431\u043e \u043f\u043e\u0434 Canvas. \u0418 \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435, \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c L.marker \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u0445 L.circleMarker.<\/p>\n<p>  \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u0443\u0436\u0435\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0442\u043e\u043c \u0436\u0435 Canvas, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u044b.<\/p>\n<p>  <b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u0412 \u0441\u0435\u0442\u0438 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0445 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Canvas. \u041d\u043e \u043e\u043d\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 Canvas, \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0433\u0440\u0443\u043f\u043f\u0443 \u0441\u043b\u043e\u0435\u0432! \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u043f\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0443 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c. \u0410 \u0442\u0430\u043a \u0436\u0435 Canvas-\u0441\u043b\u043e\u0438 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430, \u0438 \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043c\u044b\u0448\u043a\u043e\u0439 \u043d\u0430 \u043c\u0430\u0440\u043a\u0435\u0440 \u043d\u0438\u0436\u0435\u0441\u0442\u043e\u044f\u0449\u0435\u0433\u043e \u0441\u043b\u043e\u044f \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c!<\/b><\/p>\n<h2>\u0420\u0435\u0448\u0435\u043d\u0438\u0435<\/h2>\n<p>  <b>\u0428\u0430\u0433 1.<\/b> \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 \u043e\u0442 L.CircleMarker, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 &#8216;img&#8217;, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u0433\u043e \u0432 L.Canvas.<\/p>\n<pre><code class=\"javascript\">const CanvasMarker = L.CircleMarker.extend({     _updatePath() {         if (!this.options.img.el) { \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 IMG             const img = document.createElement('img');             img.src = this.options.img.url;             this.options.img.el = img;             img.onload = () =&gt; {                 this.redraw();  \/\/\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443             };         } else {             this._renderer._updateImg(this);    \/\/\u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c _updateImg         }     }, });  L.canvasMarker = function (...options) {     return new CanvasMarker(...options); };<\/code><\/pre>\n<p>  <b>\u0428\u0430\u0433 2.<\/b> \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 _updateImg \u0432 L.Canvas. \u041e\u043d \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043d\u0430 \u0428\u0430\u0433\u0435 1 \u0438 \u0440\u0438\u0441\u0443\u0435\u0442 \u0435\u0433\u043e \u043d\u0430 Canvas.<\/p>\n<pre><code class=\"javascript\">L.Canvas.include({     _updateImg(layer) { \/\/\u041c\u0435\u0442\u043e\u0434 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f img \u043d\u0430 Canvas-\u0441\u043b\u043e\u0439         const { img } = layer.options;         const p = layer._point.round();         this._ctx.drawImage(img.el, p.x - img.size[0] \/ 2, p.y - img.size[1] \/ 2, img.size[0], img.size[1]);     }, });<\/code><\/pre>\n<p>  <b>\u0428\u0430\u0433 3.<\/b> \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043c\u0435\u0441\u0442\u043e L.marker \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c L.canvasMarker. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 &#8216;anchor&#8217; \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0442.\u043a. \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438!<\/p>\n<pre><code class=\"javascript\">\/* \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0440 *\/     L.circleMarker(L.latLng(51.52, -0.109), {         radius: 10,         fillColor: '#27ae60',         fillOpacity: 1,         color: '#fff',         weight: 3,     }).addTo(map);      \/* \u041c\u0430\u0440\u043a\u0435\u0440 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f *\/     L.canvasMarker(L.latLng(51.52, -0.109), {         img: {             url: 'icon.png',             size: [40, 40],         },     }).addTo(map);      \/* \u041c\u0430\u0440\u043a\u0435\u0440 \u043e\u0448\u0438\u0431\u043a\u0438 *\/     L.circleMarker(L.latLng(51.52, -0.109), {         radius: 8,         fillColor: '#f44334',         fillOpacity: 1,         color: '#fff',         weight: 3,     }).addTo(map);<\/code><\/pre>\n<p>  <b>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435:<\/b><\/p>\n<ul>\n<li>\u0412\u0441\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u043d\u0430 \u0435\u0434\u0438\u043d\u043e\u043c Canvas-\u0441\u043b\u043e\u0435.<\/li>\n<li>\u041c\u0430\u0440\u043a\u0435\u0440\u044b \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0434\u0440\u0443\u0433-\u0434\u0440\u0443\u0433\u0430 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0438\u0445 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u043a\u0430\u0440\u0442\u0443.<\/li>\n<li>\u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u043c\u044b\u0448\u043a\u043e\u0439, \u043e\u043d\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c.<\/li>\n<\/ul>\n<p>  \u0417\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0448\u0435\u043d\u0430!<\/p>\n<hr>\n<p>  <\/p>\n<h2>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e<\/h2>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u00ab\u043f\u0440\u043e\u043a\u0430\u0447\u0430\u0435\u043c\u00bb \u043d\u0430\u0448 \u043c\u0435\u0442\u043e\u0434 L.canvasMarker \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u043a\u0430\u0440\u0442\u0435!<\/p>\n<p>  \u0417\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0442\u043e\u0447\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 _updateImg.<\/p>\n<pre><code class=\"javascript\">L.Canvas.include({     _updateImg(layer) {         const { img } = layer.options;         const p = layer._point.round();         if (img.rotate) {             this._ctx.save();             this._ctx.translate(p.x, p.y);             this._ctx.rotate(img.rotate * Math.PI \/ 180);             this._ctx.drawImage(img.el, -img.size[0] \/ 2, -img.size[1] \/ 2, img.size[0], img.size[1]);             this._ctx.restore();         } else {             this._ctx.drawImage(img.el, p.x - img.size[0] \/ 2, p.y - img.size[1] \/ 2, img.size[0], img.size[1]);         }     }, });<\/code><\/pre>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0434\u043b\u044f \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0443 &#8216;img&#8217; \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e &#8216;rotate&#8217;. \u0418 \u043c\u044b \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043c\u0430\u0440\u043a\u0435\u0440\u0430:<\/p>\n<pre><code class=\"javascript\">L.canvasMarker(L.latLng(51.52, -0.109), {     img: {         url: 'icon.png',         size: [40, 40],         rotate: 15, \/\/\u0443\u0433\u043e\u043b \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f     }, }).addTo(map);<\/code><\/pre>\n<p>  \u041d\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0443\u0433\u043e\u043b \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0442\u043e\u0447\u043a\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0432\u0443\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 (angleCrds):<\/p>\n<pre><code class=\"javascript\"> const angleCrds = (map, prevLatlng, latlng) =&gt; {     if (!latlng || !prevLatlng) return 0;     const pxStart = map.latLngToLayerPoint(prevLatlng);     const pxEnd = map.latLngToLayerPoint(latlng);     return Math.atan2(pxStart.y - pxEnd.y, pxStart.x - pxEnd.x) \/ Math.PI * 180 - 90; };  const CanvasMarker = L.CircleMarker.extend({     _updatePath() {         if (!this.options.img.el) {             \/* \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 *\/             if (!this.options.img.rotate) this.options.img.rotate = 0;             this.options.img.rotate += angleCrds(this._map, this.options.prevLatlng, this._latlng);              const img = document.createElement('img');             img.src = this.options.img.url;             this.options.img.el = img;             img.onload = () =&gt; {                 this.redraw();             };         } else {             this._renderer._updateImg(this);         }     }, });  L.canvasMarker(L.latLng(51.52, -0.109), {     prevLatlng: L.latLng(51.528, -0.1), \/\/ \u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0442\u043e\u0447\u043a\u0438     img: {         url: 'icon.png',         size: [40, 40],     }, }).addTo(map);<\/code><\/pre>\n<p>  <\/p>\n<hr>\n<p>  <\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u2192 \u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/lipatoff.github.io\/leaflet-canvas-markers\/\">\u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a><br \/>  \u2192 \u0412\u0435\u0441\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u044f \u0432\u044b\u043d\u0435\u0441 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 <a href=\"https:\/\/www.npmjs.com\/package\/leaflet-canvas-markers\">npm-\u043f\u043b\u0430\u0433\u0438\u043d<\/a><\/p>\n<p>  \u042d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445! \u0422\u0430\u043a \u0436\u0435 \u043f\u043b\u0430\u0433\u0438\u043d \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u043d\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<p>  \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/485698\/\"> https:\/\/habr.com\/ru\/post\/485698\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/485698\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/cw\/6h\/fe\/cw6hfekjfdvlkgjvjrpaw4lhen0.jpeg\" alt=\"Leaflet Map\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u043e\u0440\u043e\u0433\u0438\u0435 \u0445\u0430\u0431\u0440\u0430\u0445\u0430\u0431\u0440\u043e\u0432\u0446\u044b!<\/p>\n<p>  <b>Leaflet<\/b> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u044b \u043d\u0430 \u0412\u0430\u0448 \u0441\u0430\u0439\u0442 \u0438 \u043b\u0435\u0433\u043a\u043e \u0438\u0445 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Canvas-\u0441\u043b\u043e\u0435 \u043a\u0430\u0440\u0442, \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u043c\u0430\u0440\u043a\u0435\u0440\u0430\u043c\u0438.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-297950","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/297950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=297950"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/297950\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=297950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=297950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=297950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}