ArcGIS Maps SDK для JavaScript, серия 2: понимание карт и MapView

В ArcGIS Maps SDK for JavaScript Map и MapView — это две важные концепции, используемые для создания и отображения картографических приложений.

карта

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

Пример кода для создания объекта Map:

const map = new Map({
    
    
  basemap: 'streets-vector'
});

Код здесь создает объект карты, содержащий базовую карту streets-vector.

Общие свойства карты

1. allLayers(слои)
   • Тип: Коллекция
   • Описание: Расширенная коллекция всех слоев карты (включая базовые карты).
2. Базовая карта
   • Тип: строка или объект базовой карты.
   • Описание: определяет стиль базовой карты. Это может быть предопределенная строка (например, «улицы», «спутник», «топографическая карта» и т. д.) или пользовательский объект базовой карты.
3. земля
   • Тип: Наземный объект
   • Описание: Визуализация для определения поверхности Земли. Объект «Земля» может задавать тип местности, например «возвышение мира», «топопатия мира» и т. д.
4. слои
   • Тип: Коллекция слоев
   • Описание: Содержит все слои текущей карты. Отображение слоя на карте можно настроить, добавляя или удаляя объекты слоя, исключая базовую карту.

// 创建一个具有默认底图的地图对象
const map = new Map({
    
    
  basemap: "streets"
});

// 添加一个图层到地图上
const layer = new TileLayer({
    
    
  url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
});
map.layers.add(layer);

// 创建一个地图视图
const mapView = new MapView({
    
    
  container: "viewDiv ",
  map: map,
  zoom: 10,
  center: [-122.4194, 37.7749]
});

Приведенный выше код создает объект карты с базовой картой «улиц», затем добавляет слой листов и, наконец, использует MapView для отображения карты в указанном элементе HTML.

Общие методы Map

1. add(слой)(добавить слой)

   • Параметры: слой: объект слоя.
   • Описание: Добавьте указанный слой на карту. С помощью этого метода слои можно добавлять динамически и отображать на карте.

2. удалить(слой) (удалить слой)

   • Параметры: слой: объект слоя.
   • Описание: Удаляет указанный слой с карты. Используйте этот метод для удаления слоев на карте во время выполнения.

3. findLayerById(id) (найти слой по идентификатору)

   • Параметр: идентификатор: строка
   • Возвращаемое значение: объект слоя.
   • Описание: Найдите и верните объект слоя на карте по указанному идентификатору.

4. findLayersByName(name) (найти слои по имени)

   • Параметры: имя: Строка
   • Возвращаемое значение: Layer[] (массив слоев)
   • Описание. Найдите и верните массив объектов слоя, соответствующих имени на основе указанного имени.

5. RemoveAll() (удалить все слои)

   • Описание: Удалить все слои с карты.

6. уничтожить() (уничтожить карту)

   • Описание: Уничтожьте объект карты и связанные с ним ресурсы. Используйте этот метод для очистки объекта карты и освобождения памяти, особенно если карта больше не нужна.

КартаView

MapView — это компонент представления, используемый для отображения объектов карты. Он отвечает за рендеринг карты на HTML-странице. MapView предоставляет пользователям функции для взаимодействия с картой, такие как панорамирование, масштабирование, вращение и другие операции. MapView также поддерживает добавление графики и всплывающих окон, а также предоставляет такие функции, как события мыши и интерактивное управление.

Пример кода для создания объекта MapView:

const mapView = new MapView({
    
    
  container: 'viewDiv',
  map: map,
  zoom: 10,
  center: [longitude, latitude]
});

Код здесь создает объект MapView, отображает его в HTML-элемент с идентификатором viewDiv и передает объект Map, созданный ранее. Вы также можете установить начальный уровень масштабирования и координаты центра.

Общие свойства MapView

1. контейнер

   • Тип: строка или элемент HTML.
   • По умолчанию: Нет
   • Описание: указывает идентификатор или фактический элемент HTML элемента контейнера HTML, используемого для отображения карты. Карта будет отображаться в этом контейнере.

2. карта

   • Тип: Объект карты
   • По умолчанию: Нет
   • Описание: указывает объект карты, представляющий содержимое карты MapView.

3. масштабирование (уровень масштабирования)

   • Тип: Номер
   • По умолчанию: Нет
   • Описание: определяет начальный уровень масштабирования карты. Можно установить число между минимальным и максимальным уровнями масштабирования.

4. центр (координата центра)

   • Тип: Номер[]
   • По умолчанию: Нет
   • Описание: Укажите начальные координаты центральной точки карты. В виде долготы и широты, например [долгота, широта].

5. вращение (угол поворота)

   • Тип: Номер
   • Значение по умолчанию: 0
   • Описание: определяет начальный поворот карты в градусах. Можно установить число от -360 до 360.

6. ограничения

   • Тип: Объект ViewpointConstraints
   • По умолчанию: Нет
   • Описание: используется для установки ограничений карты, таких как максимальный уровень масштабирования, минимальный уровень масштабирования, видимый диапазон и т. д.

Пример создания объекта MapView и настройки свойств следующий:

// 创建 Map 对象
const map = new Map({
    
    
  basemap: "streets"
});

// 创建 MapView 对象，并配置属性
const view = new MapView({
    
    
  container: "viewDiv", // 将地图渲染到指定的 HTML 元素中
  map: map, // 指定要显示的地图对象
  zoom: 10, // 设置初始缩放级别为 10
  center: [0, 0] // 设置初始中心点坐标为 [0, 0]
});

// 添加图层到地图
const layer = new TileLayer({
    
    
  url: "https://example.com/path/to/layer" // 设置图层的 URL
});
map.add(layer);

В приведенном выше коде сначала создается объект Map и указывается используемая базовая карта (базовая карта). Затем создается объект MapView и в конфигурации задаются следующие свойства:

• container: указывает идентификатор элемента HTML-контейнера для отображения карты или фактического элемента HTML ( mapContainerздесь используется элемент с идентификатором).
• map: укажите объект карты для отображения, то есть ранее созданный объект карты.
• zoom: установите начальный уровень масштабирования на 10.
• center:Установите начальные координаты центральной точки на [0, 0].

Затем объект слоя создается и добавляется на карту.

Общие методы MapView

1. goTo() (прыжок)
перемещает вид на указанную точку обзора. Вы можете указать объект точки обзора, к которому нужно перейти, включая уровень масштабирования, центральную точку, угол поворота и т. д. Вы можете использовать параметр options, чтобы указать параметры перехода, такие как анимация и продолжительность.
Метод goto MapView — очень практичный метод, который позволяет нам переключить вид на указанную позицию и уровень масштабирования.
Основной синтаксис метода goto:
goTo(target, options){[Promise]}
Этот метод принимает два параметра:

• target: Целевое местоположение для просмотра. Это может быть геометрия (например, точка, линия или область), графика (изображение на карте) или любой объект с информацией о местоположении.
• options: необязательный параметр, используемый для указания параметров переключения вида, таких как переход анимации, уровень масштабирования и т. д.

Метод goto возвращает объект Promise, который разрешается после завершения переключения представления. Вы можете использовать метод .then() для обработки операций после завершения переключения представления.

Используйте метод goto, чтобы переместить вид карты в указанную позицию и увеличить масштаб:

const target = {
    
    
  target: [-118.80500, 34.02700], // 目标位置的经纬度坐标
  zoom: 13 // 缩放级别
};

view.goTo(target)
  .then(() => {
    
    
    // 视图切换完成后的操作
    console.log('视图已切换完成');
  })
  .catch((error) => {
    
    
    console.error('切换视图时发生错误', error);
  });

В приведенном выше коде мы сначала создаем объект, который содержит информацию о целевом местоположении и уровне масштабирования. Затем мы вызываем view.goTo()метод, передавая объект в качестве параметра. После завершения переключения представления .then()будет вызвана функция обратного вызова в методе, где вы сможете выполнять операции после завершения переключения представления. Если при переключении представлений произойдет ошибка, .catch()будет вызвана функция обратного вызова в методе, где можно обработать условие ошибки.

Здесь следует отметить, что метод goto также может принимать и другие параметры, такие как время перехода анимации, угол поворота и т. д. Можно optionsнастроить в параметрах. Подробное описание методов и параметров можно найти в официальной документации ArcGIS API for JavaScript.
2. on() (мониторинг событий)

• Параметры: Объект объекта
• Описание: Зарегистрируйтесь, чтобы следить за событиями на карте.
  Метод on MapView — это прослушиватель событий, который можно использовать для прослушивания и обработки событий карты. Метод on MapView возвращает объект Promise, а события можно обрабатывать, вызывая метод then объекта.

on()Обычно используемые события регистрации для методов MapView :

• «click»: срабатывает, когда пользователь нажимает на карту.
• «двойной щелчок»: срабатывает, когда пользователь дважды щелкает карту.
• «перетаскивание»: срабатывает, когда пользователь перетаскивает карту.
• «колесо мыши»: срабатывает, когда пользователь использует колесо мыши на карте.
• «pointer-down»: срабатывает, когда пользователь нажимает любую кнопку указательного устройства (кнопку мыши, сенсорный экран и т. д.) на карте.
• «pointer-move»: срабатывает, когда пользователь перемещает любое указательное устройство на карте.
• «pointer-up»: срабатывает, когда пользователь отпускает любую кнопку указательного устройства (кнопку мыши, сенсорный экран и т. д.).

Пример кода для использования метода on выглядит следующим образом:

<template>
  <div id="viewDiv"> 
  </div> 
</template>

<script setup> 
import {
    
     onMounted } from 'vue'
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';


onMounted(()=>{
    
    
  initArcGisMap()
})

const initArcGisMap = () => {
    
    
  const map = new Map({
    
    
    basemap: "topo-vector"
  });

  const view = new MapView({
    
     
    zoom: 4,
    container: "viewDiv",
    map: map
  });
  view.ui.components = []; 

  const target = {
    
    
    target:[-118.80500, 34.02700],
    zoom:13
  }
 view.goTo(target)
  .then(()=>{
    
    
    // 视图切换完成后的操作
    console.log('视图已切换完成');
  })
  .catch((error)=>{
    
    
    console.error('切换视图时发生错误', error);
  })

  view.on('click', (event) => {
    
    
    // 处理点击事件
    console.log('click事件触发')
  })
  view.on('double-click', (event) => {
    
    
    // 处理双击事件
    console.log('double-click事件触发')
  });
  view.on('drag', (event) => {
    
    
    // 处理拖拽事件
    console.log('drag事件触发')
  });
  view.on('mouse-wheel', (event) => {
    
    
    // 处理鼠标滚轮事件
    console.log('mouse-wheel 事件触发')
  });
  view.on('pointer-down', (event) => {
    
    
    // 在地图上按下任意指针设备按钮（鼠标按钮、触摸屏等）时触发事件
    console.log('pointer-down 事件触发')
  });
  view.on('pointer-move', (event) => {
    
    
    // 在地图上移动任意指针设备时触发事件
    console.log('pointer-move 事件触发')
  });
  view.on('pointer-up', (event) => {
    
    
    // 释放任意指针设备按钮（鼠标按钮、触摸屏等）时触发事件
    console.log('pointer-up 事件触发')
  });
  view.on('extent-change', (event) => {
    
    
    // 地图视图的范围发生变化时触发事件
    console.log('extent-change 事件触发')
  });
}
</script>
<style scoped>  
#viewDiv {
    
    
  width: 100%;
  height: 100vh; 
}
</style>

3. Метод toMap()
MapViewиспользуется toMap()для преобразования координат пикселей на странице в координаты широты и долготы на карте. Он принимает объект, содержащий координаты пикселей на странице, в качестве параметра и возвращает соответствующие координаты широты и долготы на карте.
Пример использования метода toMap():

<template>
  <div id="viewDiv">
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';  
let view
onMounted(() => {
  initArcGisMap()
})

const initArcGisMap = () => {
  const map = new Map({
    basemap: "topo-vector"
  });

  view = new MapView({
    center: [-118.80500, 34.02700],
    zoom: 4,
    container: "viewDiv",
    map: map
  });
  view.ui.components = [];

  view.on('click', handleMapClick)
}
  const handleMapClick = (event) => { 
    const screenPoint = {
        x: event.x,
        y: event.y
      }; 
    const mapPoint = view.toMap(screenPoint);
    console.log(`点击点的经纬度坐标为 经度:${mapPoint.latitude},纬度:${mapPoint.longitude}`)

  }
</script>
<style scoped>  #viewDiv {
    width: 100%;
    height: 100vh;
  }
</style> 

В приведенном выше коде метод handleMapClick вызывается, когда мы щелкаем по карте. В этом методе мы получаем пиксельные координаты страницы, на которую нажал пользователь, через объект события. Затем используйте метод view.toMap(screenPoint) для преобразования координат пикселей страницы в координаты широты и долготы на карте. Наконец, выведите полученные значения широты и долготы на консоль.
Запустите код, вы увидите координаты широты и долготы, выводимые консолью.

4. Метод toScreen()
MapViewиспользуется toScreen()для преобразования координат долготы и широты на карте в пиксельные координаты на странице. Он принимает в качестве параметра объект, содержащий координаты широты и долготы на карте, и возвращает соответствующие пиксельные координаты на странице.
Пример использования метода toScreen()

<template>
  <div id="viewDiv">
  </div>
</template>

<script setup>
import {
    
     onMounted } from 'vue'
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js'; 
import Point from "@arcgis/core/geometry/Point.js";

let view
onMounted(() => {
    
    
  initArcGisMap()
})

const initArcGisMap = () => {
    
    
  const map = new Map({
    
    
    basemap: "topo-vector"
  });

  view = new MapView({
    
    
    center: [-118.80500, 34.02700],
    zoom: 4,
    container: "viewDiv",
    map: map
  });
  view.ui.components = [];

  view.on('click', handleMapClick) 
}
  const handleMapClick = (event) => {
    
     
    const mapPoint = new Point({
    
    
        x: event.mapPoint.longitude,
        y: event.mapPoint.latitude,
        spatialReference: view.spatialReference
      });

      const screenPoint = view.toScreen(mapPoint);
      console.log(`点击点的屏幕坐标为 x:${
     
     screenPoint.x},y:${
     
     screenPoint.y}`)

  } 
</script>
<style scoped>  #viewDiv {
    
    
    width: 100%;
    height: 100vh;
  }
</style>

В приведенном выше коде, когда мы нажмем на карту, handleMapClickбудет вызван метод. В этом методе мы event.mapPointполучаем координаты широты и долготы на карте, куда щелкает пользователь. Затем создайте Pointобъект, представляющий координатную точку на карте, и укажите соответствующую пространственную привязку. Затем view.toScreen(mapPoint)преобразуйте точку координат карты в координаты пикселей на странице, используя Наконец, распечатайте полученные координаты пикселей на консоли.
Запустите программу, щелкните в любом месте карты, и вы увидите экранные координаты точки в консоли

. Вот и все, что касается знакомства с картой и MapView. Для получения дополнительной информации о ArcGIS Maps SDK для JavaScript мы продолжим в следующий раз. чат.