ArcGIS Maps SDK para JavaScript Serie 2: comprensión de Map y MapView

En ArcGIS Maps SDK para JavaScript, Map y MapView son dos conceptos importantes que se utilizan para crear y mostrar aplicaciones de mapas.

Mapa

Map representa un objeto de mapa que es la base de las aplicaciones de mapas. El mapa puede contener una o más capas, que pueden ser capas de mapa base, capas vectoriales, capas ráster o cualquier otro tipo de capa. El mapa también puede contener simbolización del mapa (simbología), etiquetas, anotaciones y otra información.

Código de muestra para crear un objeto Map:

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

El código aquí crea un objeto de mapa que contiene el mapa base 'streets-vector'.

Propiedades comunes del mapa

1. todas las capas (capas)
   • Tipo: Colección
   • Descripción: una colección ampliada de todas las capas del mapa (incluidos los mapas base)
2. mapa base
   • Tipo: cadena o objeto de mapa base
   • Descripción: Especifica el estilo del mapa base del mapa. Puede ser una cadena predefinida (como "calles", "satélite", "topo", etc.) o un objeto de mapa base personalizado.
3. suelo
   • Tipo: Objeto terrestre
   • Descripción: Una visualización para especificar la superficie de la Tierra. El objeto Terreno puede establecer el tipo de terreno, como "elevación mundial", "topobatimetría mundial", etc.
4. capas
   • Tipo: Colección de capas
   • Descripción: Contiene todas las capas del mapa actual. La visualización de capas en el mapa se puede ajustar agregando o eliminando objetos de capa, excluyendo el mapa base.

// 创建一个具有默认底图的地图对象
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]
});

El código anterior crea un objeto de mapa con un mapa base de "calles", luego agrega una capa de mosaico y finalmente usa MapView para mostrar el mapa en un elemento HTML específico.

Métodos comunes de mapa

1. agregar (capa) (agregar capa)

   • Parámetros: capa: objeto de capa
   • Descripción: Agrega la capa especificada al mapa. Las capas se pueden agregar dinámicamente y mostrarse en el mapa mediante este método.

2. eliminar(capa) (eliminar capa)

   • Parámetros: capa: objeto de capa
   • Descripción: Elimina la capa especificada del mapa. Utilice este método para eliminar capas del mapa en tiempo de ejecución.

3. findLayerById(id) (busca la capa según el ID)

   • Parámetros: id: Cadena
   • Valor de retorno: objeto de capa
   • Descripción: busque y devuelva el objeto de capa en el mapa según la ID especificada.

4. findLayersByName(nombre) (buscar capas por nombre)

   • Parámetros: nombre: Cadena
   • Valor de retorno: Capa [] (matriz de capas)
   • Descripción: busca y devuelve una matriz de objetos de capa que coincidan con el nombre según el nombre especificado.

5. removeAll() (eliminar todas las capas)

   • Descripción: Elimina todas las capas del mapa.

6. destruir() (destruir el mapa)

   • Descripción: Destruye el objeto del mapa y sus recursos relacionados. Utilice este método para limpiar el objeto del mapa y liberar memoria, especialmente cuando el mapa ya no es necesario.

Vista del mapa

MapView es un componente de vista que se utiliza para mostrar objetos de mapa y es responsable de representar el mapa en la página HTML. MapView proporciona funciones para que los usuarios interactúen con el mapa, como panorámica, zoom, rotación y otras operaciones. MapView también admite la adición de gráficos y ventanas emergentes, y proporciona funciones como eventos del mouse y control interactivo.

Código de muestra para crear un objeto MapView:

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

El código aquí crea un objeto MapView, lo representa en el elemento HTML con el ID 'viewDiv' y pasa el objeto Map creado anteriormente. También puede establecer el nivel de zoom inicial y las coordenadas centrales.

Propiedades comunes de MapView

1. envase

   • Tipo: cadena o elemento HTML
   • Predeterminado: Ninguno
   • Descripción: Especifica el ID del elemento contenedor HTML o del elemento HTML real utilizado para mostrar el mapa. El mapa se representará en este contenedor.

2. mapa (mapa)

   • Tipo: objeto de mapa
   • Predeterminado: Ninguno
   • Descripción: Especifica el objeto de mapa, que representa el contenido del mapa de MapView.

3. zoom (nivel de zoom)

   • Teclea un número
   • Predeterminado: Ninguno
   • Descripción: Especifica el nivel de zoom inicial del mapa. Se puede establecer un número entre los niveles de zoom mínimo y máximo.

4. centro (coordenadas centrales)

   • Teclea un número[]
   • Predeterminado: Ninguno
   • Descripción: Especifique las coordenadas del punto central inicial del mapa. Expresado en forma de longitud y latitud, como [longitud, latitud].

5. rotación (ángulo de rotación)

   • Teclea un número
   • Valor predeterminado: 0
   • Descripción: Especifica el ángulo de rotación inicial del mapa, en grados. Puede establecer un número entre -360 y 360.

6. restricciones

   • Tipo: objeto ViewpointConstraints
   • Predeterminado: Ninguno
   • Descripción: Se utiliza para establecer restricciones del mapa, como el nivel máximo de zoom, el nivel mínimo de zoom, el rango visible, etc.

Un ejemplo de creación de un objeto MapView y configuración de propiedades es el siguiente:

// 创建 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);

En el código anterior, primero se crea un objeto Map y se especifica el mapa base que se utilizará. Luego, se creó un objeto MapView y se establecieron las siguientes propiedades en la configuración:

• container: Especifica el ID del elemento contenedor HTML o el elemento HTML real ( mapContaineraquí se utiliza el elemento ID) en el que se va a representar el mapa.
• map: Especifique el objeto de mapa que se mostrará, es decir, el objeto de mapa creado anteriormente.
• zoom: establece el nivel de zoom inicial en 10.
• center:Establezca las coordenadas del punto central inicial en [0, 0].

Luego, se creó un objeto de capa y se agregó al mapa.

Métodos comunes de MapView

1. goTo() (saltar)
salta la vista al punto de vista especificado. Puede especificar el objeto del punto de vista al que saltar, incluido el nivel de zoom, el punto central, el ángulo de rotación, etc. Puede utilizar el parámetro de opciones para especificar opciones de salto como la animación y la duración.
El método goto de MapView es un método muy práctico que nos permite cambiar la vista a la posición y el nivel de zoom especificados.
Sintaxis básica del método goto:
goTo(target, options){[Promise]}
este método acepta dos parámetros:

• target: La ubicación de destino para ver. Puede ser una Geometría (como un punto, una línea o un área), un Gráfico (una forma en un mapa) o cualquier objeto con información de ubicación.
• options: Parámetro opcional utilizado para especificar opciones de cambio de vista, como transición de animación, nivel de zoom, etc.

El método goto devuelve un objeto Promise que se resuelve una vez que se completa el cambio de vista. Puede utilizar el método .then() para manejar las operaciones una vez completado el cambio de vista.

Utilice el método goto para mover la vista del mapa a una ubicación específica y hacer zoom:

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

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

En el código anterior, primero creamos un objeto que contiene la ubicación del objetivo y la información del nivel de zoom. Luego llamamos view.goTo()al método, pasando el objeto como parámetro. Una vez completado el cambio de vista, .then()se llamará a la función de devolución de llamada en el método, donde podrá realizar operaciones una vez completado el cambio de vista. Si se produce un error al cambiar de vista, .catch()se llamará a la función de devolución de llamada en el método, donde se puede manejar la condición de error.

Cabe señalar aquí que el método goto también puede aceptar otras opciones, como el tiempo de transición de la animación, el ángulo de rotación, etc. Se puede optionsconfigurar en parámetros. Para obtener descripciones detalladas de métodos y parámetros, consulte la documentación oficial de ArcGIS API para JavaScript.
2. on() (monitoreo de eventos)

• Parámetros: objeto objeto
• Descripción: Regístrese para escuchar los eventos del mapa.
  El método on de MapView es un detector de eventos que se puede utilizar para escuchar y procesar eventos del mapa. El método on de MapView devuelve un objeto Promise y los eventos se pueden manejar llamando al método then del objeto.

on()Los eventos de registro comúnmente utilizados para los métodos MapView son los siguientes:

• "click": Se activa cuando el usuario hace clic en el mapa.
• "doble clic": se activa cuando el usuario hace doble clic en el mapa.
• "arrastrar": se activa cuando el usuario arrastra sobre el mapa.
• "mouse-wheel": se activa cuando el usuario usa la rueda del mouse en el mapa.
• "puntero hacia abajo": se activa cuando el usuario presiona cualquier botón del dispositivo señalador (botón del mouse, pantalla táctil, etc.) en el mapa.
• "pointer-move": se activa cuando el usuario mueve cualquier dispositivo de puntero en el mapa.
• "pointer-up": se activa cuando el usuario suelta cualquier botón del dispositivo señalador (botón del mouse, pantalla táctil, etc.).

El código de muestra para usar el método on es el siguiente:

<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. El método toMap()
MapViewse toMap()utiliza para convertir las coordenadas de píxeles de la página en coordenadas de latitud y longitud en el mapa. Acepta un objeto que contiene las coordenadas de píxeles en la página como parámetro y devuelve las coordenadas de latitud y longitud correspondientes en el mapa.
Ejemplo de uso del método 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> 

En el código anterior, se llama al método handleMapClick cuando hacemos clic en el mapa. En este método, obtenemos las coordenadas de píxeles de la página en la que el usuario hizo clic a través del objeto de evento. Luego, use el método view.toMap(screenPoint) para convertir las coordenadas de píxeles de la página a las coordenadas de latitud y longitud en el mapa. Finalmente, imprima los valores de latitud y longitud obtenidos en la consola.
Ejecute el código y podrá ver las coordenadas de latitud y longitud generadas por la consola.

4. El método toScreen()
MapViewse toScreen()utiliza para convertir las coordenadas de latitud y longitud del mapa en coordenadas de píxeles en la página. Toma un objeto que contiene coordenadas de latitud y longitud en el mapa como parámetro y devuelve las coordenadas de píxeles correspondientes en la página.
Ejemplo de uso del método 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>

En el código anterior, cuando hacemos clic en el mapa, handleMapClickse llamará al método. En este método, obtenemos event.mapPointlas coordenadas de latitud y longitud en el mapa de la ubicación del clic del usuario. Luego, cree un Pointobjeto para representar el punto de coordenadas en el mapa y especifique la referencia espacial correspondiente. A continuación, utilice view.toScreen(mapPoint)Convertir puntos de coordenadas del mapa en coordenadas de píxeles en la página. Finalmente, las coordenadas de píxeles obtenidas se imprimen en la consola.
Ejecute el programa, haga clic en cualquier parte del mapa y podrá ver las coordenadas de pantalla del punto en la consola

. Eso es todo para la introducción de Map y MapView. Para obtener más información sobre ArcGIS Maps SDK para JavaScript, continuaremos la próxima vez. charlar.