使用ArcGIS JavaScript API 3.18 加载天地图

Posted 2020-08-17 点亮的芦苇

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用ArcGIS JavaScript API 3.18 加载天地图相关的知识，希望对你有一定的参考价值。

对于中国开发者在创建GIS应用的时候，往往比较头疼的是底图资源的缺乏。其实国家测绘地信局就提供一个很好的免费资源：天地图。使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图。

ArcGIS javascript API最近新推出了3.18版本。所以下面示例代码将基于该版本。

<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>Test Map</title>
	<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.18/3.18/dijit/themes/claro/claro.css" />
	<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" />
	<style>
		html,
		body,
		#ui-map-view {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
	</style>
	<script src="http://localhost/arcgis_js_api/library/3.18/3.18/init.js"></script>
	<script>
var myMap

require([
  ‘dojo/_base/declare‘,
  ‘esri/layers/ArcGISTiledMapServiceLayer‘,
  ‘esri/layers/TiledMapServiceLayer‘,
  ‘esri/map‘,
  ‘esri/layers/TileInfo‘,
  ‘esri/layers/LOD‘,
  ‘esri/SpatialReference‘,
  ‘dojo/domReady!‘
], function (declare, TileLayer, TiledMapServiceLayer, Map, TileInfo, LOD, SpatialReference) {

  declare(‘TDTLayer‘, TiledMapServiceLayer, {
    constructor: function () {
      this.spatialReference = new esri.SpatialReference({ wkid: 4490 })
      this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference))

      this.tileInfo = new esri.layers.TileInfo({
        ‘rows‘: 256,
        ‘cols‘: 256,
        ‘compressionQuality‘: 0,
        ‘origin‘: {
          ‘x‘: -180,
          ‘y‘: 90
        },
        ‘spatialReference‘: {
          ‘wkid‘: 4490
        },
        ‘lods‘: [
          {‘level‘: 2, ‘resolution‘: 0.3515625, ‘scale‘: 147748796.52937502},
          {‘level‘: 3, ‘resolution‘: 0.17578125, ‘scale‘: 73874398.264687508},
          {‘level‘: 4, ‘resolution‘: 0.087890625, ‘scale‘: 36937199.132343754},
          {‘level‘: 5, ‘resolution‘: 0.0439453125, ‘scale‘: 18468599.566171877},
          {‘level‘: 6, ‘resolution‘: 0.02197265625, ‘scale‘: 9234299.7830859385},
          {‘level‘: 7, ‘resolution‘: 0.010986328125, ‘scale‘: 4617149.8915429693},
          {‘level‘: 8, ‘resolution‘: 0.0054931640625, ‘scale‘: 2308574.9457714846},
          {‘level‘: 9, ‘resolution‘: 0.00274658203125, ‘scale‘: 1154287.4728857423},
          {‘level‘: 10, ‘resolution‘: 0.001373291015625, ‘scale‘: 577143.73644287116},
          {‘level‘: 11, ‘resolution‘: 0.0006866455078125, ‘scale‘: 288571.86822143558},
          {‘level‘: 12, ‘resolution‘: 0.00034332275390625, ‘scale‘: 144285.93411071779},
          {‘level‘: 13, ‘resolution‘: 0.000171661376953125, ‘scale‘: 72142.967055358895},
          {‘level‘: 14, ‘resolution‘: 8.58306884765625e-005, ‘scale‘: 36071.483527679447},
          {‘level‘: 15, ‘resolution‘: 4.291534423828125e-005, ‘scale‘: 18035.741763839724},
          {‘level‘: 16, ‘resolution‘: 2.1457672119140625e-005, ‘scale‘: 9017.8708819198619},
          {‘level‘: 17, ‘resolution‘: 1.0728836059570313e-005, ‘scale‘: 4508.9354409599309},
          {‘level‘: 18, ‘resolution‘: 5.3644180297851563e-006, ‘scale‘: 2254.4677204799655}
        ]
      })

      this.loaded = true
      this.onLoad(this)
    },

    getTileUrl: function (level, row, col) {
      return ‘http://t0.tianditu.com/DataServer?T=vec_c&X=‘ + col + ‘&Y=‘ + row + ‘&L=‘ + level
    }
  })


  myMap = new Map(‘ui-map-view‘, {
    center: [111.87, 23.57]

  })

  var tdt = new TDTLayer()

  myMap.addLayer(tdt)

})

    </script>
</head>

<body class="claro">
	<div id="ui-map-view"></div>
</body>

</html>

以上是关于使用ArcGIS JavaScript API 3.18 加载天地图的主要内容，如果未能解决你的问题，请参考以下文章

（十五）ArcGIS API For Javascript之地图输出

Arcgis api for javascript学习笔记-初步尝试(3.2X版本)

ArcGIS API For Javascript之调用动态地图服务

使用Arcgis Api for Javascript 调用本地Portal发布的WebMap

ArcGIS api for javascript——加载查询结果，单击显示信息窗口

ArcGIS API for JavaScript学习：第一个地图