leafletjs визуализировать географическое положение (обновить синхронизацию карт)

an open-source JavaScript libraryfor mobile-friendly interactive maps

Библиотека JavaScript с открытым исходным кодом для мобильных интерактивных карт.
Официальный сайт:листовка .com/reference-1…

• это легкая поддержка картографического сервиса
• Больше подходит для индивидуальной разработки,
• Открытый исходный код дает множество плагинов, которые более удобны в использовании.

Ноль · самоотчет до практики

Краткий обзор практики

Используйте leafletjs для создания слоев на карте AutoNavi, включая управление точками, рендеринг тепловой карты, обработку границ AOI, сравнение и корреляцию карт и т. д.

Зависимости и опоры, используемые на практике

• Для листовок с интерактивными картами:листовка .com/reference-1…
• Часть географических данных Gaode в фунтах:Не удается подключиться. Amapa.com/API/Web Color RV…
• Расчет геолокации:turfjs.org/docs

Соответствующие знания для понимания

• Объяснение профессиональной терминологии

• логика графа

Один · Создать карту

• Создайте div и добавьте идентификатор

• Создать экземпляр карты на основе идентификатора

• Используйте фрагменты карты Гао Дэ здесь, проходитеL.tileLayerСоздать плитки

• использоватьaddTo(GOD.LMap)добавить в созданный экземпляр карты

2 · Создайте точку и разместите ее на карте

создать только одну точку

L.marker([50.5, 30.5]).addTo(map);

много точек данных

• Объект может быть создан с использованием совокупных точек
• Добавить точку текущего типа в объект точки агрегации

Показать результаты

• Это может сократить время загрузки первой точки экрана, а большое количество точек на странице приведет к зависанию страницы.
• Вы можете получить более четкое представление об агрегированной информации каждой точки, нажмите, чтобы просмотреть подробно

захват данных

• Добавить захват данных

• Контроль соответствующей точки

3. Создайте заезд, чтобы добавить его на карту

Передайте адрес термоплитки напрямую черезL.tileLayerдобавить на карту

Четыре · Добавить WKT

• Необходимо установить зависимости преобразования формата WKT и импортироватьimport WKT from 'terraformer-wkt-parser';

  // рабочие данные MULTIPOLYGON (((121.40865097026608 31.236604810063966, 121.41074408027509 31.236532890380659, 121.41082780985562 31.238331389681946, 121.41292095044162 31.2382594304284, 121.41501409012824 31.238187439698606, 121.41509789974839 31.239985920114179, 121.41300471959221 31.24005791983717, 121.41091154033541 31.240129879990036, 121.40881835028665 31.240201809565917, 121.40873465038385 31.23840331026463, 121.40664149001282 31.238475200270329, 121.40655785036461 31.236676700069722, 121.40647420981702 31.234878189976541, 121.40639058006127 31.23307967988336, 121.40848361992323 31.233007799770178, 121.40856729014843 31.234806309863359, 121.40865097026608 31.236604810063966)))

• Используйте WKT.parse(wkt) для форматирования и поворота широты и долготы (leafletjs отличается от других карт, параметры широты и долготы меняются местами)

• использоватьL.geoJsonДобавить к карте после добавления к объекту слоя

Ву · Синхронизация нескольких карт

использоватьLeaflet.Syncплагин

GitHub.com/лист и/лист…

mapA.sync(mapB);

Использование этого свойства не поддерживает мониторинг улетающей страницы и должно быть установлено для карты.inertia: false, следите за тем, чтобы страницы не улетали,

Земля · Ассоциация точек

Показать результаты

• Выберите точку, введите радиус 500, других точек в окружности нет, корреляция точек равна 0
• Входной радиус 3500, на окружности две точки (не считая текущей точки), корреляция точек 2

Подготовка к точечной ассоциации

• Отметить несколько точек
• Выберите точку для установки радиуса
• Рассчитать информацию о точке диапазона точек на основе географического положения газона

нарисовать и рассчитать

• Нарисуйте точки в соответствии с заголовком II

• Круг

• Нарисуйте круг на основе введенного радиуса и координат точки щелчкаL.circle(latLng, { radius: radius })

• Кружком называется метод расчета степени ассоциацииgetWithInCirCleInfoByMarking

• Метод релевантностиgetWithInCirCleInfoByMarking

• Здесь есть данные для заполнения, вы можете сначала извлечь метод расчета корреляцииgetWithInCirCleInfo

• После рисования круга, согласноturf.circleПолучить границы круга

• При использовании газона особое внимание следует уделять экземпляру данных, а также необходимо обрабатывать границу круга.turf.polygon, для участия в официальной документации подробности:газон .org/docs/#point…

• Если точка находится внутри круга согласноturf.pointsWithinPolygonВозвращенный feature.length показывает, находится ли точка внутри круга.

VII · Проведение административных границ

Показать результаты

рисовать

• Получить административную границу информацию на основе API AutonaviНе удается подключиться. Amapa.com/API/Web Color RV…

• Методы извлечения и построения административных границ

• GOD — это глобальная переменная окна.

• Если вам нужно отобразить несколько административных границ одновременно, удалитеGOD.districtByCityFeatureLayer.clearLayers()

• В административной границе есть несколько закрытых графов, которые нужно перехватить и пройти по множеству массивов

• вызовите этот метод

  drawMapDistrictByCity('Шанхай')

8 · Листовка часто используемых плагинов

Найти текущее местоположение