ArcGIS Maps SDK for JavaScript系列之二：认识Map和MapView

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

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

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

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

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

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

<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>

<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> 

<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>