（ArcGIS-01）ArcGIS+Vue入门

简介        

        ArcGIS API for JavaScript是一种基于地图的开发解决方案，它允许开发人员在Web应用程序中嵌入交互式地图，并使用JavaScript编写地图应用程序。

        ArcGIS API for JavaScript提供了强大的API和工具，通过这些工具的协调工作，开发人员可以完成从简单到复杂的各种GIS任务，包括制图、数据管理、空分析、数据编辑和地理处理。

引入

        首先需要引入ArcGIS API for JavaScript，现在通常都使用yarn替换npm管理前端JS包，所以此处以yarn为例，首先通过下面方法引入ArcGIS包：

yarn add @arcgis/core
也可以通过
yarn add @arcgis/core@4.25
安装指定版本号。

引入后，node_modules中可以看到ArcGIS包，如下图所示：

代码

紧接着，我们就可以开始写代码了：

1、创建一个div，装载我们的地图

<div id="map-container" style="width: 100%;height: 80vh">

2、引入ArcGIS中的样式，给我们最终地图设置样式：

import "@arcgis/core/assets/esri/themes/light/main.css";

3、引入我们要使用的组件，用什么就引入什么，肯定要用的是Map、MapView，下面截取一段我之前引入的代码。

import Map from "@arcgis/core/Map.js";
import MapImageLayer from "@arcgis/core/layers/MapImageLayer.js";
import Basemap from "@arcgis/core/Basemap.js";
import MapView from "@arcgis/core/views/MapView.js";
import Point from "@arcgis/core/geometry/Point.js";
import Graphic from "@arcgis/core/Graphic.js";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
import Extent from "@arcgis/core/geometry/Extent.js";
import Polyline from "@arcgis/core/geometry/Polyline.js";
import SimpleLineSymbol from "@arcgis/core/symbols/SimpleLineSymbol.js";
import Circle from "@arcgis/core/geometry/Circle.js";
import SimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol.js";
import VectorTileLayer from "@arcgis/core/layers/VectorTileLayer.js";
import Feature from "@arcgis/core/widgets/Feature.js";
import PictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol.js";

import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
import PopupTemplate from "@arcgis/core/PopupTemplate.js";
import FieldInfo from "@arcgis/core/popup/FieldInfo.js";

4、开始在mounted或者created中创建地图：

let basemap = new Basemap({
  baseLayers: [
    new MapImageLayer({
      url: url,
      //url:"http://localhost:6080/arcgis/rest/services/dir/myMap",
      title: "Basemap"
    })
  ],
  title: "basemap",
  id: "basemap"
});

this.map = new Map({
  //basemap: basemap,//如果使用本地ArcGIS server中发布的地图服务
  //basemap: "streets-vector",//如果使用在线地图服务
  zoom: 24,//地图初始化缩放级别   只有使用在线地图服务该属性才有效
});

this.view = new MapView({
  container: "map-container",
  map: this.map,
  extent: {//初始化范围
    spatialReference: {
      wkid: 4326,//坐标系
    },
    xmin: 99.298390123,
    ymin: 32.192839123,
    xmax: 125.2983901923,
    ymax: 50.281973892,
  },
  //中心坐标
  center: [110.3289749234, 41.2394820934]
})

此时我们的页面就能够看到地图了,以我本地引入一个在线地图为例（我已经删除了自己画的一些图层）。

其中在线可以添加的地图服务参考官网：

Map | API Reference | ArcGIS Maps SDK for JavaScript 4.27 | ArcGIS Developers

5、下面我们就可以向地图中增加图层了，下面增加一个简单的三点连线

let paths = []
paths.push([100, 35])
paths.push([102, 35.1]) 
paths.push([104, 38.2])
// 添加线
let polyline = {
  type: "polyline",
  paths: paths,
};
let color = [48, 242, 120, 0.5]//颜色
const width = 8;
let polylineSymbol = {
  type: "simple-line",
  style: "solid",//实线，不设置也默认这个
  width: width,
  color: color
}
let polylineGraphic = new Graphic({
  geometry: polyline,
  symbol: polylineSymbol,
});
this.view.graphics.add(polylineGraphic);

最后效果图如下：

至此，应该能够帮助到一些小伙伴入门了，接下来就是根据我们的需要，使用Api中的组件了，组件的使用参照官网：

Quick Links | API Reference | ArcGIS Maps SDK for JavaScript 4.27 | ArcGIS Developers

就可以了