ArcGIS для разработки JavaScript

Принятая технология:vueJS + vuetify + axios + arcGIS3.24 + echarts

Как показано на рисунке: визуальный интерфейс имеет трехуровневую сэндвич-структуру, считывает данные с сервера (внутренняя часть, сервер, не подключенный к сети), vueJS отвечает за управление данными, ArcGIS и echarts отвечают за графику данных. В то же время для кэширования массивных данных вводится локальная база данных браузера web sql db.

ArcGIS API for Javascript — это набор программных интерфейсов (последняя версия — 3.3, dojo 1.8), основанных на платформе dojo и формате REST, запущенном компанией Esri в США.Через ArcGIS API for Javascript можно получить доступ к ArcGIS for Server. и вызванный, и ArcGIS Ресурсы карт и другие ресурсы, предоставляемые for Server, загружаются в веб-приложение в режиме онлайн.

Базовые знания

Dojo

Dojo— это мощная объектно-ориентированная среда Javascript. Он в основном состоит из трех модулей: Core, Dijit, DojoX. Среди них Core предоставляет Ajax, события, упаковку, запросы на основе CSS, анимацию, JSON и другие связанные API-интерфейсы. Dijit — это библиотека управления веб-интерфейсом на основе шаблонов с изменяемым оформлением. DojoX включает в себя некоторый инновационный/новый код и элементы управления: DateGrid, диаграммы, автономные приложения, векторное рисование в разных браузерах и т. д. Характеристики Додзё можно описать в следующих разделах:

1. Dojo — это чистая библиотека Javascript, поскольку бэкенд предоставляет соответствующий интерфейс, данные могут выводиться на фронтенд в формате Json.

2. Dojo сам определяет полную библиотеку функций, которая скрывает различия браузеров.

3. В Dojo установлена ​​собственная библиотека компонентов интерфейса, а код ее компонентов основан на объектно-ориентированной идее, удобной для наследования и расширения.

4. Когда требования к компоновке внешнего интерфейса более сложны, компонент страницы на основе dojo будет первым выбором, поскольку он может интегрировать интерфейс в интерфейс. Абстрагируется некая общая область, инкапсулируется поведение интерфейса и данные этой области, а разработка сложных страниц выполняется по модульному принципу.

Тепловая карта

1. Реализовать работу карты тепловой карты Тепловая карта — это графическое представление области страницы или географической области, где находится посетитель, в специально выделенной форме. Обычно используемые статистические данные карты тепла делятся на метод подсчета квадратов (анализ квадратов) и метод плотности ядра (оценка плотности ядра). **Метод плотности ядра** Метод анализа точечного паттерна на основе плотности, поэтому решающее значение имеют относительное положение и расстояние между событиями.

Квадратичный счетАбсолютное положение между событиями играет решающую роль, а события и количества, приходящиеся на единицу площади, имеют относительно четкие изменения в пространстве. Например: среднее/плотность пространственных объектов.

В нашем примере мы используем второй метод анализа, чтобы показать региональную плотность населения.
Однако многие попытки показали, что тепловая карта, предоставленная официальным лицом, основана наheatMapЭто не соответствует нашим потребностям, а решение онлайн-сервиса не соответствует требованиям.
Наконец, мы предоставляем через esriКласс FeatureLayer создает слои, рисует графику с координатами и весами различает значения цвета для восстановления тепловых карт.

ArcGIS for javascript

визуализация

Включает использование базовой карты Arcgis, геометрии, FeatureLayer, графических и других API.

импорт модуля

Vue представляет модуль arcgis для js
Install

npm install --save esri-loader

or

yarn add esri-loader

Введите ersi в файл

import * as esriLoader from 'esri-loader'

Стиль грузаПеред загрузкой карты необходимо загрузить соответствующую версию таблицы стилей
@import url('Просто .ArcGIS.com/3.24/Hungry Days/From…');
or
esriLoader.loadCss('Просто .ArcGIS.com/3.24/Hungry Days/From…')

Здесь мы решаем проблему внедрения arcgis в проект vue, но в процессе собственно разработки мы обнаружим две серьезные проблемы при использовании arcgis в Китае:
Во-первых, сервис базовых карт плохой, а загрузка медленная.
Во-вторых, интерфейс API, предоставляемый arcgis для js, иногда не загружается.
Поэтому на этапе разработки для оптимизации пользовательского опыта вышеперечисленные проблемы решаются путем переключения отечественных картографических сервисов и локального развертывания JS-SDK (процесс решения этих двух решений будет представлен позже)

Загрузите необходимый модуль карты
1. Загрузите класс API карты через загрузчик DOJO.
2. Загрузите карту через карту (рендеринг карты разделен на представления WebMap и MapView/SceneView в версии 4.7)

const options = {
    url: 'https://js.arcgis.com/3.24/'
}
esriLoader.loadModules([
    'esri/map',
     'dojo/domReady!'
], options).then(([Map]) => {
    let map = new Map('YouMapDOM', {
        basemap: 'topo',
        center: [113.3209952545166, 23.090055306224895],
        zoom: 15
    })
}).catch (err => {})

Здесь мы успешно загрузили карту arcgis

map

карта: базовая карта, отвечает за рендеринг базовой карты
Класс Map создает контейнер карты и необходимую структуру DOM для добавления слоев, графики, информационных окон и других элементов управления навигацией.

Создание карты - это самая базовая операция ArcGIS и создала карту через карту в 3.x.

new Map(YouMapDOM, option)

Расставление точек на карте и рисование наложений, таких как графические диапазоны, являются основными операциями визуализации карты.

Атрибуты
Свойство карты настраивается, например, backgroundColor, высота, ширина и т. д.

метод
Как наиболее важный элемент arcgis, слой карты наследует многие методы, такие как
addLayerДобавить слой Esri на карту
Centerandzoom (Mapapoint, Leveloverfactor)Приходите поражены и увеличить карту
destroy()уничтожить экземпляр карты
...

map.setBasemap(url)

мероприятие
Мы не только выполняем необходимые послойные операции через метод карты, но и привязываем события на карте, официальное объяснение таково.

All On Style event listeners receive a single event object.
Additionally, the event object also contains a 'target' property whose
value is the object which fired the event.

обычно используется как
basemap-change
click
dbl-click
key-down / key-up
load
mouse-down/drag/move
zoom
...
Прислушиваясь к событиям, таким как различные типы мыши и клавиатуры, для запуска необходимых нам операций, например, привязывая событие клика через карту, пока мы нажимаем на карту, например подсказки, местоположения, графические слои и т. д. , его можно запустить.

map.on('click', (event) => {
    if (event.graphic.symbol && event.graphic.symbol.type === 'simplefillsymbol') {}
    if (event.graphic.symbol && event.graphic.symbol.type === 'textsymbol') {}
    if (event.graphic.symbol && event.graphic.symbol.type === 'simplemarkersymbol') {}
}

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

Уведомление: Могут быть некоторые отклонения в преобразовании картографических сервисов, подробности см. в вопросе 3.

this.map.setBasemap(baseMap)

  {
    name: '中国灰色版',
    url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer'
  },
  {
    name: '中国午夜版',
    url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
  },
  {
    name: '中国彩色版',
    url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer'
  },
  {
    name: '中国彩色POI版',
    url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
    }
 

FeatureLayer

FeatureLayer: Графический слой, который можно использовать для отображения отдельных объектов слоя в картографическом сервисе или картографическом сервисе объектов. Также редактируйте объекты слоя с помощью isEditable=true.
FeatureLayer по умолчанию получает информацию о слое от ArcGIS Server для рендеринга, однако полнотекстовый пример Goose не использует режим рендеринга сервера, а напрямую визуализирует слой с локальными данными.
Рендеринг и манипулирование тепловыми картами

      let featureLayers = new FeatureLayer(featureCollection, {
        id: 'flickrLayer',
        outFields: ['*'],
        opacity: 0.5,
        showLabels: true
      })
      map.on('layers-add-result', (results) => {
        loading.close()
        let features = []
        res.forEach(function (item, i) {
          let arrt = {
            title: item.cellId,
            flowCount: item.flowCount,
            groupCount: item.groupCount,
            cellId: item.cellId,
            cityId: item.cityId,
            distId: item.distId
          }
          let geometry = new Polygon(item.rings)
          let graphic = new Graphic(geometry)
          graphic.setAttributes(arrt)
          features.push(graphic)
        })
        featureLayers.applyEdits(features, null, null)
      })
      map.addLayers([featureLayers])

Добавьте слои сетки с помощью класса featureLayers.applyEdits().
События, связанные с featureLayer.on(), такие как щелчок, двойной щелчок, графическое добавление и другие типы событий, взаимодействуют со слоями, такими как выделение слоев, всплывающие окна.

featureLayers.on('click', (event) => {})

graphic

графический рисунок

let geometry = new Polygon(rings)
let newGraphic = new Graphic(geometry)
map.graphics.add(newGraphic)

На карте есть различные наложения, которые можно рисовать графически, такие как выделенная сетка Многоугольник, круговой диапазон Круг, пунктирная точка, маркер createSymbol и т. д.

let gl = new GraphicsLayer({ id: 'circles2' })
map.addLayer(gl)
let symbol = new SimpleFillSymbol().setColor().outline.setColor([0, 142, 255])
centerPoints.forEach(e => {
   let circleGeometry = new Circle({
       center: e,
       radius: radius,
       geodesic: true
   })
   let circleGraphics = new Graphic(circleGeometry, symbol)
   gl.add(circleGraphics)
})

вопрос

1. Разница между WebMap и MapView в 4.7
В версии 4.0, в связи с добавлением 3D-элементов, Карта и Слои больше не обрабатывают отрисовку графики, а передаются для завершения в Виды.
View view — это концепция, предложенная в версии 4.0, включающая два класса: MapView (2D) и SceneView (3D).
Базовая карта и рабочие слои базовой карты разделены в версии 4.X.
2. Автономное развертывание
(1) Внутренний картографический сервис
(2) локальное развертывание JS-SDK
Учитывая, что домашние пользователи могут столкнуться с медленным доступом к карте или даже с невозможностью нормальной загрузки, крайне необходимо автономное развертывание ArcGIS for js.
1. Зарегистрируйте учетную запись разработчика arcgis
2. Войдите в официальный интерфейс загрузки api-sdk и выберите нужную версию.
Developers.ArcGIS.com/downloads/ а...

через некоторое время
3. Вам нужно подготовить сервер, к которому можно будет нормально обращаться (в качестве примера возьмем Linux-tomcat arcgis_js_api3.2.4)
Скопируйте загруженный файл arcgis_js_api в каталог /usr/local/example/webapps tomcat.
Измените [HOSTNAME_AND_PATH_TO_JSAPI] в файле arcgis_js_api/library/3.24/3.24/init.js на /arcgis_js_api/library/3.24/3.24/
Измените [HOSTNAME_AND_PATH_TO_JSAPI] в файле arcgis_js_api/library/3.24/3.24/dojo/dojo.js на /arcgis_js_api/library/3.24/3.24/
4. После выполнения вышеуказанной модификации вы можете нормально получить доступ к интерфейсу SDK на своем собственном сервере.

3. Координатное отклонение
Мы обычно используем три вида координат, а именно международную систему координат, систему координат Марса и систему координат Baidu.
Земная система координат — WGS84: GCS_WGS_1984, обычно используется в устройствах GPS, картах Google, картах ArcGIS и других международных стандартных системах координат.
Система координат Марса — GCJ-02: обязательная зашифрованная система координат, используемая в Китае, и AutoNavi использует эту систему координат.
Система координат Baidu — BD-09: Система координат, используемая Baidu Maps, снова зашифрована на основе системы координат Марса.

Отклонение координат зависит от службы базовых карт, которая преобразует английскую карту по умолчанию в обычно используемую внутреннюю карту.дневная карта(координаты Марса по умолчанию), здесь есть проблема.
1. Не рекомендуется использовать две разные системы координат при выборе базовой карты.Существуют явные отклонения в координатах на следующем рисунке.Координаты Марса указаны в верхней части карты в системе координат WGS84 .
Цвет Китая карта неба

Глобальная спутниковая карта

2. Например, мы используем класс поиска ArcGIS для поиска, а все возвращаемые данные являются международными координатами, поэтому необходимо выполнить коррекцию отклонения.
Мы можем использовать преобразование координат, предоставленное картой Гаоде.AMap.convertFrom()выполнить преобразование координат

AMap.convertFrom(lnglat, type, function (status, result) {
    if (result.info === 'ok') {
        var resLnglat = result.locations[0];
        m = new AMap.Marker({
            position: resLnglat,
        });
        map.add(m);
     }
});

Или вы можете настроить метод преобразования
blog.CSDN.net/admin_one/AR…(Интернет случайный поиск ссылки)

Предыдущая статья:Визуализация карты Vue (2) статьи mapbox