ArcGIS API for JavaScript 3.44 地图Demo示例合集
ArcGIS API for JavaScript 3.44 demo合集
- （一）创建地图
- （二）基准图库
- （三）编辑书签
- （四）主页按钮
- （五）LayerList小部件
- （六）测量小工具
- （七）概览图
- （八）比例尺
- （九）要素图层（基本）
- （十）向地图添加图形
用于JavaScript的ArcGIS API是在web应用程序中嵌入地图和任务的轻量级方法。您可以从ArcGIS Online、您自己的ArcGIS Server或其他服务器获取这些地图。
（一）创建地图
描述
此示例演示如何创建一个完整的页面映射应用程序。此示例创建一个以旧金山市为中心的新地图，并将其中一个预定义的基本地图添加到地图中。
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Maptitle>
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
style>
<script src="https://js.arcgis.com/3.44/">script>
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
basemap: "topo-vector", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
});
script>
head>
<body>
<div id="map">div>
body>
html>
（二）基准图库
描述
使用BasemapGallery小部件可以选择地图的基础地图。这个小部件提供了一个基本地图库，这些地图可以由用户定义，也可以由ArcGIS.com的查询生成。
您可以向库中添加其他基础地图，但是添加到基础地图库中的所有基础地图必须位于同一投影中。如果您正在通过设置从ArcGIS.com显示棒球地图
showArcGISBasemaps = true
那么附加的基本地图必须在Web-Mercator投影中
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Basemap gallerytitle>
<link rel="stylesheet" href="https://js.arcgis.com/3.44/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{
padding:0;
}
style>
<script src="https://js.arcgis.com/3.44/">script>
<script>
var map;
require([
"esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
"dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
"dojo/domReady!"
], function(
Map, BasemapGallery, arcgisUtils,
parser
) {
parser.parse();
map = new Map("map", {
basemap: "topo-vector",
center: [-105.255, 40.022],
zoom: 13
});
//add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
});
script>
head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%;height:100%;margin:0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="padding:0;">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap', open:true">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery">div>
div>
div>
div>
div>
div>
body>
html>
（三）编辑书签
描述
书签小部件可以配置为允许用户创建、更新和删除书签。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Bookmark Widget (Editable)title>
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/themes/calcite/esri/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
.bookmark-container {
position: absolute;
top: 100px;
left: 15px;
padding: 1rem;
background: #ffffff;
border-radius: 4px;
border: 1px solid #eeeeee;
}
style>
<script src="https://js.arcgis.com/3.44/">script>
<script>
require([
"esri/map",
"esri/dijit/Bookmarks",
"dojo/domReady!"
],
function (Map, Bookmarks){
var map = new Map("map", {
basemap: "topo-vector",
center: [-100, 40],
zoom: 4
});
// Create the bookmark widget
// specify "editable" as true to enable editing
var bookmarks = new Bookmarks({
map: map,
bookmarks: [],
editable: true
}, "bookmarks");
// Bookmark data objects
var bookmarkJSON = {
first: {
"extent": {
"xmin": -12975100,
"ymin": 3993900,
"xmax": -12964100,
"ymax": 4019500,
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
}
},
"name": "Palm Springs, CA"
},
second: {
"extent": {
"xmin": -13052100,
"ymin": 4024900,
"xmax": -13041100,
"ymax": 4050500,
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
}
},
"name": "Redlands, California"
},
third: {
"extent": {
"xmin": -13048800,
"ymin": 3844800,
"xmax": -13037800,
"ymax": 3870400,
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
}
},
"name": "San Diego, CA"
},
};
// Add bookmarks to the widget
Object.keys(bookmarkJSON).forEach(function (bookmark){
bookmarks.addBookmark(bookmarkJSON[bookmark]);
});
});
script>
head>
<body class="calcite">
<div id="map">div>
<div class="bookmark-container">
<div id="bookmarks">div>
div>
body>
html>
（四）主页按钮
描述
使用HomeButton小部件快速返回到地图的默认起始范围。创建小部件时，开发人员指定一个将用作“主扩展区”的扩展区。当用户在地图上平移和缩放时，他们可以单击主页按钮返回到指定的起始范围。
DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Home Extenttitle>
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/css/esri.css">
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
style>
<script src="https://js.arcgis.com/3.44/">script>
<script>
require([
"esri/map",
"esri/dijit/HomeButton",
"dojo/domReady!"
], function(
Map, HomeButton
) {
var map = new Map("map", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets-vector"
});
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
});
script>
head>
<body>
<div id="map" class="map">
<div id="HomeButton">div>
div>
body>
html>
（五）LayerList小部件
描述
此示例演示如何创建用于切换可见性的简单LayerList。在这个特定的示例中，小部件包含在一个侧面板中。该小部件使用ArcGIS Onlineweb地图中的图层。
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Layer List Dijittitle>
<link rel="stylesheet" href="https://js.arcgis.com/3.44/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/css/esri.css">
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#map {
padding:0;
}
#layerListPane{
width:25%;
}
.esriLayer{
background-color: #fff;
}
.esriLayerList .esriList{
border-top:none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom:none;
}
.esriLayerList .esriList ul{
background-color: #fff;
}
style>
<script>var dojoConfig = { parseOnLoad: true };script>
<script src="https://js.arcgis.com/3.44/">script>
<script>
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
arcgisUtils,
LayerList
) {
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f1027161650b4741a2482df6e975908c", "map").then(function(response){
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
},"layerList");
myWidget.startup();
});
});
script>
head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList">div>
div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">div>
div>
body>
html>
（六）测量小工具
描述
此示例显示如何将Measurement小部件添加到应用程序中。2.3版新增的Measurement小部件提供了用于确定x、y位置以及测量区域和距离的工具。此示例显示如何创建新的Measurement小部件并将其与地图关联。
（可选）您可以定义自定义线和点符号，测量小部件在地图上绘制时将使用该符号。启用捕捉后，测量工具将执行此操作并捕捉到地图中的要素。
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Measure Tooltitle>
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/themes/calcite/esri/esri.css">
<style>
html,body {
height:100%;
width:100%;
margin:0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family:"Trebuchet MS";
}
#map {
border:solid 2px #808775;
border-radius:4px;
margin:5px;
padding:0px;
}
#titlePane{
width:280px;
}
style>
<script src="https://js.arcgis.com/3.44/">script>
<script>
var map;
require([
"dojo/dom",
"esri/Color",
"dojo/keys",
"dojo/parser",
"esri/config",
"esri/sniff",
"esri/map",
"esri/SnappingManager",
"esri/dijit/Measurement",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/tasks/GeometryService",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/Scalebar",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dijit/form/CheckBox",
"dojo/domReady!"
], function(
dom, Color, keys, parser,
esriConfig, has, Map, SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol
) {
parser.parse();
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "satellite",
center: [-117.447, 33.902],
zoom: 18
});
var sfs = new SimpleFillSymbol(
"solid",
new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),
null
);
var layerToSnapTo = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/PoolPermits/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
layerToSnapTo.setRenderer(new SimpleRenderer(sfs));
map.addLayers([layerToSnapTo]);
//dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac., but has wrong code for Chrome on Mac
var snapManager = map.enableSnapping({
snapKey: has("mac") ? keys.META : keys.CTRL
});
var layerInfos = [{
layer: layerToSnapTo
}];
snapManager.setLayerInfos(layerInfos);
var measurement = new Measurement({
map: map
}, dom.byId("measurementDiv"));
measurement.startup();
});
script>
head>
<body class="calcite">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"
style="width:100%; height:100%;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:false">
<div id="measurementDiv">div>
<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRLb> to enable snapping.span>
div>
div>
div>
div>
body>
html>
（七）概览图
描述
使用OverviewMap小部件在主地图的右上角显示一个小地图。
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Overview Maptitle>
<link rel="stylesheet" href="https://js.arcgis.com/3.44/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
style>
<script src="https://js.arcgis.com/3.44/">script>
<script>
var map;
require([
"esri/map", "esri/dijit/OverviewMap",
"dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function (
Map, OverviewMap,
parser
) {
parser.parse();
map = new Map("map", {
basemap: "satellite",
center: [-122.445, 37.752],
zoom: 14
});
var overviewMapDijit = new OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
});
script>
head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width: 100%; height: 100%; margin:0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="padding:0">
div>
div>
body>
html>
（八）比例尺
描述
此示例显示如何将比例尺添加到地图中。比例尺可以添加到地图或用户指定的位置。下面的代码显示了显示在地图左下角的默认比例尺。您可以通过将attachTo选项设置为以下值之一来修改比例尺的位置：右上角、右下角、上中心、下中心、左下角、左上角。
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Map with scalebartitle>
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/themes/calcite/esri/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{padding:0;}
style>
<script src="https://js.arcgis.com/3.44/">script>
<script>
var map;
require([
"esri/map", "esri/dijit/Scalebar",
"dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, Scalebar,
parser
) {
parser.parse();
map = new Map("map", {
basemap: "topo-vector",
center: [-116.093, 34.218],
zoom: 7
});
var scalebar = new Scalebar({
map: map,
// "dual" displays both miles and kilometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual"
});
});
script>
head>
<body class="calcite">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="overflow:hidden;">
div>
div>
body>
html>
（九）要素图层（基本）
描述
此示例演示如何将基本要素图层添加到地图中。FeatureLayer至少必须指向ArcGIS Server或ArcGIS Online上托管的有效要素服务，或者使用要素集合对象构建。要了解有关功能服务的更多信息，请阅读本文档。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayertitle>
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/css/esri.css">
<script src="https://js.arcgis.com/3.44/">script>
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
style>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"dojo/domReady!"
],
function(
Map,
FeatureLayer
) {
var map = new Map("map", {
basemap: "hybrid",
center: [-82.44109, 35.6122],
zoom: 17
});
/****************************************************************
* Add feature layer - A FeatureLayer at minimum should point
* to a URL to a feature service or point to a feature collection
* object.
***************************************************************/
// Carbon storage of trees in Warren Wilson College.
var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0");
map.addLayer(featureLayer);
});
script>
head>
<body>
<div id="map">div>
body>
html>
（十）向地图添加图形
描述
可以使用“绘制”工具栏在地图上绘制形状。
工具栏不是您在页面上自动看到的用户界面组件。相反，它是一个辅助类，可以用来让人们在地图上绘制几何图形。它省去了编写用于绘制每种几何图形类型的代码的工作量。您只需激活希望人们绘制的几何图形类型。在本例中，每个按钮都会激活不同的几何图形类型。
单击按钮时，工具栏将激活相应的工具。或者，您可以允许从下拉列表、一组单选按钮或其他控件中选择几何图形类型。
当工具栏的“draw-end”事件触发时，将调用一个函数，以确保在绘制完要素后在地图上看到某些内容。addGraphic函数为几何图形类型设置适当的符号。有关符号，请参阅API参考，以了解有关定义不同符号的更多信息。
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Shapes and Symbolstitle>
<link rel="stylesheet" href="https://js.arcgis.com/3.44/esri/css/esri.css">
<style>
#info {
top: 20px;
color: #444;
height: auto;
font-family: arial;
right: 20px;
margin: 5px;
padding: 10px;
position: absolute;
width: 115px;
z-index: 40;
border: solid 2px #666;
border-radius: 4px;
background-color: #fff;
}
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
button {
display: block;
}
style>
<script src="https://js.arcgis.com/3.44/">script>
<script>
var map, tb;
require([
"esri/map", "esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
"esri/graphic",
"esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
], function(
Map, Draw,
SimpleMarkerSymbol, SimpleLineSymbol,
PictureFillSymbol, CartographicLineSymbol,
Graphic,
Color, dom, on
) {
map = new Map("mapDiv", {
basemap: "topo-vector",
center: [-25.312, 34.307],
zoom: 2
});
map.on("load", initToolbar);
// markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
markerSymbol.setColor(new Color("#00FFFF"));
// lineSymbol used for freehand polyline, polyline and line.
var lineSymbol = new CartographicLineSymbol(
CartographicLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 10,
CartographicLineSymbol.CAP_ROUND,
CartographicLineSymbol.JOIN_MITER, 5
);
// fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
// the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
var fillSymbol = new PictureFillSymbol(
"images/mangrove.png",
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color('#000'),
1
),
42,
42
);
function initToolbar() {
tb = new Draw(map);
tb.on("draw-end", addGraphic);
// event delegation so a click handler is not
// needed for each individual button
on(dom.byId("info"), "click", function(evt) {
if ( evt.target.id === "info" ) {
return;
}
var tool = evt.target.id.toLowerCase();
map.disableMapNavigation();
tb.activate(tool);
});
}
function addGraphic(evt) {
//deactivate the toolbar and clear existing graphics
tb.deactivate();
map.enableMapNavigation();
// figure out which symbol to use
var symbol;
if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
symbol = markerSymbol;
} else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
symbol = lineSymbol;
}
else {
symbol = fillSymbol;
}
map.graphics.add(new Graphic(evt.geometry, symbol));
}
});
script>
head>
<body>
<div id="info">
<div>Select a shape then draw on map to add graphicdiv>
<button id="Point">Pointbutton>
<button id="Multipoint">Multipointbutton>
<button id="Line">Linebutton>
<button id="Polyline">Polylinebutton>
<button id="FreehandPolyline">Freehand Polylinebutton>
<button id="Triangle">Trianglebutton>
<button id="Extent">Rectanglebutton>
<button id="Circle">Circlebutton>
<button id="Ellipse">Ellipsebutton>
<button id="Polygon">Polygonbutton>
<button id="FreehandPolygon">Freehand Polygonbutton>
div>
<div id="mapDiv">div>
body>
html>
注明：翻译自esri，仅供个人查阅使用，侵删