yandex maps arrowed track
HTML
<div id="map"></div>
CSS
</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
JavaScript
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [55.733835, 37.588227],
zoom: 5
});
// Пользовательские модули не дописываются в неймспейс ymaps.
// Поэтому доступ к ним мы можем получить асинхронно через метод ymaps.modules.require.
ymaps.modules.require(['geoObject.Arrow'], function (Arrow) {
var arrow = new Arrow([[52.7, 37.0],[50.733835, 38.788227],[52.733835, 38.788227],[55.733835, 39.788227], [57.733835, 38.788227] ], null, {
geodesic: true,
strokeWidth: 5,
opacity: 1,
strokeColor: '#fff',
strokeStyle: 'shortdash'
});
myMap.geoObjects.add(arrow);
});
});
/*
* Класс, позволяющий создавать стрелку на карте.
* Является хелпером к созданию полилинии, у которой задан специальный оверлей.
* При использовании модулей в реальном проекте рекомендуем размещать их в отдельных файлах.
*/
ymaps.modules.define("geoObject.Arrow", [
'Polyline',
'overlay.Arrow',
'util.extend'
], function (provide, Polyline, ArrowOverlay, extend) {
/**
* @param {Number[][] | Object | ILineStringGeometry} geometry Геометрия ломаной.
* @param {Object} properties Данные ломаной.
* @param {Object} options Опции ломаной.
* Поддерживается тот же набор опций, что и в классе ymaps.Polyline.
* @param {Number} [options.arrowAngle=20] Угол в градусах между основной линией и линиями стрелки.
* @param {Number} [options.arrowMinLength=3] Минимальная длина стрелки. Если длина стрелки меньше минимального значения, стрелка не рисуется.
* @param {Number} [options.arrowMaxLength=20] Максимальная длина стрелки.
*/
var Arrow = function (geometry, properties, options) {
return new Polyline(geometry, properties, extend({}, options, {
lineStringOverlay: ArrowOverlay
}));
};
provide(Arrow);
});
/*
* Класс, реализующий интерфейс IOverlay.
* Получает на вход пиксельную...