Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: API
Войти
Регистрация
Восстановить пароль
 
Chubaka101
9 / 9 / 4
Регистрация: 14.10.2015
Сообщений: 252
1

Выделение области на Яндекс карте через canvas

14.01.2019, 14:15. Просмотров 382. Ответов 0
Метки нет (Все метки)

Подскажите, пожалуйста, выделяю на Яндекс карте произвольную область, как сделать, чтобы при выделении учитывались определенные координаты на карте?
Воспользовался методом Яндекс карт IPolygonGeometryAccess, но что-то не пойму, как его в моей области из canvas привязать.

Код карты
HTML5
1
2
3
4
5
6
<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: 600px; height: 400px;"></div>
  <canvas id="draw-canvas" style="position: absolute; left: 0; top: 0; display: none;"></canvas>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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: [57.14, 65.55],
    zoom: 11
  });
  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);
    };
  });
}
 
// Метод IPolygonGeometryAccess
var myPolygon = new ymaps.geometry.Polygon([
  [
    [57.14, 65.55],
    [68, 55],
    [86, 56]
  ]
]);
 
// Метод работает только с корректно заданной картой.
myPolygon.options.setParent(myMap.options);
myPolygon.geometry.setMap(myMap);
 
// Проверка, входит ли точка клика в полигон, с заданной выше геометрией.
myMap.events.add('click', function(e) {
  alert(myPolygon.geometry.contains(e.get('#draw-canvas')) ? 'Успешно' : 'Еще раз');
});
https://jsfiddle.net/wer5z2oh/10/

Ссылка на метод - https://tech.yandex.ru/maps/doc/jsap...param-position
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.01.2019, 14:15
Ответы с готовыми решениями:

Кластеризация объектов на Яндекс карте
Доброго времени суток! Вывожу заранее заданные объекты на яндекс карте. Объекты заданы следующим...

Не отображаются точки на карте Яндекс
В общем, такая проблема. Есть карта. Точки загружаются посредством файла импорта. На старом...

Расчёт стоимости проезда по Яндекс карте
Здравствуйте господа! Может быть кто-то знает, как можно реализовать подобный калькулятор...

Выделение области на фотографии, нужен скрипт
Доброго времени суток. Есть сайт, пользователь может загрузить фотографию для своего профиля,...

Обработка нажатий мыши, выделение некой области
Прошу совета. Задача заключается в следующем: На странице необходимо создать поле(таблицу) размером...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.01.2019, 14:15

Выделение области на карте
Добрый утро, нужна ваша помощь или совет, смотрите есть такая карта, Мне нужно что бы при...

Выделение области и обращение к ней через макрос (Word)
Всем привет, возможно ли в word выделить какую-то область, и через макрос к нему обращаться? То...

Java Android - сделать кнопку "показать адрес на карте", которая вызывает яндекс-карты или яндекс-навигатор и гугл-карты
Доброго дня, формучане! Подскажите, как сделать возможность из моего приложения при клике по...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru