WebGIS - ArcGIS + Vue3.0初始地图服务加载（Demo）

基于Vue3.0，使用ArcGis API For JavaScript，加载一个地图服务

项目构建

# 项目构建-选择3.0版本
vue create arcgis
# 安装arcgis
npm i esri-loader -S

1. 引入样式

    index.scss

@import "https://js.arcgis.com/4.10/esri/css/main.css";

2. setup()

    App.vue

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

<script>
import { loadModules } from "esri-loader";
import { computed, onMounted, reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      name: "arcgis"
    });
    onMounted(handleMounted);
    return { state };
  },
};
function handleMounted() {
  loadModules(["esri/Map", "esri/views/MapView"]).then(([Map, MapView]) => {
    let map = new Map({
      basemap: "hybrid", // streets，hybrid
    });

    let view = new MapView({
      container: "map",
      map,
      center: [106, 34.09042],
      zoom: 3,
    });
  });
}
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
}
</style>

---