В cian.ru на карте города можно нажав кнопку "Нарисовать область" нарисовать на карте произвольный контур, потом сам cian.ru его сглаживает и отображает объекты недвижимости внутри данного контура. Не могу понять, это возможности от yandex карт или разработка самого cian ?
-
1Редактор геометрий - часть API, сглаживание и поиск внутри области - разработка самого cian над возможностями API.– Reni12 янв 2018 в 8:34
2 ответа
В API Яндекс.Карт есть редактор полигонов, но он немного другой.
Если вы хотите поведения как на cian.ru, то проще положить поверх карты canvas
, рисовать на нем и запоминать координаты, а после из них собрать полигон.
Отфильтровать гео-объекты по попаданию в полигон можно с помощью geoQuery(myObjects).searchInside(polygon)
или polygon.contains(coordinates)
.
var polygonOptions = {
strokeColor: '#0000ff',
fillColor: '#8080ff',
interactivityModel: 'default#transparent',
strokeWidth: 4,
opacity: 0.7
};
var canvasOptions = {
strokeStyle: '#0000ff',
lineWidth: 4,
opacity: 0.7
};
ymaps.ready(['Map', 'Polygon']).then(function() {
var map = new ymaps.Map('map', { center: [55.75, 37.62], zoom: 8 });
var polygon = null;
var drawButton = document.querySelector('#draw');
drawButton.onclick = function() {
drawButton.disabled = true;
drawLineOverMap(map)
.then(function(coordinates) {
// Переводим координаты из 0..1 в географические.
var bounds = map.getBounds();
coordinates = coordinates.map(function(x) {
return [
// Широта (latitude).
// Y переворачивается, т.к. на canvas'е он направлен вниз.
bounds[0][0] + (1 - x[1]) * (bounds[1][0] - bounds[0][0]),
// Долгота (longitude).
bounds[0][1] + x[0] * (bounds[1][1] - bounds[0][1]),
];
});
// Тут надо симплифицировать линию.
// Для простоты я оставляю только каждую третью координату.
coordinates = coordinates.filter(function (_, index) {
return index % 3 === 0;
});
// Удаляем старый полигон.
if (polygon) {
map.geoObjects.remove(polygon);
}
// Создаем новый полигон
polygon = new ymaps.Polygon([coordinates], {}, polygonOptions);
map.geoObjects.add(polygon);
drawButton.disabled = false;
});
};
});
function drawLineOverMap(map) {
var canvas = document.querySelector('#draw-canvas');
var ctx2d = canvas.getContext('2d');
var drawing = false;
var coordinates = [];
// Задаем размеры канвасу как у карты.
var rect = map.container.getParentElement().getBoundingClientRect();
canvas.style.width = rect.width + 'px';
canvas.style.height = rect.height + 'px';
canvas.width = rect.width;
canvas.height = rect.height;
// Применяем стили.
ctx2d.strokeStyle = canvasOptions.strokeStyle;
ctx2d.lineWidth = canvasOptions.lineWidth;
canvas.style.opacity = canvasOptions.opacity;
ctx2d.clearRect(0, 0, canvas.width, canvas.height);
// Показываем канвас. Он будет сверху карты из-за position: absolute.
canvas.style.display = 'block';
canvas.onmousedown = function(e) {
// При нажатии мыши запоминаем, что мы начали рисовать и координаты.
drawing = true;
coordinates.push([e.offsetX, e.offsetY]);
};
canvas.onmousemove = function(e) {
// При движении мыши запоминаем координаты и рисуем линию.
if (drawing) {
var last = coordinates[coordinates.length - 1];
ctx2d.beginPath();
ctx2d.moveTo(last[0], last[1]);
ctx2d.lineTo(e.offsetX, e.offsetY);
ctx2d.stroke();
coordinates.push([e.offsetX, e.offsetY]);
}
};
return new Promise(function(resolve) {
// При отпускании мыши запоминаем координаты и скрываем канвас.
canvas.onmouseup = function(e) {
coordinates.push([e.offsetX, e.offsetY]);
canvas.style.display = 'none';
drawing = false;
coordinates = coordinates.map(function(x) {
return [x[0] / canvas.width, x[1] / canvas.height];
});
resolve(coordinates);
};
});
}
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<button id="draw">рисовать</button>
<div id="container" style="position: relative;">
<div id="map" style="width: 300px; height: 300px;"></div>
<canvas id="draw-canvas" style="position: absolute; left: 0; top: 0; display: none;"></canvas>
</div>
-
flapenguin, спасибо огромное! Не могу оценить решение, так как рейтинг мал, но решение шикарное!)))) Огромное спасибо!– Наталья13 янв 2018 в 21:49
-
2@Наталья, пожалуйста. Вы можете отметить ответ как верный нажав на галочку слева (под стрелочками голосования). 15 янв 2018 в 11:41
-
вопрос решён !))) Скажите, пожалуйста, а есть ли в картах гугл подобный функционал?– Наталья15 янв 2018 в 14:10
-
2@Наталья, вы можете точно так же положить поверх карты
<canvas>
, а а затем собрать из точек полигон. 15 янв 2018 в 14:18
Для преобразования координаты у Яндекса есть специальный конвертер:
projection.fromGlobalPixels(
map.converter.pageToGlobal([e.pageX, e.pageY]), map.getZoom()
)
var polygonOptions = {
strokeColor: '#0000ff',
fillColor: '#8080ff',
interactivityModel: 'default#transparent',
strokeWidth: 4,
opacity: 0.7
};
var canvasOptions = {
strokeStyle: '#0000ff',
lineWidth: 4,
opacity: 0.7
};
ymaps.ready(['Map', 'Polygon']).then(function() {
var map = new ymaps.Map('map', { center: [55.75, 37.62], zoom: 8 });
var polygon = null;
var drawButton = document.querySelector('#draw');
drawButton.onclick = function() {
drawButton.disabled = true;
drawLineOverMap(map)
.then(function(coordinates) {
// Тут надо симплифицировать линию.
// Для простоты я оставляю только каждую третью координату.
coordinates = coordinates.filter(function (_, index) {
return index % 3 === 0;
});
// Удаляем старый полигон.
if (polygon) {
map.geoObjects.remove(polygon);
}
// Создаем новый полигон
polygon = new ymaps.Polygon([coordinates], {}, polygonOptions);
map.geoObjects.add(polygon);
drawButton.disabled = false;
});
};
});
function drawLineOverMap(map) {
var canvas = document.querySelector('#draw-canvas');
var ctx2d = canvas.getContext('2d');
var drawing = false;
var coordinates = [];
var offsets = [];
// Задаем размеры канвасу как у карты.
var rect = map.container.getParentElement().getBoundingClientRect();
canvas.style.width = rect.width + 'px';
canvas.style.height = rect.height + 'px';
canvas.width = rect.width;
canvas.height = rect.height;
// Применяем стили.
ctx2d.strokeStyle = canvasOptions.strokeStyle;
ctx2d.lineWidth = canvasOptions.lineWidth;
canvas.style.opacity = canvasOptions.opacity;
ctx2d.clearRect(0, 0, canvas.width, canvas.height);
// Показываем канвас. Он будет сверху карты из-за position: absolute.
canvas.style.display = 'block';
canvas.onmousedown = function(e) {
// При нажатии мыши запоминаем, что мы начали рисовать и координаты.
drawing = true;
coordinates.push([e.pageX, e.pageY]);
offsets.push([e.offsetX, e.offsetY]);
};
canvas.onmousemove = function(e) {
// При движении мыши запоминаем координаты и рисуем линию.
if (drawing) {
var last = offsets[offsets.length - 1];
ctx2d.beginPath();
ctx2d.moveTo(last[0], last[1]);
ctx2d.lineTo(e.offsetX, e.offsetY);
ctx2d.stroke();
coordinates.push([e.pageX, e.pageY]);
offsets.push([e.offsetX, e.offsetY]);
}
};
return new Promise(function(resolve) {
// При отпускании мыши запоминаем координаты и скрываем канвас.
canvas.onmouseup = function(e) {
coordinates.push([e.pageX, e.pageY]);
canvas.style.display = 'none';
drawing = false;
var projection = map.options.get('projection');
coordinates = coordinates.map(function(x) {
return projection.fromGlobalPixels(
map.converter.pageToGlobal([x[0], x[1]]), map.getZoom()
);
});
resolve(coordinates);
};
});
}
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<button id="draw">рисовать</button>
<div id="container" style="position: relative;">
<div id="map" style="width: 300px; height: 300px;"></div>
<canvas id="draw-canvas" style="position: absolute; left: 0; top: 0; display: none;"></canvas>
</div>
-
Пожалуйста, воздержитесь от критики других ответов в тексте вашего ответа. Когда у вас будет достаточно репутации, то вы сможете написать комментарий автору другого ответа с указанием недостатков.– 0xdb21 окт 2020 в 8:48