当前位置：移动技术网 > IT编程>开发语言>JavaScript > ArcGIS API for JavaScript 加载天地图代码实例

ArcGIS API for JavaScript 加载天地图代码实例

2018年03月31日 | 移动技术网IT编程 | 我要评论

前言

加载天地图作为底图

切片线划图层

TDMapLayer.js

define(["dojo/_base/declare",
        "esri/layers/TiledMapServiceLayer",
        "esri/geometry/Extent",
        "esri/SpatialReference",
        "esri/layers/TileInfo"],
    function (declare,TiledMapServiceLayer,Extent,SpatialReference,TileInfo) {
        return declare(TiledMapServiceLayer, {
            constructor: function () {
                this.spatialReference = new SpatialReference({ wkid: 4326 });
                this.initialExtent = (this.fullExtent = new Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
                this.tileInfo = new TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "compressionQuality": 0,
                    "origin": {
                        "x": -180,
                        "y": 90
                    },
                    "spatialReference": {
                        "wkid": 4326
                    },
                    "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 "https://t" + col % 8 + ".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
            }
        });
    });

加载标注图层

TDMapAnnoLayer.js

define(["dojo/_base/declare",
        "esri/layers/TiledMapServiceLayer",
        "esri/geometry/Extent",
        "esri/SpatialReference",
        "esri/layers/TileInfo"],
    function (declare,TiledMapServiceLayer,Extent,SpatialReference,TileInfo) {
        return declare(TiledMapServiceLayer, {
            constructor: function () {
                this.spatialReference = new SpatialReference({ wkid: 4326 });
                this.initialExtent = (this.fullExtent = new Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
                this.tileInfo = new TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "compressionQuality": 0,
                    "origin": {
                        "x": -180,
                        "y": 90
                    },
                    "spatialReference": {
                        "wkid": 4326
                    },
                    "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 "https://t" + row % 8 + ".tianditu.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
            }
        });
    });

在首页集成

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TianDi Map</title>
    <link rel="stylesheet" type="text/css" href="https://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="https://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true,
            packages: [{
                name: 'tdlib',
                location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js"
            }]
        };
    </script>
    <script type="text/javascript" src="https://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
    <script>
        var map;
        require(["esri/map",
                "tdlib/ TDMapLayer",
                "tdlib/ TDMapAnnoLayer",
                "esri/layers/FeatureLayer",
                "esri/geometry/Point",
                "dojo/domReady!"],
            function (Map,
                      TDTLayer,
                      TDTAnnoLayer,
                      FeatureLayer,
                      Point
            ){
                map = new Map("map", { logo: false });
                var basemap = new TDTLayer();
                map.addLayer(basemap);
                var annolayer = new TDTAnnoLayer();
                map.addLayer(annolayer);

                var pt = new Point(103.847, 36.0473);
                map.centerAndZoom(pt, 3);
            });
    </script>
</head>
<body>
<p id="map"></p>
</body>
</html>

结果：

这里写图片描述

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑

今天在整合smm项目时：遇到两个错误，分享给各位Failed to load or instantiate Ta... [阅读全文]
vert实践五——Json？Protocol Buffer？FlatBuffers？

本节我们来比较一下Json、FlatBuffers、Protocol Buffer在vertx中使用时的占用资源... [阅读全文]
JS可断点续传文件上传实现代码解析

刚开始学习前端开发就碰到文件上传问题，还要求可断点续传。查了很多资料，发现h5的file api刚好可以满足我们的需求，也遇到了一些问题，于是记录下来为有同样需... [阅读全文]
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络

1.数据集验证神经网络2.图片验证神经网络3.说明正文：1.数据集验证神经网络上一篇博文已经训练好了神经网络模型... [阅读全文]
数据转为YOLO的txt数据格式

通过两个类来转换import osfrom xml.etree.ElementTree import dumpi... [阅读全文]
字典、集合、序列

字典用程序解答下面的题目字典的长度是多少请修改’java’ 这个key对应的value值为98删除 c 这个ke... [阅读全文]
06.字典、集合和序列

1.字典练习练习题：字典基本操作字典内容如下:dic = {‘python’: 95,‘java’: 99,‘c... [阅读全文]
多线程爬取狗妈表情包

通过多线程爬取狗妈表情包import requestsimport jsonfrom jsonpath impo... [阅读全文]
Python：数据导出到Excel（使用xlwt）

写在前面：前端ajax调用导出方法，ajax无法导出问题原因：ajax是无法直接导出excel的，因为ajax的... [阅读全文]
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地

爬虫代码如下：运行需要本地开启mongo服务器端，安装有谷歌浏览器及selenium对应版本的驱动文件#codi... [阅读全文]

网友评论


验证码：

ArcGIS API for JavaScript 加载天地图代码实例

2018年03月31日 | 移动技术网IT编程 | 我要评论

前言

切片线划图层

加载标注图层

在首页集成

结果：

您可能感兴趣的文章:

相关文章:

网友评论