vue3+arcgis/core学习实践加载天地图

<template>
  <div id="map-view" style="width: 100%; height: 100%"></div>
</template>
 
<script setup>
import { onMounted } from 'vue';
import MapView from '@arcgis/core/views/MapView';
import WebMap from '@arcgis/core/WebMap';
import tianDiTuLayer from '@arcgis/core/layers/TianDiTuLayer';
 
onMounted(() => {
  const mapView = new MapView({
    container: 'map-view',
    map: new WebMap({
      layers: [
        new tianDiTuLayer({
          serviceUrl: 'http://t0.tianditu.gov.cn/vec_w/wmts',
          name: 'vec',
          visible: true,
          opacity: 1,
        }),
      ],
    }),
    center: [-121.89, 34.07],
    zoom: 8,
  });
});
</script>
 
<style>
/* 样式按需添加，确保页面布局正确 */
</style>

这段代码使用了Vue 3的<script setup>语法糖，在组件被挂载后，创建了一个MapView实例，并使用了一个天地图图层tianDiTuLayer。代码中的serviceUrl是天地图政府版图的WMTS服务地址，name属性为'vec'代表矢量图层。组件的<template>部分只包含了用于展示地图的容器元素。