Quick Links | API Reference | ArcGIS API for JavaScript 4.24 | ArcGIS Developers
biubu/arcgis-vue: 用esri-loader 结合vue开发arcgis,欢迎fork,欢迎 issue,欢迎star; (github.com)
1. 获取API
// CDN
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
npm install --save esri-loader
// yarn add esri-loader
2. 地图Map
Map类包含用于存储，管理和覆盖2D和3D查看共同的图层的属性和方法。
- 可以在地图上添加或删除图层，但可以通过MapView（用于以2D方式查看数据）或SceneView（用于以3D方式查看数据）进行渲染。
- 因此，地图实例是保存图层的简单容器，而视图是显示地图的图层和底图并与之交互的方法。
- 单个地图可能被多个视图引用。
- 由于同一应用程序中的多个视图可以访问一个地图，因此所有与地图图层的用户交互都在View而不是Map上进行。
- Map的实例是MapView和SceneView的基本组成部分。应该在视图之前创建Map对象，以便可以将其传递到该map视图的属性中（例如MapView.map，SceneView.map）。
// 加载Map和MapView模块
import { loadModules } from 'esri-loader';
// this will lazy load the ArcGIS API
loadModules(['esri/views/MapView', 'esri/Map'])
.then(([MapView, map]) => {
// then we load a map from an id
var map = new Map({
basemap: "streets",
});
// and we show that map in a container w/ id #viewDiv
var view = new MapView({
map: map,
container: 'viewDiv'
});
})
.catch(err => {
// handle any errors
console.error(err);
});
2.1 basemap 底图
指定地图的底图。底图是一组平铺图层，这些图层将地理上下文提供给MapView或SceneView以及地图中的其他操作图层。
- 该值可以是底图的实例，也可以是下表中列出的字符串之一。
- 底图类型：topo，streets，satellite，hybrid，dark-gray，gray，national-geographic，oceans，osm，terrain，dark-gray-vector，gray-vector，streets-vector，streets-night-vector，streets-navigation-vector，topo-vector，streets-relief-vector
2.2 layers 图层
操作层的集合。
- 此属性仅包含交互式操作层，如FeatureLayers、WebTileLayers和GraphicsLayers，这些层可以查询、分配不同的呈现程序、分析等等。它不包括basemap底图。
- 层是一个或多个代表真实世界现象的特性或图形的集合。每个特性都包含一个符号和地理数据，允许在地图上以带有空间上下文的图形的形式呈现。
- 层内的特性还可以包含数据属性，这些属性提供了可以在弹出窗口中查看并用于呈现层的附加信息。
- 可以使用add()或addMany()方法在构造函数中添加层，也可以直接使用add()或addMany()将层添加到Layers集合中。
// 使用数组在Map的构造函数中添加层
var fl = new FeatureLayer(url);
var gl = new GraphicsLayer();
var map = new Map({
layers: [fl, gl]
});
// 使用addMany()添加层
map.addMany([fl, gl]);
// 使用图层集合添加图层
map.layers.add(gl);
//使用图层集合的push方法添加图层
map.layers.push(fl, gl);
- 一个层只能被添加到一个父层。不可能将同一层添加到多个地图或grouplayer中。如果您尝试这样做，该层将自动从其当前父层中删除并放置到新父层中。
- 移除图层方法remove()，removeAll()，removeMany([])
2.3 findLayerById(layerId) 通过id找到图层
返回一个基于给定层id的层。
let geoJsonLayer = map.findLayerById("layer-3");
3.视图View
视图提供了查看地图组件并与之交互的方法。
- 地图仅仅是一个容器，用来存储包含在基础层和操作层中的地理信息。视图呈现地图及其各个层，使用户可以看到它们。
- 视图有两种类型:MapView和SceneView。MapView以2D方式呈现地图及其图层。SceneView将这些元素呈现为3D。
- View是MapView和SceneView的基类，没有构造函数。要创建视图，您必须直接创建MapView或SceneView的实例。
view.on("click", function(event){
// 事件是事件触发后返回的事件句柄。
console.log(event.mapPoint);
});
3.1 watch视图监听
watch方法可以监听视图的updating更新，zoom缩放等变化。
//监听视图更新//监听视图缩放
view.watch("updating", (value) => {
if(value){
console.log("视图更新中");
}else{
console.log("视图更新完成")
}
});
view.watch("zoom", (zoom)=>{
console.log(zoom);
});
3.2 graphics
允许直接向视图中的默认图形添加图形。
// 向视图添加图形
view.graphics.add(pointGraphic);
// 从视图中删除图形
view.graphics.remove(pointGraphic);
3.3 layerViews
一个集合，包含映射中操作层的所有已创建的层视图的层次列表。
view.layerViews.items.forEach(item=>{
//循环打印图层
console.log(item)
})
3.4 popup
一个弹出对象，显示地图层的一般内容或属性。
- 视图有一个预定义样式的默认弹出实例和一个用于定义内容的模板。默认情况下的内容可以直接在弹出窗口的内容或在一个层的弹出模板中修改。
- 可以创建一个新的弹出实例，并将其设置为此属性，以定制弹出的样式、定位和内容，以便使用视图上的默认弹出实例。
3.5 destroy()
销毁视图和任何相关资源。视图一旦被销毁，就不能再使用了。
view.destroy();
4.示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ArcGis</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/3.24/esri/css/esri.css"
/>
<script src="https://js.arcgis.com/3.24/"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#addbtn {
position: absolute;
z-index: 999;
top: 20px;
left: 100px;
}
</style>
<script>
require([
"esri/map",
"esri/SpatialReference",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/tasks/FeatureSet",
"esri/graphic",
"dojo/domReady!",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"esri/graphic",
"esri/layers/GraphicsLayer"
], function(
Map,
SpatialReference,
FeatureLayer,
Point,
FeatureSet,
Graphic,
Color,
SimpleMarkerSymbol,
Graphic,
GraphicsLayer
) {
var map = new Map("map", {
basemap: "osm",
center: [106.853, 39.687],
zoom: 3
});
function addPointGraphicsLayer(a) {
//png符号
var symbol1 = {
type: "esriPMS",
url:
"https://zhengxin-pub.bj.bcebos.com/financepic/96e86e450404f7e40c11f70d5e358af7_fullsize.jpg", //图片位置 真正点的坐标在图片中心点，如果要将图片上移，yoffset为正，右移 xoffset为正
width: 15, //当前图片宽度
height: 17, //当前图片高度
xoffset: 0,
yoffset: 0
};
//gif符号
var symbogif = {
type: "esriPMS",
url: "../../examples/assets/images/warn.gif", //图片位置 真正点的坐标在图片中心点，如果要将图片上移，yoffset为正，右移 xoffset为正
width: 30, //当前图片宽度
height: 30, //当前图片高度
xoffset: 0,
yoffset: 0
};
var symbol;
if (a == 1) {
symbol = symbol1;
} else symbol = symbogif;
var pointjson = [
//以下为数组，这里只写了一个。
{
geometry: {
x: 116.31075939030517,
y: 40.04059194613418, //经纬度
spatialReference: { wkid: 4326 }
},
attributes: {
Name: "",
Address: ""
},
symbol: symbol,
infoTemplate: {
//点击该点显示的信息窗口内容
title: "企业信息",
content: "名称: ${Name} <br/>地址: ${Address}"
}
}
];
var graphic = new Graphic("企业", null, pointjson, null, true);
map.addLayer(graphic);
// addGraphic("企业", null, pointjson, null, true);
}
// 地图加载完成后执行函数
map.on("load", () => {
console.log("load");
addPointGraphicsLayer(1);
// addPolyline();
// addPolygon();
});
});
</script>
</head>
<body>
<div id="map">
<button id="addbtn"></button>
</div>
</body>
</html>
// var featureLayer = new FeatureLayer(featureCollection, { //添加要素图层 第一个参数是图层信息，第二个参数是图层参数，id：图层名；outFields：输出字段；infoTemplate：弹出提示模板json格式，内容为html
// id: "featureLayer_polygon",
// infoTemplate: { // 点击弹框配置
// title: '123',
// content: 'FID值为: ${FID}<br>' // 此处值为featuresJson 定义的FID值
// },
// });
// map.addLayer(featureLayer);
//叠加线图层
function addPolyline() {
var Polyline = [ { //线图层的数据 geometry: { //必填，构成线的结点坐标，根据结点顺序绘制线，所以一定要注意点顺序 paths: [ [ [-29787466.330565456, 4060315.5557630984],
[-28495986.30065946, 4060315.5557630984],
[-28427498.72331596, 4422321.321721597],
[-28114412.655459963, 3991827.978419599],
[-27654567.493296463, 4079883.4350040983],
[-27546944.157470964, 3933124.3406965993]
]
],
spatialReference: { wkid: 102100 } //可选，坐标系
},
attributes: {
//属性字段，根据实际情况添加属性字段
ObjectID: 1,
Name: "线"
},
symbol: {
//必选，线符号
width: 3, //可选，线的宽度，默认为1
style: "esriSLSSolid", //可选，线样式默认为esriSLSSolid，实线
type: "esriSLS", //必选，边线类型，此处是指线
color: [255, 255, 255] //必选，线的颜色
}
}
];
var graphic = new Graphic(Polyline);
map.graphics.add(graphic);
}
//叠加面图层
function addPolygon() {
//面图层的数据
var polygon = [ { geometry: { //必填，构成面的结点坐标，根据结点顺序绘制面，所以一定要注意点顺序 rings: [ [ [-26852284.444415465, 3541766.7558766007],
[-27380617.183922466, 2847107.0428211037],
[-28280739.62900846, 2475317.3372421055],
[-28642745.39496696, 2954730.3786466033],
[-29092806.617509957, 3385223.721948602],
[-28946047.523202457, 3629822.2124611004],
[-28280739.62900846, 3893988.5822145995],
[-27742622.94988096, 3688525.8501841],
[-27615431.734814465, 3884204.6425940995],
[-27400185.063163463, 3688525.8501841],
[-26852284.444415465, 3541766.7558766007]
]
],
spatialReference: { wkid: 102100 } //坐标系
},
attributes: {
OBJECTID: 1,
name: "面1"
},
symbol: {
//可选，默认渲染符号，即不在渲染区间的值使用此符号
color: [255, 165, 0, 200], //必选，符号颜色
outline: {
//可选，符号边线设置
color: [255, 0, 0], //必选，边线颜色
width: 1, //必选，边线宽度
type: "esriSLS"
// "style": "esriSLSNull"//可选，边线样式,当前设置时不显示边线，默认为：esriSFSSolid，显示边线
},
type: "esriSFS", //必选，符号类型，此处是指面符号，点符号为："esriSMS"
style: "esriSFSSolid" //必选，填充样式
},
infoTemplate: {
//点击该面显示的信息窗口内容
title: "面信息",
content: "OBJECTID: ${OBJECTID}"
}
},
{
geometry: {
type: "polygon",
rings: [
[
[-30472024.28830262, 5253956.189464113],
[-29532766.08473462, 5058277.397054112],
[-29571901.843216617, 4666919.812234111],
[-29963259.42803662, 3923340.40107611],
[-30628567.32223062, 4353833.74437811],
[-30472024.28830262, 5253956.189464113]
]
],
spatialReference: { wkid: 102100 }
},
attributes: {
OBJECTID: 2,
name: "面2"
},
symbol: {
//可选，默认渲染符号，即不在渲染区间的值使用此符号
color: [255, 69, 0, 200], //必选，符号颜色
outline: {
//可选，符号边线设置
color: [139, 26, 26], //必选，边线颜色
width: 1.5, //必选，边线宽度
type: "esriSLS" //必选，边线类型，此处是指线
// "style": "esriSFSSolid"//可选，边线样式
},
type: "esriSFS", //必选，符号类型，此处是指面符号，点符号为："esriSMS"
style: "esriSFSSolid" //必选，符号样式
},
infoTemplate: {
//点击该面显示的信息窗口内容
title: "面信息",
content: "OBJECTID: ${OBJECTID} <br/>"
}
}
];
var graphic = new Graphic(polygon);
map.graphics.add(graphic);
}
