arcgis + vue 本地开发环境配置 2018-04-28

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 文件 ;
  • 2 isLoaded () 检测模块是否加载完成 ;
  • 3 loadModules( [ ], options) 用于加载arcgis 模块,
  • 4 loadCss( url ) 用于加载css文件
  • 5 loadScript({url: "xxxxxxxx" }) 将js 加载到页面上,

• 4 开始加载第一个地图:

  // template 部分代码: 
      <div>
          <div id="viewDiv"></div>
          <div id="newmap"></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: 'http://localhost:8080/arcgis_js_api/library/4.7/init.js'
          }
  
          esriLoader.loadModules ([
              "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 文件打开, 搜索 https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo,替换为
    http://localhost:8080/arcgis_js_api/library/4.7/
    用同样的方式处理 \arcgis_js_api\library\4.7\dojo\dojo.js;
  • 5.4 启动 tomcat ;这里注意,我的tomcat 默认端口是 8080, 如果你的不是 8080,请更改替换后连接的端口;然后,打开浏览器,
    输入http://localhost:8080/arcgis_js_api/library/4.7/init.js,看看能否正常访问,能访问就在说明正常了.