arcgisjsapi加载天地图底图_arcgis.jsSceneView加载WMTS资源-CSDN下载

共2个文件

html：1个

js：1个

arcgis

javascript

webgis

layer

1星需积分: 50 146 浏览量 2018-06-13 15:09:09 上传评论 2 收藏 2KB 7Z 举报

在本文中，我们将深入探讨如何使用ArcGIS JavaScript API（arcgis for js api）加载天地图作为WebGIS应用的底图。天地图是中国提供的一种在线地理信息服务，它包含了丰富的地图资源，如矢量图、影像图、矢量标注、影像标注、水系、区域边线和道路图层等。通过集成天地图到ArcGIS JavaScript API中，我们可以创建具有中国本土化地图信息的Web应用程序。我们需要了解ArcGIS JavaScript API。这是一个强大的JavaScript库，由Esri公司开发，用于构建交互式的地图应用。它允许开发者在网页上展示地图、添加图层、进行地理分析以及与ArcGIS Server或ArcGIS Online服务交互。加载天地图底图的关键在于获取天地图的图层信息和服务URL。天地图提供了公开的WMTS（Web Map Tile Service）服务，我们可以通过这些服务URL将天地图的各个图层接入到ArcGIS的地图中。例如，对于矢量图层，服务URL可能类似于`http://wmts.tianditu.gov.cn/wmts/{layer}/{tileMatrixSet}/{tileMatrix}/{tileRow}/{tileCol}.png?tk={token}`，其中`{layer}`代表图层类型，`{tileMatrixSet}`、`{tileMatrix}`、`{tileRow}`和`{tileCol}`用于定位地图瓦片，`{token}`是访问令牌，用于身份验证。在index.html文件中，通常会设置地图的基本配置，包括地图容器、初始化地图的位置和级别。同时，需要引入arcgis-js-api的库文件和自定义的tdt.js，后者可能包含了加载天地图图层的函数和配置。在tdt.js中，我们可以通过以下步骤加载天地图： 1. 创建地图对象，指定地图容器ID和初始中心位置。例如： ```javascript require(["esri/Map", "esri/views/MapView"], function(Map, MapView) { var map = new Map({ basemap: null // 在这里不设置basemap，因为我们将在后面添加天地图作为底图 }); var view = new MapView({ container: "mapDiv", map: map, center: [120, 35], // 经纬度坐标，以北京为中心 zoom: 5 }); }); ``` 2. 定义天地图图层并添加到地图。对于每个天地图图层，我们需要创建一个`TileLayer`对象，并使用相应的WMTS服务URL。例如，加载矢量图层： ```javascript function addTDTVectorLayer(map) { var tdtVectorLayer = new TileLayer({ url: "http://wmts.tianditu.gov.cn/wmts/cvec/{z}/{y}/{x}.png?tk=您的令牌", tileMatrixSetID: "cvec", layer: "cvec", style: "default", format: "png", tileInfo: { // 瓦片信息，根据天地图服务规格设定 ... // 具体信息需查阅天地图文档 } }); map.basemap = new Basemap({ layers: [tdtVectorLayer] }); } addTDTVectorLayer(map); ``` 3. 对于其他类型的图层，如影像图、矢量标注等，可以创建多个`TileLayer`对象，并根据需要将它们添加到地图的不同图层组中。每个图层的配置项可能会有所不同，比如服务URL、图层ID、样式等。 4. 如果需要实时更新图层，还可以监听地图视图的`update`事件，以便在地图移动或缩放时重新加载瓦片。通过这种方式，我们可以利用ArcGIS JavaScript API加载天地图作为WebGIS应用的底图，为用户提供全面、准确的中国地理信息。结合tdt.js中的配置和功能，开发者可以根据实际需求定制地图显示效果，实现更复杂的应用场景，如叠加自定义数据、进行地理分析等。

资源推荐

资源详情

资源评论

收起资源包目录

arcgis js api 加载天地图.7z （2个子文件）

index.html 2KB

tdt.js 4KB

<!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"> <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css"/> <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css"/> <title>展示小流域图层</title> <style> html,body{margin:0;padding:0;height:100%;} .map { height: 100%;padding:0; } </style> </head> <body onload="mapInit()"> <script src="https://js.arcgis.com/3.16/init.js"></script> <script src="tdt.js"></script> <div id="map" class="map"></div> <script> var myMap; var draw; var baseMapConfig = { initLevel: 0, //地图初始化等级 }; function mapInit() { require([ 'dojo/_base/declare', 'esri/map', 'esri/SpatialReference', 'dojo/domReady!' ], function (declare, Map, SpatialReference) { myMap = new Map('map', { center: [116, 40], "spatialReference": new esri.SpatialReference({ "wkid": 4326 }), zoom: 7, logo: false, slider: true, //autoResize: true, //sliderPosition: 'bottom-right', maxZoom: 11 }); initTianMap(); basemap = new TDTAnnoLayer("vec", "veclayer"); terlayer = new TDTAnnoLayer("ter", "terlayer"); annolayer_v = new TDTAnnoLayer("cva", "annolayer_v");//标注图层 annolayer_i = new TDTAnnoLayer("cia", "annolayer_i");//标注图层,影像 imagemap = new TDTAnnoLayer("img", "imagemap");//影像图 watlayer = new TDTAnnoLayer("wat", "watlayer");//水系 tbolayer = new TDTAnnoLayer("tbo", "tbolayer");//境线 ctalayer = new TDTAnnoLayer("cta", "ctalayer");//道路 myMap.addLayer(basemap); //myMap.addLayer(terlayer, 0); myMap.addLayer(watlayer, 1); myMap.addLayer(tbolayer, 2); myMap.addLayer(ctalayer, 2); myMap.addLayer(annolayer_v, 3); }); } </script> </body> </html>

评论收藏

内容反馈