当前位置：首页 > news >正文

ArcGIS API for JavaScript 3.44 地图Demo示例合集

news 文章来源：https://blog.csdn.net/weixin_45532870/article/details/132146368 2025/2/8 20:51:17

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 Map</title><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/1JVo6Wdcenter: [-122.45, 37.75], // longitude, latitudezoom: 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 gallery</title><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 mapsvar 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 editingvar bookmarks = new Bookmarks({map: map,bookmarks: [],editable: true}, "bookmarks");// Bookmark data objectsvar 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 widgetObject.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 Extent</title><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 Dijit</title>
<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 idarcgisUtils.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 Tool</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 {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 applicationsesriConfig.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 Macvar 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>CTRL</b> 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 Map</title><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 scalebar</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 { 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 kilometersscalebarUnit: "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>FeatureLayer</title><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 Symbols</title><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 examplesvar 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.pngvar 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 buttonon(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 usevar 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 graphic</div><button id="Point">Point</button><button id="Multipoint">Multipoint</button><button id="Line">Line</button><button id="Polyline">Polyline</button><button id="FreehandPolyline">Freehand Polyline</button><button id="Triangle">Triangle</button><button id="Extent">Rectangle</button><button id="Circle">Circle</button><button id="Ellipse">Ellipse</button><button id="Polygon">Polygon</button><button id="FreehandPolygon">Freehand Polygon</button></div><div id="mapDiv"></div></body>
</html>

注明：翻译自esri，仅供个人查阅使用，侵删