如何使用vue加载你的要素图层

（本文在上一篇《如何加载web地图》基础上完成）

将原来mapview.vue文件中的代码改成如下：

<template>
    <div id="map"></div>
  </template>
   
  <script setup lang="ts">
  import { onMounted } from 'vue'
  import Map from '@arcgis/core/Map.js'
  import MapView from '@arcgis/core/views/MapView.js'
  import esriConfig from "@arcgis/core/config";
  import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; 
   
  const initMap = () => {
    esriConfig.apiKey = '你的api';
    const map = new Map({
      basemap: 'arcgis/topographic'
    });
   
    const view = new MapView({
      map,
      container: 'map',
      center: [116.805, 36.027],
      zoom: 4
    });

    const layer = new FeatureLayer({
        url:"https://services2.arcgis.com/j80Jz20at6Bi0thr/arcgis/rest/services/地震数据/FeatureServer/0"

    });
    map.add(layer);

  

    
  }
   
  onMounted(() => {
    initMap()
  })
  </script>
   
  <style scoped>
  #map {
    width: 100%;
    height: 100%;
  }
  </style> 

对上述代码的一些理解：

1.需要引入api

import esriConfig from "@arcgis/core/config";

esriConfig.apiKey = 'AAPKb9fe8ec672004da7bfa1847f3ffbb8518jQr9zOMbWDhKjYI5leVpfSFZgSmHl64ZqE3pHmwaSzrT4JssWhn7S4jDFzVURC1';

 

2.需要导入featurelayer的命名空间

import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; 

3.添加要素图层，并合并到map中

const featureLayer = new FeatureLayer({  
      url: "图层的URL", // 例如: "https://services.arcgis.com/YOUR_SERVICE/MapServer/0"  
      // 其他可选的图层配置选项，如id、title、visible等  
    });  
  
    // 将图层添加到地图中  
    map.add(featureLayer);