新手上路之在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命令，即可弹出可视化管理界面

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

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

VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
引入 javascript_在您JavaScript项目中引入类型安全性？再想一想
引入 javascript by James Wright 詹姆斯·赖特(James Wright) 在您JavaScript项目中引入类型安全性? 再想一想 (Introducing Type Sa ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出（封装工具类）
在SpringBoot+VUE项目中引入EasyExcel实现导入导出一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...
Webpack项目中引入Bootstrap4.x
Bootstrap是一个简洁.直观.强悍的前端开发框架,在Web开发中使用频率很高,本文主要记录一下如何在 webpack项目中引入Bootstrap4.x. 由于Bootstrap在各个Vue组件中 ...
Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
Vue笔记——Vue组件中引入jQuery
Vue笔记--Vue组件中引入jQuery 如果想在普通的HTML页面引入jQuer库的话,直接使用<script src="jQuery.js"></scrip ...

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

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

视频教程

文档教程

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

最新文章

热门文章

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

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

视频教程

文档教程

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

最新文章

热门文章

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

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

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