ArcGis for JavaScript 之 搭建Vue项目及加载底图

2019年5月23日 264次阅读 来源: 我叫傻先生
说明：
  • 1.本文主要记录自己这段时间使用Arcgis for JavaScript的一些总结，其中包括如何调用，如何在前端页面进行对数据的查询，不同符号渲染，小部件，等相关内容
  • 2.将使用官网提供的数据，后期可能自己发布相应的服务辅助
  • 3.前面已有一篇文章介绍了Arcgis的产品体系，以及我们前端需要用到的离线部署，这里就不赘述了。
  • 4.本次示例基于Vue框架,Arcgis for JavaScript API版本4.6
  • 项目Git地址

一、项目搭建及相关配置

1.了解如何开始

因为是使用的Vue框架，而esri官方也提供了esri-loader这个包，所以第一件事在GitHub上找到这个包(虽然只有不到两百个star)，然后阅读README.md,阅读后获得以下信息

  • 安装:npm install --save esri-loader 或者 yarn add esri-loader
  • 引入样式：@import url('https://js.arcgis.com/3.24/esri/css/esri.css');
  • 没有介绍引入JS的方法，但是介绍了一种懒加载JS的方法，当然这个也可用于选择API的版本，也可以改变URL为本地离线部署的地址，例如：

const options = {
  url: 'https://js.arcgis.com/3.24/' // 这里的API地址可以是官网提供的CDN，也可在此配置离线部署的地址
}
esriLoader.loadModules(['esri/map'], options) // 传入需要使用的类
.then(([Map]) => {
  // doSomeThing
})
.catch(err => {
  console.error(err)
})
2.项目搭建
  • 创建项目：vue init webpack arcgis_for_js_4.6
  • 进入目录：cd arcgis_for_js_4.6
  • 安装项目依赖：yarn
  • 安装esri-loader包: yarn add esri-loader
  • 启动项目: yarn start
  • 启动页面：

《ArcGis for JavaScript 之 搭建Vue项目及加载底图》 image

3.项目配置 ArcGis for JavaScript API

esri-loader已经下载好，现在需要对项目进行少许的配置

  • 前面已经介绍了如何引入JS，和CSS，所以可以直接引入即可，但是因为服务的地址较多，为了后期方便维护和修改，这里我们可以新建一个管理服务地址的文件，serviceUrl.js

export const ServiceUrl = {
    baseMap: 'topo' // 这里可以定义自己服务器上的底图的地址，也可以使用ArcGis提供的底图，详见Basemap类
}
  • 新建baseMap.js

<template>
  <div class='hello'>
    <h4>{{msg}}</h4>
  </div>
</template>
<script>
import { loadModules } from 'esri-loader'
import { ServiceUrl } from './ServiceUrl'
const option = ServiceUrl.apiUrl

export default {
  name: 'baseMap',
  data () {
    return {
      msg: 'Arcgis for JavaScript 4.6 Recode'
    }
  },
  mounted () {
    loadModules(['esri/Map', 'esri/views/MapView', 'dojo/domReady!'], option).then(([Map, MapView]) => {
      // doSomeThing
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>
<style scoped>
/*引入css*/
@import 'https://js.arcgis.com/4.7/esri/css/main.css';
</style>

《ArcGis for JavaScript 之 搭建Vue项目及加载底图》 image

图中1，我们使用的是esri-loader的loadModules来加载不同的类(模块),这里的loadModules是基于AMD异步加载模块的规范的，所以能看到基本代码骨架为loadModules().then().catch()

图中2，如果不配置option，在源码中会自动加载官方提供的API地址,即https://js.arcgis.com/4.7/

  • 创建底图

现在已经引入所需的基本类，Map，和MapView，现在就已经可以按照官网提供的API进行开发了，现在创建底图


this.map = new Map({
  basemap: 'topo' // 底图类型，详见BaseMap类
})
this.view = new MapView({
  container: 'viewDiv', // 视图的容器
  map: map, // Map的实例放入视图中
  center: [104.06, 30.67], // 初始显示的地图中心点，经纬度
  zoom: 10 // 当前地图缩放等级
})
  • 加载效果：

《ArcGis for JavaScript 之 搭建Vue项目及加载底图》 image

    原文作者：我叫傻先生
    原文地址: https://www.jianshu.com/p/29241325ad84
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞