arcgis api for 4.x 学习笔记-在Vue 2.X项目中部署arcgis api for javascript 4.x（二）

一、介绍

为了更好的学习arcgis api for javascript 4.x,我使用vue cli 4.x创建了一个vue的项目，具体的创建方式请百度。由于项目是vue项目，所以我使用的是上一篇文章提到的，使用ES模块构建arcgis api for javascript 4.x。

二、部署

将模块安装到您的项目中：

npm install @arcgis/core

复制资源：

需要将API的资产（包括样式，图像，字体和本地化文件）从该 @arcgis/core/assets文件夹复制到构建文件夹。一种简单的方法是配置在构建过程中运行的NPM脚本。例如，使用npm ncp在package.json中安装和配置脚本以复制文件夹，具体步骤如下：

1. 安装ncp

npm i ncp

2.配置package.json脚本

package.json里面添加

 "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets",
 "postinstall": "npm run copy"

执行postinstall，将API的资产（包括样式，图像，字体和本地化文件）从该@arcgis/core/assets文件夹复制到构建文件夹

配置CSS

<style lang="less">
@import url('~@arcgis/core/assets/esri/themes/dark/main.css');

body, html, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

App.vue文件中添加 @importurl('~@arcgis/core/assets/esri/themes/dark/main.css'); 引入arcgis api的样式。（必须添加，否则样式是乱的）

三、最后

万事具备，我们可以使用arcgis api了

  <template>
  <div id="viewDiv"></div>
  </template>

ES模块导入的代码段：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';

@Component({ name: 'MapIndex' })
export default class MapIndex extends Vue {
  view: MapView | undefined;

  mounted() {
    const map = new Map({
      basemap: 'topo-vector',
    });

    this.view = new MapView({
      container: 'viewDiv',
      map,
      zoom: 4,
      center: [15, 65], // longitude, latitude
    });
  }
}
</script>

效果：

成功创建地图！

四、样式调整

#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

注意：如果上述操作步骤都完成但是还是看不到地图，在没有报错的情况下，看一下是否是map的viewDiv（dom容器）或者body、html的width和height没有设置成100%

/* 去掉地图聚焦边框 */
.esri-view-surface--inset-outline:focus::after {
  outline: none !important;
}

mounted() {
    const map = new Map({
      basemap: 'streets',
    });

    this.view = new MapView({
      container: 'viewDiv',
      map,
      zoom: 4,
      center: [102, 24], // longitude, latitude
    });
    /* 去掉地图logo */
    this.view.ui.remove('attribution');
  }

demo源代码地址

jz991724/jsapiArcgis4.x

上一篇：arcgis api for 4.x 学习笔记-在Vue 2.X项目中部署arcgis api for javascript 4.x（一）_u012917880的博客-CSDN博客

下一篇：arcgis api for 4.x 学习笔记-在Vue 2.X项目中部署arcgis api for javascript 4.x（三）_u012917880的博客-CSDN博客