开发arcgis主要步骤：
获取API——选择地图——添加图层——更改样式——配置弹出窗口——保存地图
获取api的方式：https://developers.arcgis.com/javascript/latest/guide/get-api/（可以先使用CDN方法进行引入练习）
//最简单的操作代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.13/"></script>
<style>
#viewDiv{
padding: 0;
margin: 0;
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<script>
require([ //加载所需要的模块（API）
"esri/Map",
"esri/views/MapView",
// 选择或者切换底图模块
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery",
//添加图层模块
"esri/layers/FeatureLayer",
], function(Map, MapView, BasemapToggle, BasemapGallery,FeatureLayer) {//引入
var map = new Map({//新建底图
basemap: "topo-vector",//底图的值，不同值底图模式不同
// ground: "world-elevation" // 3D图
});
var view = new MapView({//地图配置
container: "viewDiv",//dom节点
map: map,
center: [-118.80500, 34.02700], // 中心点
zoom: 13 // 缩放比例
});
// 切换底图
var basemap = new BasemapToggle({
view: view,
nextBasemap: "satellite" //底图的值
});
view.ui.add(basemap, "bottom-right");
// 添加全部底图组进行选择
var basemapGallery = new BasemapGallery({
view: view,
source: {
portal: {
url: "https://www.arcgis.com",
useVectorBasemaps: true // Load vector tile basemaps
}
}
});
view.ui.add(basemapGallery, "top-right");
// 弹窗配置
var popupTrailheads = {
"title": "{TRL_NAME}",
"content": "<b>City:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft"
}
// 图层配置
var trailheads = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0",
outFields: ["TRL_NAME","CITY_JUR","X_STREET","PARKING","ELEV_FT"],
popupTemplate: popupTrailheads
});
map.add(trailheads);
});
</script>
</body>
</html>
常用API（针对引入api后的function部分代码）
1. esri
var myMap = new Map({
basemap: 'streets'
});
- esri/Basemap（底图）
//创建自定义底图：
var basemap = new Basemap({
baseLayers: [
new MapImageLayer({ //
url: "服务器地图地址",
title: "Basemap"
})
],
title: "basemap",
id: "basemap"
});
var map = new Map({
basemap: basemap
});
- esri/geometry（几何）
可以使用模块形式导入（详情见下方geometry模块）
import { Point, Polygon, Polyline } from "esri/geometry";
- esri/Graphic（图形化）
现实世界地理现象的矢量表示。可以包含几何图形，符号和属性。图形显示在GraphicsLaye中r（esri/layers/GraphicsLayer 见下方图层详情）。
var polyline = { //一条线
type: "polyline",
paths: [
[-111.30, 52.68],
[-98, 49.5],
[-93.94, 29.89]
]
};
var polylineSymbol = { //一个图形
type: "simple-line",
color: [226, 119, 40],
width: 4
};
var polylineAtt = {
Name: "Keystone Pipeline",
Owner: "TransCanada"
};
//四大属性：
var polylineGraphic = new Graphic({
geometry: polyline, //在实际坐标中定义图形的几何形状或位置。
symbol: polylineSymbol , // 定义如何在视图中呈现的图形。
attributes: polylineAtt , // 字段的名称/值对以及与图形关联的字段值。
popupTemplate: { //允许用户在弹出窗口中访问图形的属性。
title: "{Name}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "Name"
},
{
fieldName: "Owner"
},
{
fieldName: "Length"
}
]
}
]
}
});
//添加图形。view是MapView实例
view.graphics.add(polylineGraphic);
- esri/PopupTemplate（弹出层）
定义特定Layer或Graphic的Popup的内容
var popupTrailheads = {
"title": "{TRL_NAME}", //标题
//HTML表示形式。语法{fieldName}或{expression/expressionName}执行参数替换
"content": "<b>City:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft"
}
2.视图（esri/views）
- esri/views/MapView （显示Map实例的2D视图）
var view = new MapView({
map: myMap, // Map实例
container: "viewDiv" ,// DOM元素
center :["中心"，"坐标"],
zoom:"缩放比例",
});
view.when(function(){ //执行仅在加载地图后才能运行的过程
// 地图视图和地图中的所有资源都已加载
}, function(error){
// 当视图加载不正确时
console.log("The view's resources failed to load: ", error);
});
3.图层（esri/layers）
- esri/layers/FeatureLayer（从地图服务或要素服务创建的单个图层）
const layer = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0" //层，非空间表或服务的REST端点的URL。
outFields :[服务中要包含在每个功能中的一组字段名称。]
});
- esri/layers/BaseDynamicLayer（创建动态地图图层）
动态层显示基于请求（包括图像的范围和大小）在服务器上动态生成的图像
var MyCustomDynamicLayer = BaseDynamicLayer.createSubclass({ // 创建图层
properties: {
getMapUrl: null, //指定WMS服务的URL
getMapParameters: null //指定从服务器获取图像时将使用的查询参数
},
getImageUrl: function (extent, width, height) { //获取图片地址
var urlVariables = this._prepareQuery(this.getMapParameters, extent, width, height);
var queryString = this._joinUrlVariables(urlVariables);
return this.getMapUrl + "?" + queryString;
},
});
// 属性表：
maxScale/minScale : 图层在视图中可见的最大比例尺（最大缩放比例）/最小
refreshInterval：刷新间隔
//方法表：
fetchImage（）：此方法获取指定范围和大小的图像
getImageUrl（）：
- esri/layers/TileLayer（从缓存访问图块，而不是动态渲染图像）
require(["esri/layers/TileLayer"], function(TileLayer) {
var layer = new TileLayer({
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
});
});
- esri/layers/GraphicsLayer（包含一个或多个客户端Graphics）
每个图形都呈现在SceneView或MapView内部的LayerView中。
require(["esri/layers/GraphicsLayer", "esri/Graphic"], function(GraphicsLayer, Graphic){
var graphicA = new Graphic({
geometry: new Polyline({...}),
symbol: new SimpleLineSymbol({...})
});
var graphicB = new Graphic({
geometry: new Point({...}),
symbol: new SimpleMarkerSymbol({...})
});
var graphicC = new Graphic({
geometry: new Polygon({...}),
symbol: new SimpleFillSymbol({...})
});
var graphicD = new Graphic();
var graphicE = new Graphic();
var layer = new GraphicsLayer({
graphics: [graphicA],
});
layer.graphics.add(graphicB);
layer.add(graphicC);
layer.addMany([graphicD, graphicE]);
map.add(layer);
});
属性表：
levationInfo：指定如何在垂直轴（z）上放置图形。
graphics：图层中的图形集合。
loaded：指示图层实例是否已加载。
方法表：
add() / addMany()：将图形/ 图形数组添加到图层
remove() / removeAll() / removeMany()：从图层中删除图形。
事件：
layer.on("layerview-create", function(event){ //layerview-create-error，layerview-destroy
event.layerView;
});
- esri/layers/ImageryLayer（将图像服务资源表示为一层）
var layer = new ImageryLayer({
url: "https://landsat2.arcgis.com/arcgis/rest/services/Landsat8_Views/ImageServer"
});
4. 符号（esri/symbols）
- esri/symbols/Symbol （所有符号的基类）
属性：
type（类型）:" simple-marker | picture-marker | simple-line | simple-fill | picture-fill | text | shield-label-symbol ",
color:"颜色",
// 以简单的形状和颜色渲染 点。
var symbol = {
type: "simple-marker",
style: "square",//符号类型
color: "blue",
size: "8px", // 大小
outline: { // 标记符号的轮廓
color: [ 255, 255, 0 ],
width: 3
};
//使用图像渲染点图形
var symbol = {
type: "picture-marker",
url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
width: "64px",//宽
height: "64px"//高
};
注意：
符号的高度和宽度限制为不超过200像素。
IE11不支持渲染SVG文档。
SVG文档必须包含宽度和高度的定义，才能在Firefox中正确加载。
不支持动画的gif / png图像
// 渲染折线几何
var symbol = {
type: "simple-line",
color: "lightblue",
width: "2px",
style: "short-dot" //线条类型，下方有图
};
// 渲染2D多边形
var symbol = {
type: "simple-fill",
color: [ 51,51, 204, 0.9 ],
style: "solid",
outline: {
color: "white",
width: 1
}
};
// 用于定义图形，可以更改标签图形的color，font，halo和其他属性
var textSymbol = {
type: "text",
color: "white",
haloColor: "black", //文字符号光晕的颜色。
haloSize: "1px", //文字符号光环的大小。
text: "You are here",
xoffset: 3, //x轴偏移量
yoffset: 3, //y轴偏移量
font: { // 字体信息
size: 12,
family: "Josefin Slab",
weight: "bold"
}
};
5. 几何图形（esri/geometry）
- esri/geometry/Geometry（几何）
主要体现在 Point，Polyline或Polygon （点线面）。
属性：
type（类型）："point（点）"|"multipoint（多点）"|"polyline（折线）"|"polygon（多边形）"|"extent"|"mesh"，
extent：“几何图形的范围”，
//点的常见属性
latitude：“（点纬度）”，
longitude：“（点经度）”，
//线的常见属性
paths：“组成折线的路径或线段的数组”，
//面的常见属性
rings：“点的数组”
1393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
