ArcGIS API for JavaScript在项目中的引用方式

非框架项目

  1. 使用开发者身份在ArcGIS API for JS管网下载开发工具包。
  2. 设置ArcGIS API for JavaScript开发工具包。

    修改下面路径的文件:
    arcgis_js_api\library\4.15\init.js
    arcgis_js_api\library\4.15\dojo\dojo.js
    将https://\[HOSTNAME\_AND\_PATH\_TO\_JSAPI\]dojo
    替换成:项目路径/assets/arcgis_js_api/library/4.15/dojo
  3. 在HTML文件中的<head>部分中增加引用ESRI提供的样式表和js文件

        <link rel="stylesheet" href="../../assets/arcgis_js_api/library/4.15/esri/css/main.css" />
        <script src="../../assets/arcgis_js_api/library/4.15/init.js"></script>
  4. 在<body>区域增加一个<div>元素,用于承载地图

    <div id="map"></div>
  5. 加载地图模块

    <script>
      require([
          "esri/map",
          "esri/layers/ArcGISTiledMapServiceLayer",
          "dojo/domReady!"
      ],function(Map, ArcGISTiledMapServiceLayer) {
    
      });
    </script>

vue项目

  1. 首先是npm安装

    npm install esri-loader -S
  2. 安装完之后import一下

    import esriLoader from  'esri-loader'
  3. 样式文件可以在main.js中引入,也可以在当前组件引入,我选择的是在main.js中引

    import '../public/src/assets/js/4.15/esri/themes/light/main.css'//这里用相对路径就可以了
  4. 最后加载就可以使用arcgis的api了,部分代码如下

    const options = {
        url: "/src/assets/js/4.15/init.js"//这里千万小心,要用绝对路径,这是托管在本地服务器上的地址
      }
      esriLoader
      //按需加载模块
      .loadModules([
        "esri/Map", 
        "esri/views/MapView",//2d视图模块
        "esri/views/SceneView",//3d视图模块
      ],options)
      .then(([
        Map,
        MapView,
        SceneView
      ])=>{
        console.log(Map)
      })
  5. 如果控制台可以打印出Map对象,那么说明我们已经在vue中成功加载arcgis了
阅读 441

推荐阅读