Public
Edited
Nov 22, 2022
3 forks
1 star
Insert cell
Insert cell
Insert cell
Insert cell
// настрока API (спецмальный объект, который будет обеспечивать взаимодействие с yandex-сервисом):
ymaps = require('https://api-maps.yandex.ru/2.1/?apikey=7a8a7026-ae95-427c-82c4-cb2208bfc100&lang=ru_RU')
.catch(() => window.ymaps)
Insert cell
map_yandex = []
Insert cell
Insert cell
Insert cell
{
let wind = html`<div style='height:300px;'></div>`;//контейнер
yield wind;
let map = new ymaps.Map(wind, {
center: [53.36, 83.75], //Барнаул
zoom: 8});//масштаб
map_yandex[0]=map //положили в список
}
Insert cell
Insert cell
Insert cell
sitys=[
{'name':'Славгород', 'latlon':[52.993, 78.63866]},
{'name':'Бийск', 'latlon':[ 52.54, 85.21]},
{'name':'Заринск', 'latlon':[ 53.71, 84.95]},
{'name':'Новоалтайск', 'latlon':[ 53.39, 83.94]},
{'name':'Рубцовск', 'latlon':[51.3138, 81.1307]},
{'name':'Барнаул', 'latlon':[ 53.36, 83.75]},
{'name':'Алейск', 'latlon':[52.49346, 82.78061]}
]
Insert cell
function get_array(obj) {
let a =[];
obj.forEach( x =>a.push( x['latlon']))
return a;
}
Insert cell
s = get_array(sitys)
Insert cell
{
let wind = html`<div style='height:400px;'></div>`;//контейнер
yield wind;
let map = new ymaps.Map(wind, {
center: [53.36, 83.75], //Барнаул
zoom: 7,//масштаб
type: 'yandex#hybrid'});//тип ->гибрид
// map.panTo(s, {delay: 2000, duration: 2000});
map_yandex[1] = map;
}
Insert cell
Insert cell
Insert cell
{
let wind = html`<div style='height:500px;'></div>`;//контейнер
yield wind;
let map = new ymaps.Map(wind, {
center: [53.36, 83.75], //Барнаул
zoom: 7});
s.forEach( function (x) {
let placemark = new ymaps.Placemark(x, {}, {
// Задаем стиль метки
preset: "islands#dotIcon",
// Задаем цвет метки (в формате RGB).
iconColor: '#bbccbb'
});
//добавляем метку на карту
map.geoObjects.add(placemark);
});
map.panTo(s, {delay: 1000, duration: 1000, flying: true});
}
Insert cell
Insert cell
{
let wind = html`<div style='height:400px;'></div>`;//контейнер
yield wind;
let map = new ymaps.Map(wind, {
center: [53.36, 83.75], //Барнаул
zoom: 7});
sitys.forEach( function (x) {
// Задает опции метки и отображает метку на карте.
// Создание метки
var place_mark = new ymaps.Placemark(
// Координаты метки
[x.latlon[0], x.latlon[1]], {
/* Свойства метки: подсказка - хинт */
hintContent: x.name
}
);
map.geoObjects.add(place_mark);
}) //forEach
// map.panTo(s, {delay: 1000, duration: 1000, flying: true});
}
Insert cell
Insert cell
{
let wind = html`<div style='height:500px;'></div>`;//контейнер
yield wind;
let map = new ymaps.Map(wind, {
center: [53.36, 83.75], //Барнаул
zoom: 7});
let place_mark = new ymaps.Placemark([53.36, 83.75], //Барнаул
{
balloonContentBody: [
'<b><strong>Административный центр Алтайского края (с 1937 года).</strong></b>',
'<br/>Население города — 630 877 (2021) человек',
'<br/><a href="hhttps://ru.wikipedia.org/wiki/%D0%91%D0%B0%D1%80%D0%BD%D0%B0%D1%83%D0%BB">Подробнее</a>'
].join('')
}, {
preset: 'islands#redDotIcon'
});

map.geoObjects.add(place_mark);
}
Insert cell
Insert cell
Insert cell
{
let wind = html`<div style='height:500px;'></div>`;//контейнер
yield wind;
let map = new ymaps.Map(wind, {
center: [53.36, 83.75], //Барнаул
zoom: 7});
// Построение маршрута на автомобиле
// Создание экземпляра маршрута.
var multyroute_A_B = new ymaps.multiRouter.MultiRoute({
referencePoints: [
'Баранул',
'Славгород'
],
params: {
// Тип маршрута: на автомобиле.
routingMode: "auto"
}
}, {
// Автоматически устанавливать границы карты так,
// чтобы маршрут был виден целиком.
boundsAutoApply: true
});

// Добавление маршрута на карту.
map.geoObjects.add(multyroute_A_B);
}
Insert cell
Insert cell
{
let wind = html`<div style='height:500px;'></div>`;
yield wind;
let map = new ymaps.Map(wind, {
center: [52.30, 82.47],
zoom: 7 });
let bordermap = ymaps.borders.load('RU', {lang: 'ru', quality: 1}).
then(function (geojson) {
var regions = ymaps.geoQuery(geojson);
regions.search('properties.iso3166 = "RU-ALT"').
setOptions({fillColor:'#ff001a', fillOpacity: 0.3, strokeColor: '#ffffff', strokeOpacity: 0.8, strokeWidth: 6});
regions.addToMap(map);
});
map_yandex[2]=map
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more