1.技术路线
- 前端:vue+sass+axios+webpack
- 数据接口:node
- 地图接口:ArcGIS Server
- 数据库:Sql Server
2.配置本地SDK 4.10和ArcGIS API 4.10
2.1 部署nginx
-
进入解压后文件夹(nginx.exe所在文件夹),输入cmd命令start nginx启动nginx
2.2 下载SDK和API
-
百度网盘,提取码(cqlb)
-
将解压后的arcgis_js_v410_sdk下的sdk文件夹,和arcgis_js_v410_api文件夹中的arcgis_js_api放入nginx文件夹的html中
2.3 修改文件
- 修改nginx配置文件conf/nginx.conf
location /arcgis_js_api {
root html;
add_header 'Access-Control-Allow-Origin' '*';
}
location /arcgis_js_sdk {
root html;
add_header 'Access-Control-Allow-Origin' '*';
}
-
修改API地址文件
-
修改 文件arcgis_js_apilibrary4.10init.js
将
[HOSTNAME_AND_PATH_TO_JSAPI]
替换成localhost:8080/arcgis_js_api/library/4.10/
-
修改文件:arcgis_js_apilibrary4.10dojodojo.js
将
[HOSTNAME_AND_PATH_TO_JSAPI]
替换成localhost:8080/arcgis_js_api/library/4.10/
-
3 初始化Vue项目
3.1 准备
- 安装 node
- 安装 vue:
npm install vue -g
- 安装 vue-cli:
npm install vue -cli -g
3.2 初始化
$ vue init webpack first-test-vue // 初始化命令
? Project name first-test-vue // 项目名称
? Project description A Vue.js project // 项目描述
? Author NathanYang // 作者
? Vue build standalone // 独立构建
? Install vue-router? Yes // 安装路由
? Use ESLint to lint your code? Yes // 安装 ESLint 代码检测工具
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? No // 端到端测试
3.3 目录结构
目录/文件 | 说明 |
---|---|
build | 项目构建(webpack)相关代码 |
config | 配置目录,包括端口号代理等 |
node_modules | npm 加载的项目依赖模块 |
src | 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:assets: 放置一些图片,如logo等。components: 目录里面放了一个组件文件,可以不用。App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。main.js: 项目的核心文件。 |
static | 静态资源目录,如图片、字体等。 |
test | 初始测试目录,可删除 |
.xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。 |
index.html | 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。 |
package.json | 项目配置文件。 |
README.md | 项目的说明文档,markdown 格式 |
3.4 安装包
-
esri-loader: 一个小型库,可帮助在非Dojo应用程序中加载ArcGIS API for JavaScript模块
npm install --save esri-loader
-
Sass: Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法
npm install --save-dev sass-loader
npm install --save-dev node-sass
3.5 项目配置
- 自动打开浏览器:修改config/index.js
autoOpenBrowser:false
为autoOpenBrowser:true
- 热启动: 修改呢config.json 在scripts/dev/webpack-dev-server 后添加
--hot
4 搭建第一个地图
4.1 引入组件
1、App.vue引入css文件,对应本地部署的路径.
@import url('http://localhost:8080/arcgis_js_api/library/4.10/esri/themes/light/main.css');
2、通过esriLoader的loadModules方法引入ArcGIS中模块
const options = {
url: 'http://localhost:8080/arcgis_js_api/library/4.10/dojo/dojo.js'
}
esriLoader.loadModules([
'esri/Map',
'esri/views/MapView',
],options).then(([Map,MapView])=>{
this.Map=Map;
this.MapView=MapView;
}).catch(error => console.log(error))
3、初始化地图
let _this = this;
// 初始化地图
this.currentMap = new this.Map({
basemap: 'streets'
});
this.currentView = new this.MapView({
map: _this.currentMap,
container: "map",
center: [121.256151, 31.328742],
zoom: 18
});
this.currentView.ui.remove("attribution");
4、生成地图