| ArcGIS API for JS 4.x + Vue 【1】 | 您所在的位置：网站首页 › arcgis新增面 › ArcGIS API for JS 4.x + Vue 【1】 |
ArcGIS API for JS 4.x + Vue 【1】
|
系列文章目录
【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 "https://js.arcgis.com/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 }) 参考例子示例图： 代码如下（示例）： 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() }, } @import "https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/dark/main.css"; #viewDiv{ height: 80vh; width: 100%; } 二、添加点、线和多边形 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) 参考例子示例图 代码如下（示例）： 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() }, } @import "https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/dark/main.css"; #viewDiv{ height: 80vh; width: 100%; } |
【本文地址】
公司简介
联系我们