ArcGIS API for javascript加载无偏移天地图（3版本）

最新推荐文章于 2024-07-04 16:19:26 发布
最新推荐文章于 2024-07-04 16:19:26 发布
阅读量977 收藏 1
点赞数
分类专栏： ArcGIS API for JavaScript 文章标签： ArcGIS API 加载天地图 无偏移
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44616652/article/details/104038800
版权

3和4版本同理，本文以3api为例

效果图，同一位置在控制台输出坐标值信息

                                                                                             图一

                                                                                               图二

两次都是点击的天安门，可以看到在控制台中输出的坐标，Y值差别还是蛮大的。

代码如下

图一：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>3.X版本加载天地图（经纬度）</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.28/"></script>
</head>
<!-- 3.21-3.28通用 -->
<style>
    html,
    body,
    #mapDiv {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>

<script>
    require(['esri/map',
        'esri/layers/WebTiledLayer',
        'esri/layers/TileInfo',
        'esri/geometry/Point',
        "esri/dijit/OverviewMap",
        'dojo/domReady!'], function (Map, WebTiledLayer, TileInfo, Point, OverviewMap) {
            var map = new Map('mapDiv')
            var tileInfo = new TileInfo({
                dpi: 90.71428571427429,
                rows: 256,
                cols: 256,
                compressionQuality: 0,
                origin: {
                    x: -180,
                    y: 90
                },
                spatialReference: {
                    wkid: 4326
                },
                lods: [
                    { level: 2, levelValue: 2, resolution: 0.3515625, scale: 147748796.52937502 },
                    { level: 3, levelValue: 3, resolution: 0.17578125, scale: 73874398.264687508 },
                    { level: 4, levelValue: 4, resolution: 0.087890625, scale: 36937199.132343754 },
                    { level: 5, levelValue: 5, resolution: 0.0439453125, scale: 18468599.566171877 },
                    { level: 6, levelValue: 6, resolution: 0.02197265625, scale: 9234299.7830859385 },
                    { level: 7, levelValue: 7, resolution: 0.010986328125, scale: 4617149.8915429693 },
                    { level: 8, levelValue: 8, resolution: 0.0054931640625, scale: 2308574.9457714846 },
                    { level: 9, levelValue: 9, resolution: 0.00274658203125, scale: 1154287.4728857423 },
                    { level: 10, levelValue: 10, resolution: 0.001373291015625, scale: 577143.73644287116 },
                    { level: 11, levelValue: 11, resolution: 0.0006866455078125, scale: 288571.86822143558 },
                    { level: 12, levelValue: 12, resolution: 0.00034332275390625, scale: 144285.93411071779 },
                    { level: 13, levelValue: 13, resolution: 0.000171661376953125, scale: 72142.967055358895 },
                    { level: 14, levelValue: 14, resolution: 8.58306884765625e-005, scale: 36071.483527679447 },
                    { level: 15, levelValue: 15, resolution: 4.291534423828125e-005, scale: 18035.741763839724 },
                    { level: 16, levelValue: 16, resolution: 2.1457672119140625e-005, scale: 9017.8708819198619 },
                    { level: 17, levelValue: 17, resolution: 1.0728836059570313e-005, scale: 4508.9354409599309 },
                    { level: 18, levelValue: 18, resolution: 5.3644180297851563e-006, scale: 2254.4677204799655 },
                    { level: 19, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
                    { level: 20, levelValue: 2, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }
                ]
            })
             var vecLayer = WebTiledLayer('http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=cdfa92003ba0fc7d93bc36d2bdaeaba7', {
                subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                tileInfo: tileInfo
            })
            // 矢量地图
            var labelLayer = WebTiledLayer('http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=cdfa92003ba0fc7d93bc36d2bdaeaba7', {
                subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                tileInfo: tileInfo
            })
            // 矢量注记图层
            map.addLayers([vecLayer, labelLayer])
            map.centerAndZoom(new Point({
                x: 109,
                y: 34.5,
                spatialReference: {
                    wkid: 4326
                }
            }), 3)
            var overviewMapDijit = new OverviewMap({
                map: map,
                visible: true
            });
            overviewMapDijit.startup();//鹰眼
            map.on("click", function (evt) {
                console.log(evt.mapPoint);
            });
        })

</script>

<body>
    <div id="mapDiv"></div>
</body>

</html>

图二：

<!DOCTYPE html>
<html>


<head>

    <meta charset="utf-8">
    <title>3.X版本加载天地图（经纬度）</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.28/"></script>
</head>

<!-- 3.21-3.28通用 -->

<style>
    html,
    body,
    #mapDiv {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>

<script>
    require(['esri/map',
        'esri/layers/WebTiledLayer',
        'esri/layers/TileInfo',
        'esri/geometry/Point',
        "esri/dijit/OverviewMap",
        'dojo/domReady!'], function (Map, WebTiledLayer, TileInfo, Point, OverviewMap) {
            var map = new Map('mapDiv')
            var tileInfo = new TileInfo({
                dpi: 90.71428571427429,
                rows: 256,
                cols: 256,
                compressionQuality: 0,
                origin: {
                    x: -180,
                    y: 90
                },
                spatialReference: {
                    wkid: 4326
                },
                lods: [
                    { level: 0, levelValue: 1, resolution: 0.703125, scale: 295497593.05875003 },
                    { level: 1, levelValue: 2, resolution: 0.3515625, scale: 147748796.52937502 },
                    { level: 2, levelValue: 3, resolution: 0.17578125, scale: 73874398.264687508 },
                    { level: 3, levelValue: 4, resolution: 0.087890625, scale: 36937199.132343754 },
                    { level: 4, levelValue: 5, resolution: 0.0439453125, scale: 18468599.566171877 },
                    { level: 5, levelValue: 6, resolution: 0.02197265625, scale: 9234299.7830859385 },
                    { level: 6, levelValue: 7, resolution: 0.010986328125, scale: 4617149.8915429693 },
                    { level: 7, levelValue: 8, resolution: 0.0054931640625, scale: 2308574.9457714846 },
                    { level: 8, levelValue: 9, resolution: 0.00274658203125, scale: 1154287.4728857423 },
                    { level: 9, levelValue: 10, resolution: 0.001373291015625, scale: 577143.73644287116 },
                    { level: 10, levelValue: 11, resolution: 0.0006866455078125, scale: 288571.86822143558 },
                    { level: 11, levelValue: 12, resolution: 0.00034332275390625, scale: 144285.93411071779 },
                    { level: 12, levelValue: 13, resolution: 0.000171661376953125, scale: 72142.967055358895 },
                    { level: 13, levelValue: 14, resolution: 8.58306884765625e-005, scale: 36071.483527679447 },
                    { level: 14, levelValue: 15, resolution: 4.291534423828125e-005, scale: 18035.741763839724 },
                    { level: 15, levelValue: 16, resolution: 2.1457672119140625e-005, scale: 9017.8708819198619 },
                    { level: 16, levelValue: 17, resolution: 1.0728836059570313e-005, scale: 4508.9354409599309 },
                    { level: 17, levelValue: 18, resolution: 5.3644180297851563e-006, scale: 2254.4677204799655 },
                    { level: 18, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
                    { level: 19, levelValue: 20, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }
                ]
            })
            var vecLayer = WebTiledLayer('http://{subDomain}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=cdfa92003ba0fc7d93bc36d2bdaeaba7', {
                subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                tileInfo: tileInfo
            })
            // 矢量地图
            var labelLayer = WebTiledLayer('http://{subDomain}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=cdfa92003ba0fc7d93bc36d2bdaeaba7', {
                subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                tileInfo: tileInfo
            })
            // 矢量注记图层
            map.addLayers([vecLayer, labelLayer])
            map.centerAndZoom(new Point({
                x: 109,
                y: 34.5,
                spatialReference: {
                    wkid: 4326
                }
            }), 3)

            var overviewMapDijit = new OverviewMap({
                map: map,
                visible: true
            });
            overviewMapDijit.startup();//鹰眼
            map.on("click", function (evt) {
                console.log(evt.mapPoint);
            });
        })

</script>

<body>
    <div id="mapDiv"></div>
</body>

</html>

图二用了4490的服务，4326的lods，达到了纠正偏移的效果，同理也可以采用4490的lods，或者自己定义lods，后续写了代码补充上来

AriaGIS
关注
专栏目录
arcgis api for js接入天地图（经纬度）（arcgis api for js篇.6）
GIS之家家长
03-04 360
GIS之家总目录（订阅之前请先查看该博客） GIS之家：openlayer+mapbox+arcgis api for js等相关内容的介绍 地图之家总目录 地图之家：cesium+leaflet+地图数据+地图工具等相关内容的介绍 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <!DOCTYPE html> <html style="height: 100%;"> <head> .
arcgis js api加载wmts切片服务，偏移处理方法
一醉千秋的专栏
10-13 3185
一、wmts切片服务包括两大类： A.arcgis server 生成的mapserver对应的WMTS服务，例如： http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunityENG/MapServer/WMTS B.其他软件生成的WMTS，例如天地图、iserver、geoserver等，如： http://t0.tianditu.gov.cn/vec_c/wmts http://192.168.1.106:8080/geoser
ArcGIS JS api 4.15加载天地图（一）
gispipi的博客
07-14 3081
1 下载与配置。进入下载页面 https://developers.arcgis.com/javascript/latest/guide/get-api/ 2.
arcgis for js 3.X 使用4490坐标系加载天地图
左直拳的马桶_日用桶
04-13 4814
我以往使用arcgis for js 3.19加载天地图，使用的都是默认的坐标系：4326。现在因为客户提供的地图，都是4490的，没办法，只能全部使用4490，否则不同坐标系的图层，没办法叠在一起。 4490是CGCS2000坐标系的WKID，4326是WGS84的WKID。有关它们的区别与联系，请阅读尾部的参考文章。有说法称，4490比4326更适合我们多一些。 以下是加载天地图的完整代码，写成了arcgis插件的形式： define(["dojo/_base/declare","esri/layers
ArcGIS加载天地图在线影像
最新发布
qq_45227007的博客
07-04 1542
3.双击打开，自动创建地图文档（需另存才能保存地图文档，以便下次使用）找到需要的在线地图，点击右下角三个点，选择在ArcMap中打开。4、如果联网正常还是看不到影像，那么试试下面的操作。取消分组，将注记的透明度设为0，就好啦。
ArcGIS JS加载天地图
qq_45661948的博客
08-13 636
1.经纬度投影 var map = new Map("map",{ center:[105, 35], zoom:3 }); var tileInfo=new TileInfo({ "rows": 256, "cols": 256, "compressionQuality": 0, "origin": {
ArcGIS API For JavaScript - 根据要素的坐标类型（点、圆、线、面），在地图上绘制展示
技术共享，共同进步！
06-21 1459
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> @*加载高德地图*@ <script type="text/javascript"> var dojoConfig =
9.（arcgis api for js篇）arcgis api for js接入百度地图（有偏移）.zip
03-08
在本教程中，我们将深入探讨如何使用ArcGIS API for JavaScript集成百度地图，并处理地图坐标系之间的偏移问题。ArcGIS API for JS是一个强大的工具，它允许开发者构建交互式的Web地图应用，而百度地图在国内有着...
arcgis for javascript 加载天地图和高德地图
10-12
本教程将重点讲解如何利用ArcGIS API加载天地图和高德地图，以便在网页中展示这两种常见的在线地图服务。 首先，我们需要了解ArcGIS for JavaScript API的基本结构。API提供了丰富的地图操作、图层管理、地理编码、...
arcgis for javascript API3.13 加载天地图卫星影像
GISlv的专栏
05-30 5099
采用arcgis for javascript  API 3.13， 用其中的esri.layers.TiledMapServiceLayer，这个类可以完成对切片地图的加载，ArcOnline本身自带一个影像地图的，但是缩放后效果不好，所以本人在一个系统中不得不采用天地图的底图。可以看到最后的效果中，有一个天地图的水印。直接上代码了            declare("my.Portlan
arcgis api for js入门开发系列八聚合效果(含源代码)
哈里·雪利博客
01-16 1493
上一篇实现了demo的图层控制模块，本篇新增聚合效果，截图如下（源代码见文章底部）： 聚合效果实现的思路如下： 1.map.html引用聚合包，项目已经包含进来了的聚合文件夹： //配置arcgis拓展解析天地图服务类引用的路径 dojoConfig = { parseOnLoad: true,
Arcgis for javascript 加载天地图及自定义图
11-13
Arcgis for javascript 加载天地图及自定义图
ArcGIS API for Javascript3加载天地图
12-21
利用ArcGIS API for Javascript3最新版本【3.23】加载天地图，包括矢量图、影像图、地形图，并包含标注图层。
18 ArcGIS API for JavaScript4.X 系列加载天地图（经纬度）
AriaGIS
04-23 864
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
[WebGIS] arcgis js地图坐标偏移问题
geodoer
08-29 1万+
WebGIS加载数据时坐标偏移问题。
ArcGIS加载无偏天地图WMTS服务
Crace1992的博客
02-26 1万+
本文介绍了在ArcGIS中加载天地图WMTS服务的流程及需要注意的事项。采用的ArcGIS软件版本为10.8。
arcgis for js 天地图_arcgis for js——1.显示2D地图
weixin_39594191的博客
12-01 199
1.引入ArcGIS API for JavaScript库首先，建立基本的html文档，然后在标签内，使用和标签引入ArcGIS API for JavaScript ：html><html><head><metacharset="utf-8"/><metaname="viewport"content="ini...
ArcGIS读取天地图2.0
热门推荐
ArcGIS产品与技术专栏
04-25 4万+
天地图2.0（http://www.chinaonmap.com）于2013年3月份上线，基本情况如下： 1)     基于OGC的WMTS 1.0.0版本； 2)     提供矢量地图、影像地图和地形图； 3)     提供两种坐标系：国家2000大地坐标系和Web Mercator投影坐标系； 4)     地图和标注数据分开，矢量地图和影像地图提供中英文标注，地形图仅提供中文标注。
Arcgis for js加载天地图
LZUGIS
03-20 9861
本节讲述的是用Arcgis for js加载天地图的切片资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值