大家好,给大家分享一下javascript开发app教程,很多人还不知道这一点。下面详细解释一下。现在让我们来看看!
开发arcgis主要步骤:
获取API——选择地图——添加图层——更改样式——配置弹出窗口——保存地图
获取api的方式:https://developers.arcgis.com/java/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">
< src="https://js.arcgis.com/4.13/"></>
<style>
#viewDiv{
padding: 0;
margin: 0;
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<>
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);
});
</>
</body>
</html>
常用API(针对引入api后的function部分代码)
1. esri
- esri/Map(地图)
底图模式:https://developers.arcgis.com/java/latest/api-reference/esri-Map.html
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:“点的数组”