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. 创建一个弹出窗口参考例子前言提示:这里可以添加本文要记录
系列文章目录
【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 服务所必需的。
- 转到你的开发人员仪表板以获取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 "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>
更多推荐
所有评论(0)