如何在Vue项目中引入ArcGIS JavaScript API​ 创建三维可视化地图（含vue项目创建教程）

新手上路之在Vue项目中引入ArcGIS API​

视频教程

• B站搜索 X北辰北，感谢up主无私的教学~
• B站地址：https://www.bilibili.com/video/BV18E411K7B2

文档教程

1. 首先安装node.js运行环境

• https://nodejs.org/en/
• 下载稳定版：

     

2. 如果在国内需要配置一下npm的镜像源，永久替换为淘宝镜像

• 教程：https://www.cnblogs.com/cythia/p/10985080.html
• 命令行：npm config set registry https://registry.npm.taobao.org 

3. 在本地创建vue项目

• 找一个盘，创建一个本地文件夹

• 打开文件夹，按住shift键，鼠标右击空白位置，在弹出的选项卡中选PowerShell：

• 输入命令，安装vue：npm install -g @vue/cli

     

• 输入vue --version检查是否安装成功

     

• 然后就可以创建vue项目了，在项目根目录下输入命令：

     

• 选择默认的插件，直接回车就行：

          

• 然后进入项目根目录：cd .\vuejsapidemo

     

• 运行服务，检查是否创建成功：npm run serve

       

• 出现以下界面即说明安装成功，可以在浏览器中打开任一地址查看vue的helloworld界面

• 按ctrl+c 可以终止运行，输入Y

       

• 安装成功后，需要安装esri-loader，引入arcgis api：npm install esri-loader --save-dev

    

    

• 用代码编辑器打开你的项目（此处用VSCode演示），打开App.vue：

• 删除里面的所有代码，替换为如下代码（里面的URL等地址可以在https://developers.arcgis.com/javascript/latest/sample-code/intro-sceneview/index.html即ESRI的官网找到）：

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

<script>
import { loadModules } from "esri-loader";

export default {
  name: "App",
  components: {},
  methods: {
    _createSceneView: function () {
      let options = {
        url: "https://js.arcgis.com/4.16/",
        css: "https://js.arcgis.com/4.16/esri/themes/light/main.css",
      };

      loadModules(["esri/Map", "esri/views/SceneView"], options).then(
        ([Map, SceneView]) => {
          let map = new Map({
            basemap: "streets",
            ground: "world-elevation",
          });
          let view = new SceneView({
            container: "sceneview", // 注意这里的sceneview必须和上面div中的id一致（踩过的坑...）
            map: map, 
          });

          console.log(view);
        }
      );
    },
  },
  mounted: function () {
    this._createSceneView();
  },
};
</script>

<style>
body {
  margin: 0 !important;
}
#sceneview {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>

• 刷新vue的Hello word界面 ，蔚蓝色的Esri地球已经出来了：（不小心关掉了也可以输入npm run serve命令重新获取地址哦）

• 番外：还可以使用Vue项目可视化管理界面终止和开始运行：

首先，还是在项目根目录下打开PowerShell，输入vue ui命令，即可弹出可视化管理界面

关注我获取更多编程知识，和我共同进步吧~