ArcGIS api for JavaScript - 3.xx 版本加载天地图

已于 2022-06-30 15:00:05 修改
阅读量1k 收藏 2
点赞数 2
分类专栏： # 地图__ArcGIS Api For JS 文章标签： arcgis
于 2020-12-17 16:33:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jie_1997/article/details/110874628
版权

ArcGIS api for JavaScript 3.xx 版本加载天地图

一. 加载天地图步骤

  1. 进入天地图API（http://lbs.tianditu.gov.cn/server/MapService.html），申请Key（浏览器端）**
    在这里插入图片描述

  2. 声明矢量图层

    function declareVector() {
    declareMap("http://t5.tianditu.com/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=申请的Key", "VectorLayer");
}

  3. 声明矢量标注图层

    function declareLabel() {
    declareMap("http://t0.tianditu.com/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=申请的Key", "LabelLayer");
}

  4. 声明卫星图

    function declareSatellite() {
    declareMap("http://t0.tianditu.com/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=申请的Key", "SatelliteLayer");
}

  5. 声明天地图

    function declareMap(url, type) {
    dojo.declare(type, esri.layers.TiledMapServiceLayer, {
        constructor: function () {
            this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
            this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180, -90, 180, 90, this.spatialReference));
            this.tileInfo = new esri.layers.TileInfo({
                "rows": 256,
                "cols": 256,
                "compressionQuality": 0,
                "origin": {
                    "x": -180,
                    "y": 90
                },
                "spatialReference": {
                    "wkid": 4326
                },
                "lods": [
                    { "level": 1, "resolution": 0.703125, "scale": 2.958293554545656E8 },
                    { "level": 2, "resolution": 0.3515625, "scale": 1.479146777272828E8 },
                    { "level": 3, "resolution": 0.17578125, "scale": 7.39573388636414E7 },
                    { "level": 4, "resolution": 0.087890625, "scale": 3.69786694318207E7 },
                    { "level": 5, "resolution": 0.0439453125, "scale": 1.848933471591035E7 },
                    { "level": 6, "resolution": 0.02197265625, "scale": 9244667.357955175 },
                    { "level": 7, "resolution": 0.010986328125, "scale": 4622333.678977588 },
                    { "level": 8, "resolution": 0.0054931640625, "scale": 2311166.839488794 },
                    { "level": 9, "resolution": 0.00274658203125, "scale": 1155583.419744397 },
                    { "level": 10, "resolution": 0.001373291015625, "scale": 577791.7098721985 },
                    { "level": 11, "resolution": 0.0006866455078125, "scale": 288895.85493609926 },
                    { "level": 12, "resolution": 0.00034332275390625, "scale": 144447.92746804963 },
                    { "level": 13, "resolution": 0.000171661376953125, "scale": 72223.96373402482 },
                    { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36111.98186701241 },
                    { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18055.990933506204 },
                    { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9027.995466753102 },
                    { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4513.997733376551 },
                    { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2256.998866688275 },
                    { "level": 19, "resolution": 0.000002682209014892578, "scale": 1128.4994333441375 }
                ]
            });
            this.loaded = true;
            this.onLoad(this);
        },
        getTileUrl: function (level, row, col) {
            return url + "&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col;
        }
    });
}

  6. 调用天地图

     require(["esri/map", "dojo/domReady!"], function (Map) {
     var map = new Map("map", {
         center: [118.886885, 32.5219131],//中心坐标
         zoom: 6,//等级
         logo: false, //logo
         slider: false, //缩小按钮
     });
     declareVector();
     declareLabel();
     declareSatellite()
     var vector = new VectorLayer();//天地矢量图
     var label = new LabelLayer();//天地标注图
     var satellite = new SatelliteLayer();//天地卫星图
     map.addLayer(vector);//加载天地矢量图
     map.addLayer(label);//加载天地标注图
     map.addLayer(satellite);//加载天地卫星图
 });

二. 一个完整的页面实例，将key放入即可执行

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ArcGIS api for JavaScript 3.xx 版本加载天地图实例</title>
    <style>
        html,body,#map{
            width:100%;
            height:100%;
            margin:0;
            padding:0;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.21/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.21/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="https://js.arcgis.com/3.21/init.js"></script>
    <script>
        // 声明矢量图层
        function declareVector() {
            declareMap("http://t5.tianditu.com/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=申请的Key", "VectorLayer");
        }
        // 声明矢量标注图层
        function declareLabel() {
            declareMap("http://t0.tianditu.com/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=申请的Key", "LabelLayer");
        }
        // 声明矢量卫星图
        function declareSatellite() {
            declareMap("http://t0.tianditu.com/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=申请的Key", "SatelliteLayer");
        }
        // 声明天地图
        function declareMap(url, type) {
            dojo.declare(type, esri.layers.TiledMapServiceLayer, {
                constructor: function () {
                    this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
                    this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180, -90, 180, 90, this.spatialReference));
                    this.tileInfo = new esri.layers.TileInfo({
                        "rows": 256,
                        "cols": 256,
                        "compressionQuality": 0,
                        "origin": {
                            "x": -180,
                            "y": 90
                        },
                        "spatialReference": {
                            "wkid": 4326
                        },
                        "lods": [
                            { "level": 1, "resolution": 0.703125, "scale": 2.958293554545656E8 },
                            { "level": 2, "resolution": 0.3515625, "scale": 1.479146777272828E8 },
                            { "level": 3, "resolution": 0.17578125, "scale": 7.39573388636414E7 },
                            { "level": 4, "resolution": 0.087890625, "scale": 3.69786694318207E7 },
                            { "level": 5, "resolution": 0.0439453125, "scale": 1.848933471591035E7 },
                            { "level": 6, "resolution": 0.02197265625, "scale": 9244667.357955175 },
                            { "level": 7, "resolution": 0.010986328125, "scale": 4622333.678977588 },
                            { "level": 8, "resolution": 0.0054931640625, "scale": 2311166.839488794 },
                            { "level": 9, "resolution": 0.00274658203125, "scale": 1155583.419744397 },
                            { "level": 10, "resolution": 0.001373291015625, "scale": 577791.7098721985 },
                            { "level": 11, "resolution": 0.0006866455078125, "scale": 288895.85493609926 },
                            { "level": 12, "resolution": 0.00034332275390625, "scale": 144447.92746804963 },
                            { "level": 13, "resolution": 0.000171661376953125, "scale": 72223.96373402482 },
                            { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36111.98186701241 },
                            { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18055.990933506204 },
                            { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9027.995466753102 },
                            { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4513.997733376551 },
                            { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2256.998866688275 },
                            { "level": 19, "resolution": 0.000002682209014892578, "scale": 1128.4994333441375 }
                        ]
                    });
                    this.loaded = true;
                    this.onLoad(this);
                },
                getTileUrl: function (level, row, col) {
                    return url + "&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col;
                }
            });
        }
        //调用天地图
        require(["esri/map", "dojo/domReady!"], function (Map) {
            var map = new Map("map", {
                center: [118.886885, 32.5219131],//中心坐标
                zoom: 6,//等级
                logo: false, //logo
                slider: false, //缩小按钮
            });
            declareVector();
            declareLabel();
            declareSatellite()
            var vector = new VectorLayer();//天地矢量图
            var label = new LabelLayer();//天地标注图
            var satellite = new SatelliteLayer();//天地卫星图
            map.addLayer(vector);//加载天地矢量图
            map.addLayer(label);//加载天地标注图
            //map.addLayer(satellite);//加载天地卫星图
        });
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

三. 效果图

标注图：
在这里插入图片描述
卫星图：
在这里插入图片描述

风轻轻~
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
【ArcGIS JS】ArcGIS API for JavaScript加载天地图
猴扯
12-17 1万+
关于ArcGIS调用天地图的方法，还有两篇博客可以参考，一个是esri针对SDK for Android，另一个是LZU-GIS扩展dojo。这里我在这两篇文章的基础上提供一种直接调用相关API的方法，基于ArcGIS API for JavaScript v3.18。 一、WMTS服务 WMTS服务即网络地图瓦片服务，不同于WMS、WFS、WCS可以简单一句url的GET请求调用一张地...
ArcGIS JS api 4.15加载天地图（一）
gispipi的博客
07-14 3051
1 下载与配置。进入下载页面 https://developers.arcgis.com/javascript/latest/guide/get-api/ 2.
基于ArcGIS API for JavaScript加载天地图
wml00000的博客
04-06 9636
文章目录前言效果图详细代码总结参考链接 前言 该篇主要介绍如何用ArcGIS JS API加载天地图，具体应用场景以及需求分析等，在上篇基于ArcGIS API for JavaScript加载百度各种类型切片地图已经说过了，不再做过多介绍。 效果图 详细代码 TDTLayer.js define([ "esri/layers/TileInfo", "esri/layers/Ti...
Arcgis js api二次开发——加载国家天地图
niuge8905的博客
07-10 783
Arcgis js api二次开发——加载国家天地图
arcgis for js 3.X 使用4490坐标系加载天地图
左直拳的马桶_日用桶
04-13 4683
我以往使用arcgis for js 3.19加载天地图，使用的都是默认的坐标系：4326。现在因为客户提供的地图，都是4490的，没办法，只能全部使用4490，否则不同坐标系的图层，没办法叠在一起。 4490是CGCS2000坐标系的WKID，4326是WGS84的WKID。有关它们的区别与联系，请阅读尾部的参考文章。有说法称，4490比4326更适合我们多一些。 以下是加载天地图的完整代码，写成了arcgis插件的形式： define(["dojo/_base/declare","esri/layers
ArcGIS API for JavaScript 地图加载空白现象-ArcGIS Web 开发学习（三）
liuguobo的专栏
03-09 5884
我在做C#开发bs系统时，使用JavaScript加载了一个地图，但是加载完后出现了一个问题，就是map对象并没有布满整个mapdiv控件区域，参见下图：                     我明白是控件布局的问题，所以就开始修改样式设置，我的设置如下所示：       html, body, #mapDiv {             padding: 30px 0px 0px 0p
ArcGIS API for JavaScript 加载切片地图
ResponseBody的博客
04-04 4706
说明：本人是一个gis小白，由于网上的资料过于专业，当时学习的时候经常看不懂，于是写了一些简单的关于ArcGIS Api for javaScript分享，若该分享中出现错误，希望大家指出，若能帮助到各位，不胜荣幸。地图的发布在网上到处都有，这里不多说，值得注意的一点是选择缓存的时候不要选择“根据数据动态绘制”，要选择下面的那个选项发布完成之后登录站点查看刚刚发布的地图服务是否有Levels of...
使用ArcGIS API for JavaScript 4.3 加载一个瓦片地图
正在编程
06-05 5970
Load a basic WebMap - 4.3 html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } var myMap, view; require([
ArcGis-for-javaScript最全中文API.pdf
06-28
ArcGIS JavaScript API 是 ESRI 提供的一种基于 JavaScript 的开发工具，允许开发者创建交互式的 Web 地图应用程序。本文将对 ArcGIS JavaScript API 进行详细的介绍，并提供多个示例来帮助读者快速上手。 一、...
ArcGIS API for Javascript3加载天地图
12-21
在本文中，我们将深入探讨如何使用ArcGIS API for JavaScript 3.23版本来加载天地图，包括矢量图、影像图和地形图，并展示如何添加标注图层。ArcGIS API for JavaScript是Esri公司提供的一个强大的Web GIS开发工具，...
arcgis javascript api 加载天地图
09-23
arcgis js api加载天地图矢量图、注记图、影像图例子，解压打开网页，就有效果，代码都在页面中，简单易读，希望帮助到你，给个好评
ArcGIS JS API调用天地图的地图服务
01-22
下载即用的arcgis js api加载天地图的案例，不需要更改api和地图服务的地址。
ArcGIS API for JavaScript4.10加载天地图
01-18
使用ArcGIS API for Javascript 4.10加载天地图的矢量底图、影像地图和地形图，通过扩展BaseTileLayer来自定义图层模块。
arcgis api for JavaScript加载在线天地图
01-29
arcgis api for JavaScript加载在线天地图（包含矢量，影像，注记）
ArcGIS API for JavaScript4.10加载高德地图
01-16
在本文中，我们将深入探讨如何使用ArcGIS API for JavaScript 4.10版本来加载高德地图，并结合高德地图的影像数据，实现自定义的GaodeMapLayer模块。ArcGIS API for JavaScript是一个强大的Web GIS开发工具，它允许...
ArcGIS API for JavaScript3加载谷歌地图
12-28
本文将深入探讨如何使用ArcGIS API for JavaScript 3.23版本加载并集成在线的谷歌地图，以及展示谷歌地图的影像和标注。 首先，我们要了解ArcGIS API for JavaScript的核心概念。这是一个基于Web的开发库，由Esri...
arcgis js 3.x 成功加载天地图服务（包含4326坐标系和3857坐标系）
傲骨雄风的博客
11-29 1801
一、arcgis js 3.x加载4326坐标系的天地图服务 1.新建TDTAnnoLayer.js文件（天地图注矢量记图层） http://t0.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row +
ArcGIS API for Javascript 3.x 加载天地图（经纬度投影）
m0_37688284的博客
04-01 793
https://www.cnblogs.com/zhangkaiqiang/p/7358627.html
ArcGIS API for JavaScript开发教程：全面指南与实例
本教程详细介绍了ArcGIS API for JavaScript的开发教程，适用于ESRI官方3.xx版本。内容涵盖了从基础概念到高级应用开发的各个方面。首先，教程引导读者了解JavaScript、Dojo、REST和JSON的基础知识，以及ArcGIS API ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值