首页 > 学术百科

arcgis+vue本地开发环境配置

个⼈博客迁移到，此处停更

arcgis + vue 本地开发环境配置

肖明华1 ⾸先⽤ vue-cli ⽣成项⽬结构并安装项⽬依赖，当然，这不是唯⼀的，同样也可以使⽤ iview-cli 来⽣成，再次不在赘述.

2 安装 arcgis 官⽅依赖 esri-loader，这个只是开发依赖，因此使⽤命令 npm i esri-loader --save-dev 来安装.

3 ⽤模块的⽅式引⼊ esri-loader;

import esriLoader from'esri-loader'

esriLoader 有以下⼏个⽅法 :

1 getScript () 从库⾥⾯获取 js ⽂件 ;get the script injected by this library

2 isLoaded () 检测模块是否加载完成 ;

3 loadModules( [ ], options) ⽤于加载arcgis 模块,

4 loadCss( url ) ⽤于加载css⽂件

5 loadScript({url: “xxxxxxxx” }) 将js 加载到页⾯上,

4 开始加载第⼀个地图:

// template 部分代码:

llr<div>

</div>

// css 代码 :

#viewDiv {

产品诉求

margin: 20px auto;

border: 1px solid #000;

width: 500px;

height: 400px;

}

// js 代码

import esriLoader from 'esri-loader'

const options = {

// 可以使⽤⾃定义资源加载,arcgis 官⽹加载太慢了，经常加载失败.后⾯会讲到⾃⼰本地如何配置资源 url: 'localhost:8080/arcgis_js_api/library/4.7/init.js'

}

esriLoader.loadModules ([

pdflib"esri/Map",

'esri/views/MapView',

], options)

.then (([

Map,

MapView

]) => {

const map = new Map ({

basemap: "streets"

北京空调器厂})

const mapview = new MapView ({

container: "viewDiv",

map: map,

zoom: 12,

center: [ 102.7346125, 25.0563901 ]

})

}, reason => {

console.log (reason);

})

配置好以上部分，就可以正常的加载出地图了.

5本地配置 arcgis 资源:

多哈会议5.1 下载资源，官⽹提供了下载的资源，需要先注册账号才能下载，但是呢，注册账号的有不开发，可以通过⾕歌账号登陆，登陆完成

就可以下载了.

5.2 windows 系统下配置 ,⾸先安装 tomcat，进⼊tomcat 所在⽬录，将下载下来的⽂件加压，将arcgis_js_api⽂件夹粘贴到

tomcat 的 webapps ⽬录下.

5.3 在 \arcgis_js_api\library\4.7 ⽬录下 init.js ⽂件打开, 搜索 [HOSTNAME_AND_PATH_TO_JSAPI]dojo，替换为

localhost:8080/arcgis_js_api/library/4.7/⽤同样的⽅式处理 \arcgis_js_api\library\4.7\dojo\dojo.js;

5.4 启动 tomcat ；这⾥注意，我的tomcat 默认端⼝是 8080, 如果你的不是 8080，请更改替换后连接的端⼝；然后，打开浏览器,

输⼊localhost:8080/arcgis_js_api/library/4.7/init.js，看看能否正常访问，能访问就在说明正常了.

如果⾃⼰配置有问题或者不想⾃⼰配置，我这⾥配置好了，下载之后解压，进⼊bin ⽬录，双击 startup.bat 启动即可；如果8080端⼝被占⽤，请先停⽤.然后重复步骤5.4看看.如果正常访问即可；记得配置加载路径哦，请看第4步的js部分配置⽅式.

本文发布于:2024-09-22 17:26:01，感谢您对本站的认可！

本文链接：https://www.17tex.com/xueshu/397014.html

上一篇：基于Vue的后台管理系统

下一篇：Vue轻量级后台管理系统基础模板

标签：配置加载访问

留言与评论（共有 0 条评论）