系列文章目录
【1】 ArcGIS API for JS 4.x + Vue 之 显示地图和添加点线面
文章目录
系列文章目录前言一、显示地图安装依赖1. 添加模块2. 引入CSS样式3. 获取密钥4. 创建地图5. 创建地图视图参考例子二、添加点、线和多边形1. 添加模块2. 添加图形图层3. 添加点图形4. 添加线图形5. 添加多边形图形6. 创建一个弹出窗口参考例子前言
提示：这里可以添加本文要记录的大概内容：
本文介绍的是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 "/4.22/@arcgis/core/assets/esri/themes/dark/main.css";
若要在本地导入样式可查看官方文档。
3. 获取密钥
一个API 密钥是访问ArcGIS 服务所必需的。
转到你的开发人员仪表板以获取API 密钥.复制密钥，因为它将在下一步中使用。
若没有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 "/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 "/4.22/@arcgis/core/assets/esri/themes/dark/main.css";#viewDiv{height: 80vh;width: 100%;}</style>
