ArcGIS.rar_ArcGISapiforJS_arcgis_arcgisforjs资源-CSDN下载

共1个文件

js：1个

版权申诉

201 浏览量 2022-09-23 03:13:23 上传评论收藏 5KB RAR 举报

《ArcGIS API for JavaScript开发详解》 ArcGIS是一款强大的地理信息系统（Geographic Information System），由Esri公司开发，广泛应用于地图制作、地理数据分析和空间决策支持。ArcGIS API for JavaScript是Esri为Web应用程序开发者提供的JavaScript库，允许开发者在网页上创建交互式地图和进行复杂的地理处理任务。一、ArcGIS API for JS核心概念 1. Map对象：Map对象是ArcGIS API的核心，它代表了Web页面中的地图视图。通过这个对象，你可以加载不同的图层、设置地图中心点、缩放级别等。 2. Layer对象：Layer对象是地图的组成部分，可以是服务图层、瓦片图层、矢量图层等。每个图层都包含特定的数据集，并有自己的属性和方法。 3. View对象：View对象提供了地图的可视化表示，如MapView用于2D地图，SceneView用于3D场景。你可以通过View对象控制用户的交互，如鼠标事件、平移、旋转、缩放等。二、ArcGIS API for JS基本使用 1. 初始化Map和View：你需要创建一个Map对象并指定其底图，然后创建一个View对象并将其与Map关联起来。例如： ```javascript var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", map: map }); ``` 2. 添加图层：通过Map对象的add()方法添加图层。例如，添加一个Web图层： ```javascript var webLayer = new WebTiledLayer({ url: "http://example.com/tiles/{level}/{col}/{row}.png" }); map.add(webLayer); ``` 三、ArcGIS API for JS高级特性 1. 地图操作：ArcGIS API提供了丰富的地图操作功能，如定位、导航、测量、图层控制等。例如，可以通过以下代码定位到特定坐标： ```javascript view.centerAt([116.4074, 39.9042]); ``` 2. 地理编码：API内置了地理编码服务，可以将地址转换为坐标。例如： ```javascript geocoder.findAddressCandidates({ address: { "SingleLine": "北京市海淀区" } }).then(function(response) { var candidate = response.results[0]; view.centerAt(candidate.location); }); ``` 3. 地图服务与动态图层：可以使用MapService或FeatureService创建动态图层，实时获取服务器上的数据。例如： ```javascript var featureLayer = new FeatureLayer({ url: "http://services.arcgis.com/your-service/FeatureServer/0" }); map.add(featureLayer); ``` 4. 受益于ArcGIS Server和ArcGIS Online：ArcGIS API可以直接与ArcGIS Server或ArcGIS Online集成，利用其丰富的地理服务和资源。四、ArcGIS API for JS的扩展应用 1. 3D场景：SceneView支持3D地图，提供更丰富的视觉体验。例如： ```javascript var sceneView = new SceneView({ container: "viewDiv", map: map, camera: { position: { x: -118.2437, y: 34.0522, z: 1000 }, heading: 345, tilt: 60 } }); ``` 2. 图形和符号：API允许你创建自定义图形，如点、线、面，并设置各种符号样式。这对于创建标记、轨迹等非常有用。 3. 地理分析：API提供了多种地理分析工具，如缓冲区分析、网络分析、空间统计等，为决策支持提供强大支持。 4. 集成其他Web技术：ArcGIS API与HTML、CSS、jQuery、Bootstrap等Web技术良好兼容，可以构建出功能丰富且用户友好的Web GIS应用。总结，ArcGIS API for JavaScript是Web GIS开发的重要工具，结合JavaScript语言的灵活性，可以构建出强大的地图应用，实现地图展示、数据交互、空间分析等多种功能。无论你是地图爱好者还是专业开发者，掌握ArcGIS API for JavaScript都将极大地拓展你的地理信息处理能力。

资源推荐

资源详情

资源评论

收起资源包目录

ArcGIS.rar （1个子文件）

ArcGIS.js 28KB

// 定义地图初始化类 var ArcGIS = { // 存放地图div容器的id,spatialReference的值 createNew: function (mapid, legendid, callback) { var arcgis = {}; arcgis.legendid = legendid; arcgis.map = null, // 地图 arcgis.navToolbar = null, // 工具 arcgis.legendDijit = null, // 图例 //鹰眼 function showOverview() { require(["esri/dijit/OverviewMap", "dojo/domReady!"], function (OverviewMap) { var overviewMapDijit = new OverviewMap({ map: arcgis.map, attachTo: "bottom-right", color: "#D84E13", opacity: .50, width: 210, height: 180, visible: true }); overviewMapDijit.startup(); }); }; //显示坐标 function showCoordinates() { var coorDiv = document.createElement('DIV'); coorDiv.style.height = '15px'; coorDiv.style.width = '250'; //coorDiv.style.top = '8px'; //coorDiv.style.right = '15px'; coorDiv.style.bottom = '8px'; coorDiv.style.left = '22px'; coorDiv.style.position = 'absolute'; coorDiv.style.cursor = 'pointer'; coorDiv.style.fontSize = '12px'; coorDiv.style.backgroundColor = "transparent"; dojo.connect(arcgis.map, "onMouseMove", showCoords); dojo.connect(arcgis.map, "onMouseDrag", showCoords); function showCoords(evt) { evt = evt ? evt : (window.event ? window.event : null); var mp = evt.mapPoint; coorDiv.innerHTML = "X：" + mp.x.toFixed(3) + "&nbsp Y：" + mp.y.toFixed(3); }; document.getElementById(arcgis.map.id + '_root').appendChild(coorDiv); }; //显示比例尺 function showScalebar() { var scaleDiv = document.createElement('DIV'); scaleDiv.id = 'scaleDiv'; scaleDiv.style.height = '25px'; scaleDiv.style.width = '158px'; scaleDiv.style.bottom = '8px'; scaleDiv.style.left = '20px'; scaleDiv.style.position = 'absolute'; scaleDiv.style.cursor = 'pointer'; scaleDiv.style.backgroundColor = "transparent"; document.getElementById(arcgis.map.id + '_root').appendChild(scaleDiv); var scaleDiv2 = document.createElement('DIV'); scaleDiv2.id = 'scaleDiv2'; scaleDiv2.style.height = '20px'; scaleDiv2.style.width = '148px'; scaleDiv2.style.bottom = '20px'; scaleDiv2.style.left = '5px'; scaleDiv2.style.fontSize = '10px'; scaleDiv2.style.position = 'absolute'; scaleDiv2.style.cursor = 'pointer'; scaleDiv2.style.backgroundColor = "transparent"; document.getElementById('scaleDiv').appendChild(scaleDiv2); require(["esri/dijit/Scalebar", "dojo/domReady!"], function (Scalebar) { var scalebar = new Scalebar({ map: arcgis.map, scalebarUnit: 'metric', }, dojo.byId("scaleDiv2")); }); }; //设置地图四角坐标spr? arcgis.setExtent = function (xmin, ymin, xmax, ymax, spr) { if (!spr) { spr = 4326; } require(["esri/geometry/Extent", "esri/SpatialReference", "dojo/domReady!"], function (Extent, SpatialReference) { arcgis.map.setExtent(new Extent(xmin, ymin, xmax, ymax, new SpatialReference({ wkid: spr })), false); }); } //加载地图服务 index? showlegend? legendTitle? arcgis.addMapServer = function (id, url, layerType, index, showlegend, legendTitle, callback) { var dellayer = arcgis.map.getLayer(id); if (!layerType) { layerType = "ArcGISDynamicMapServiceLayer"; } if (dellayer != null || dellayer != undefined) { arcgis.map.removeLayer(dellayer); } switch (layerType) { case LayersType.ArcGISDynamicMapServiceLayer: //动态地图服务 require(["esri/layers/ArcGISDynamicMapServiceLayer"], function (ArcGISDynamicMapServiceLayer) { if (!showlegend) { showlegend = false; } if (!legendTitle) { legendTitle = null; } var layer = new ArcGISDynamicMapServiceLayer(url); layer.id = id; layer.showlegend = showlegend; layer.legendTitle = legendTitle; if (!index) { arcgis.map.addLayer(layer); } else { arcgis.map.addLayer(layer, index); } if (showlegend) { arcgis.showlegend(); } dojo.connect(layer, "onLoad", function (lay) { callback && callback(lay); }); }) break; case LayersType.ArcGISTiledMapServiceLayer: //切片地图服务 require(["esri/layers/ArcGISTiledMapServiceLayer"], function (ArcGISTiledMapServiceLayer) { var layer = new ArcGISTiledMapServiceLayer(url); layer.id = id; if (!index) { arcgis.map.addLayer(layer); } else { arcgis.map.addLayer(layer, index); } callback && callback(); }) break; default: alert("暂不支持此种地图服务类型，请核实！"); } } arcgis.addLayer = function (layer) { arcgis.map.addLayer(layer); } //根据图层id 移除地图 refreshLegend?false arcgis.removeLayer = function (id, refreshLegend) { var layer = arcgis.map.getLayer(id); if (layer != null) { arcgis.map.removeLayer(layer); if (!refreshLegend) { refreshLegend = false; } if (refreshLegend == true) { arcgis.showlegend(); } } }; // 根据地图id 设置地图是否可见visible? arcgis.setLayerVisible = function (id, visible) { if (!visible) { visible = true; } var layer = arcgis.map.getLayer(id); visible == true ? layer.show() : layer.hide(); }; //根据地图图层id判断图层是否可视 true 可见 false 不可见 arcgis.isVisible = function (id) { var layer = arcgis.map.getLayer(id); return layer.visible; } //根据图层id是否存在不存在返回-1 arcgis.isExist = function (id) { var arr = arcgis.map.layerIds; if (arr.indexOf(id) == -1) { return false; } else { return true; } } //将指定图层移动到指定位置 arcgis.reorderLayer = function (id, i) { var layer = arcgis.map.getLayer(id);

评论收藏

内容反馈

版权申诉