ArcGIS API for JS 4.x + Vue 【1】—— 显示地图和添加点线面

系列文章目录

【1】 ArcGIS API for JS 4.x + Vue 之 显示地图和添加点线面

---

---

前言

提示：这里可以添加本文要记录的大概内容：
本文介绍的是ArcGIS API for JS 4.x版本在Vue上的使用，且假设阅读者对Vue有一定的了解。

1.假设VScode、nodejs等已经安装好了；

2.全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目；

3.安装webpack，它是打包js的工具；

4.创建Vue项目。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、显示地图

安装依赖

从 ArcGIS API for JavaScript v4.18 开始，您可以尝试安装@arcgis/core并使用 ES 模块进行构建， 而不是使用 esri-loader。

npm install @arcgis/core --save

1. 添加模块

import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import esriConfig from "@arcgis/core/config";

2. 引入CSS样式

@import "https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/dark/main.css";

若要在本地导入样式可查看官方文档。

3. 获取密钥

一个API 密钥是访问ArcGIS 服务所必需的。

1. 转到你的开发人员仪表板以获取API 密钥.
2. 复制密钥，因为它将在下一步中使用。

若没有ArcGIS账号，直接在跳转页面注册即可。（注意不要使用企鹅邮箱，如果emit长时间转圈需要搭梯子）

4. 创建地图

使用一个Map设置底图图层并应用API 密钥。

esriConfig.apiKey = '你的API密钥'
// 创建地图
const map = new Map({
  basemap: "arcgis-topographic" // 底图图层
})

5. 创建地图视图

使用一个MapView类来设置要显示的地图位置。

// 创建地图视图
const view = new MapView({
  map: map,
  center: [-118.805, 34.027], // 地图中心点经纬度
  zoom: 13, // 缩放等级
  container: "viewDiv" // 地图容器id
})

参考例子

示例图：

代码如下（示例）：

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

<script>
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import esriConfig from "@arcgis/core/config";

  export default {
    name: 'MapDisplay',
    methods: {
      initMap(){
        esriConfig.apiKey = '你的Api密钥'
        // 创建地图
        const map = new Map({
          basemap: "arcgis-topographic" // 底图图层
        })

        // 创建地图视图
        const view = new MapView({
          map: map,
          center: [-118.805, 34.027], // 地图中心点经纬度
          zoom: 13, // 缩放等级
          container: "viewDiv" // 地图容器id
        })
      },
    },
    mounted() {
      this.initMap()
    },
  }
</script>

<style scoped>
@import "https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/dark/main.css";
#viewDiv{
  height: 80vh;
  width: 100%;
}
</style>

二、添加点、线和多边形

1. 添加模块

import Graphic from "@arcgis/core/Graphic";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";

2. 添加图形图层

图形图层是图形的容器，被用于在地图上展示图形。你可以添加多个图形图层到一个地图视图上，而且图形图层置于所有图层之上。

// 创建图形图层
const graphicsLayer = new GraphicsLayer()
map.add(graphicsLayer)  // 添加图层至地图中

3. 添加点图形

一个点图形是由一个点和一个点符号来创建的。一个点由经度（x）和纬度（y）来定义，而一个点符号由填充颜色和轮廓来定义。

// 添加点
const point = { //点设置
  type: "point",  //类型：点、线、面
  longitude: -118.80657463861,  //经度
  latitude: 34.0005930608889  //纬度
}
const simpleMarkerSymbol = {  //点符号设置
  type: "simple-marker",  //点符号类型(一般为SimpleMarkerSymbol, PictureMarkerSymbol 和 TextSymbol等)
  color: [226, 119, 40],  //符号颜色
  outline: {  //轮廓设置
      color: [255, 255, 255], //轮廓颜色
      width: 1  //轮廓宽度
  }
}
const pointGraphic = new Graphic({
  geometry: point,
  symbol: simpleMarkerSymbol
})
graphicsLayer.add(pointGraphic)

4. 添加线图形

一个线图形是由一条折线和一个线符号来创建的。一条折线由一个点序列和一个空间参考来定义，而一个线符号由颜色和线宽来定义。

// 添加线
const polyline = {
  type: "polyline",
  paths: [
      [-118.821527826096, 34.0139576938577],
      [-118.814893761649, 34.0080602407843],
      [-118.808878330345, 34.0016642996246]
  ]
}
const simpleLineSymbol = {  //线符号设置
  type: "simple-line",  //线符号类型(一般为SimpleLineSymbol, TextSymbol, CIMSymbol)
  color: [226, 119, 40],
  width: 2  //线宽
}
const polylineGraphic = new Graphic({
  geometry: polyline,
  symbol: simpleLineSymbol
})
graphicsLayer.add(polylineGraphic)

---

5. 添加多边形图形

一个多边形图形是由一个多边形和一个填充符号来创建的。一个多边形由一个点序列（环形）所描述的封闭边界和一个空间参考来定义，而一个填充符号由填充颜色和轮廓来定义。

// 添加多边形
const polygon = {
  type: "polygon",
  rings: [  //外多边形环坐标应按顺时针顺序添加，而内环坐标（岛）应按逆时针顺序添加
      [-118.818984489994, 34.0137559967283],
      [-118.806796597377, 34.0215816298725],
      [-118.791432890735, 34.0163883241613],
      [-118.79596686535, 34.008564864635],
      [-118.808558110679, 34.0035027131376]
  ]
}
const simpleFillSymbol = {  //多边形符号设置
  type: "simple-fill",  //面符号类型(一般为SimpleFillSymbol、PictureFillSymbol、SimpleMarkerSymbol 和 TextSymbol等)
  color: [227, 139, 79, 0.8],  //面颜色与透明度
  outline: {  //轮廓设置
      color: [255, 255, 255],
      width: 1
  }
}
const polygonGraphic = new Graphic({
  geometry: polygon,
  symbol: simpleFillSymbol,
})
graphicsLayer.add(polygonGraphic)

6. 创建一个弹出窗口

你可以为添加的点线面图形添加一个弹出窗口。弹出窗口使用attribute和popupTemplate属性。

// 添加多边形
const polygon = {
  type: "polygon",
  rings: [  //外多边形环坐标应按顺时针顺序添加，而内环坐标（岛）应按逆时针顺序添加
      [-118.818984489994, 34.0137559967283],
      [-118.806796597377, 34.0215816298725],
      [-118.791432890735, 34.0163883241613],
      [-118.79596686535, 34.008564864635],
      [-118.808558110679, 34.0035027131376]
  ]
}
const simpleFillSymbol = {  //多边形符号设置
  type: "simple-fill",  //面符号类型(一般为SimpleFillSymbol、PictureFillSymbol、SimpleMarkerSymbol 和 TextSymbol等)
  color: [227, 139, 79, 0.8],  //面颜色与透明度
  outline: {  //轮廓设置
      color: [255, 255, 255],
      width: 1
  }
}
// 添加弹出窗口
const popupTemplate = {
  title: "{Name}",
  content: "{Description}"
}
const attributes = {
  Name: "图形",
  Description: "这是一个多边形"
}

const polygonGraphic = new Graphic({
  geometry: polygon,
  symbol: simpleFillSymbol,

  attributes: attributes,
  popupTemplate: popupTemplate
})
graphicsLayer.add(polygonGraphic)

参考例子

示例图

代码如下（示例）：

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

<script>
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import esriConfig from "@arcgis/core/config";

import Graphic from "@arcgis/core/Graphic";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";

  export default {
    name: 'MapDisplay',
    data() {
      return {
        map: null,
        mapView: null,
        graphicsLayer: null,  //图形图层
      }
    },
    methods: {
      initMap(){
        esriConfig.apiKey = '你的ApiKey'
        // 创建地图
        this.map = new Map({
          basemap: "arcgis-topographic" // 底图图层
        })

        // 创建地图视图
        this.view = new MapView({
          map: this.map,
          center: [-118.805, 34.027], // 地图中心点经纬度
          zoom: 13, // 缩放等级
          container: "viewDiv" // 地图容器id
        })
      },
      createGraphic(){
        // 创建图形图层
        this.graphicsLayer = new GraphicsLayer()
        this.map.add(this.graphicsLayer)  // 添加图层至地图中

        // 添加点
        const point = { //点设置
          type: "point",  //类型：点、线、面
          longitude: -118.80657463861,  //经度
          latitude: 34.0005930608889  //纬度
        }
        const simpleMarkerSymbol = {  //点符号设置
          type: "simple-marker",  //点符号类型(一般为SimpleMarkerSymbol, PictureMarkerSymbol 和 TextSymbol等)
          color: [226, 119, 40],  //符号颜色
          outline: {  //轮廓设置
              color: [255, 255, 255], //轮廓颜色
              width: 1  //轮廓宽度
          }
        }
        const pointGraphic = new Graphic({
          geometry: point,
          symbol: simpleMarkerSymbol
        })
        this.graphicsLayer.add(pointGraphic)

        // 添加线
        const polyline = {
          type: "polyline",
          paths: [
              [-118.821527826096, 34.0139576938577],
              [-118.814893761649, 34.0080602407843],
              [-118.808878330345, 34.0016642996246]
          ]
        }
        const simpleLineSymbol = {  //线符号设置
          type: "simple-line",  //线符号类型(一般为SimpleLineSymbol, TextSymbol, CIMSymbol)
          color: [226, 119, 40],
          width: 2  //线宽
        }
        const polylineGraphic = new Graphic({
          geometry: polyline,
          symbol: simpleLineSymbol
        })
        this.graphicsLayer.add(polylineGraphic)

        // 添加多边形
        const polygon = {
          type: "polygon",
          rings: [  //外多边形环坐标应按顺时针顺序添加，而内环坐标（岛）应按逆时针顺序添加
              [-118.818984489994, 34.0137559967283],
              [-118.806796597377, 34.0215816298725],
              [-118.791432890735, 34.0163883241613],
              [-118.79596686535, 34.008564864635],
              [-118.808558110679, 34.0035027131376]
          ]
        }
        const simpleFillSymbol = {  //多边形符号设置
          type: "simple-fill",  //面符号类型(一般为SimpleFillSymbol、PictureFillSymbol、SimpleMarkerSymbol 和 TextSymbol等)
          color: [227, 139, 79, 0.8],  //面颜色与透明度
          outline: {  //轮廓设置
              color: [255, 255, 255],
              width: 1
          }
        }
        // 添加弹出窗口
        const popupTemplate = {
          title: "{Name}",
          content: "{Description}"
        }
        const attributes = {
          Name: "图形",
          Description: "这是一个多边形"
        }
        const polygonGraphic = new Graphic({
          geometry: polygon,
          symbol: simpleFillSymbol,

          attributes: attributes,
          popupTemplate: popupTemplate
        })
        this.graphicsLayer.add(polygonGraphic)
      },
    },
    mounted() {
      this.initMap()
      this.createGraphic()
    },
  }
</script>

<style scoped>
@import "https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/dark/main.css";
#viewDiv{
  height: 80vh;
  width: 100%;
}
</style>