ArcGIS API for Javascript(四)

最新推荐文章于 2024-06-07 09:38:14 发布

会飞的鱼@

最新推荐文章于 2024-06-07 09:38:14 发布

阅读量2.8k

点赞数 2

分类专栏： ArcGIS API for Javascript WebGIS

本文链接：https://blog.csdn.net/wenming111/article/details/106050149

版权

WebGIS 同时被 2 个专栏收录

8 篇文章 2 订阅

订阅专栏

ArcGIS API for Javascript

7 篇文章 2 订阅

订阅专栏

WebTileLayer加载天地图

1、申请密钥

使用WebTileLayer添加天地图，目前使用天地图需要申请密钥（http://lbs.tianditu.gov.cn/server/MapService.html）

点击申请密钥（需注册）

2、调用天地图服务：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目地图</title>
  
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
    <style>
        html,
        body,
        #mapViewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body >
<script src="https://js.arcgis.com/4.15/"></script>
<script>
    var app;

    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/Basemap",
        "esri/layers/WebTileLayer",
        "esri/geometry/SpatialReference",
        "esri/geometry/Extent"
    ], function (
        Map,
        MapView,
        Basemap,
        WebTileLayer,
        SpatialReference,
        Extent
    ) {

        app = {
            center: [-40, 40],
            scale: 50000000,
            basemap: null,
            viewPadding: {
                top: 50,
                bottom: 0
            },
            uiComponents: ["zoom", "compass"],
            mapView: null,
            containerMap: "mapViewDiv",
        };

        var tileBaseLayer = new WebTileLayer({
            urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=您的密钥",
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            copyright: '天地图矢量'
        })

        var anotileBaseLayer = new WebTileLayer({
            urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=您的密钥",
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            copyright: '天地图矢量标注'
        });

        app.basemap = new Basemap({
            baseLayers: [tileBaseLayer,anotileBaseLayer],
            title: "arcgis",
            id: "tdt",
             });

        // Map
        const map = new Map({
            basemap: app.basemap
        });

        // 视图
        app.mapView = new MapView({
            container: app.containerMap,
            map: map,
            center: app.center,
            scale: app.scale,
            padding: app.viewPadding,
            ui: {
                components: app.uiComponents
            },
            
        });
    });
</script>
<div id="mapViewDiv" class="esri-widget"></div>
</body>
</html>

3、WebTileLayer加载天地图（web墨卡托）：

注：

1）WebTileLayer图层默认加载天地图的坐标系为web墨卡托，请注意文章使用的天地图投影为web墨卡托的投影坐标系，如果你使用的是wgs84坐标系是加载不出来的（arcgis api for js 4.15）

2）Web Mercator 由 Google 提出的，当前网络地图的主流投影，最初 Web Mercator 被拒绝分配EPSG 代码，早年称之为 EPSG:900913（Google的数字变形）的非官方代码

EPSG:3785 （已弃用）

EPSG:3857 正式代码，沿用至今。

天地图中的地图投影就是我们看到的 EPSG:900913

Web Mercator Auxiliary Sphere (EPSG:3857)

arcgis默认的（EPSG:3857）和天地图的墨卡托投影（ EPSG:900913）为同一个投影

EPSG:3857和 EPSG:102100（esri已弃用）为同一个投影

4、wgs84矢量地图加载（错误的方法）

var imageURL = "http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的密钥";

1）wgs84矢量地图加载

116.389947、78.172592 （已经超出中国的范围 中国经度范围：73°33′E至135°05′E 纬度范围：3°51′N至53°33′N （可通过高德或百度地图进行验证））

2）天地图api获取坐标系：

经测试发现：

替换WebTileLayer的urlTemplate 使用wgs84坐标系统的天地图的方法是错误的
不能替换数据源，需要设置TileInfo设置坐标系统：

5、自定义的坐标系

1)TileInfo设置坐标系加载天地图

对于自定义的坐标系可通过TileInfo设置坐标系的方法进行设置，其他坐标系替换坐标系编码（wkid）即可：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        天地图加载（经纬度）
    </title>
    <link href="https://js.arcgis.com/4.15/esri/themes/light/main.css" rel="stylesheet">
    <script src="https://js.arcgis.com/4.15/">
    </script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <script type="text/javascript">
    require([
        'esri/Map',
        "esri/views/MapView",
        "esri/Basemap",
        "esri/widgets/CoordinateConversion",
        "esri/geometry/SpatialReference",
        'esri/layers/WebTileLayer',
        'esri/layers/support/TileInfo',
        // 'dojo/domReady!'
    ], function(
        Map,
        MapView,
        Basemap,
        CoordinateConversion,
        SpatialReference,
        WebTileLayer,
        TileInfo) {

       
        var tileInfo = new TileInfo({
            dpi: 90.71428571427429,
            size: 256,
            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 weblayer = WebTileLayer({
            urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=你的密钥",
            subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
            tileInfo: tileInfo,
            spatialReference: {
                wkid: 4326
            }
        });

        var basemap = new Basemap({
            baseLayers: [weblayer],
            title: "arcgis",
        });
         var map = new Map({
            basemap: basemap,
        });

        var view = new MapView({
            container: "viewDiv",
            map: map,
            zoom: 10,
            center: [116.389930, 39.912173],
        });

        const ccWidget = new CoordinateConversion({
            view: view
        });

        view.ui.add(ccWidget, "bottom-left");
    });
    </script>
    <div id="viewDiv">
    </div>
</body>

</html>

2)天地图api 加载天地图获取坐标：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="天地图" />
    <title>天地图－地图API－范例－获得右键菜单点击处的坐标</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
    <style type="text/css">
    body,
    html {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "Microsoft YaHei"
    }

    #mapDiv {
        width: 100%;
        height: 969px;
    }

    input,
    b,
    p {
        margin-left: 5px;
        font-size: 14px
    }
    </style>
    <script>
    var map, zoom = 12;

    function onLoad() {
        //初始化地图对象
        map = new T.Map("mapDiv");
        //设置显示地图的中心点和级别
        map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
        //创建右键菜单对象
        var menu = new T.ContextMenu({ width: 140 });
        //添加右键菜单

        var txtMenuItem = [{
                text: '放大',
                callback: function() {
                    map.zoomIn()
                }
            },
            {
                text: '缩小',
                callback: function() {
                    map.zoomOut()
                }
            },
            {
                text: '放置到最大级',
                callback: function() {
                    map.setZoom(18)
                }
            },
            {
                text: '查看全国',
                callback: function() {
                    map.setZoom(4)
                }
            },
            {
                text: '获得右键点击处坐标',
                isDisable: false,
                callback: function(lnglat) {
                    alert(lnglat.getLng() + "," + lnglat.getLat());
                }
            }
        ];

        for (var i = 0; i < txtMenuItem.length; i++) {

            //添加菜单项
            var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback);
            //item.disable();
            menu.addItem(item);
            if (i == 1 || i == 3) {
                //添加分割线
                menu.addSeparator();
            }
        }
        map.addContextMenu(menu);
    }
    </script>
</head>

<body onLoad="onLoad()">
    <div id="mapDiv"></div>
</body>

</html>

3）关于坐标系（wgs84 EPSG4326和web墨卡托EPSG3857）①②③④⑤⑥⑦

① 故宫护城河右侧坐标：

② arcgis影像图：

定义投影为wgs84,basemap投影为web墨卡托，根据arcgis的动态投影机制，我们可以获取wgs84坐标系下的故宫护城河右侧坐标

③ 故宫护城河右侧坐标：

wgs84:

arcgis wgs84: 116.396,39.913

天地图 wgs84: 116.389940,39.912160

web墨卡托：

天地图： 116.389927, 39.912173

火星坐标：（参考）

高德：116.396151,39.913506

百度：116.402472,39.919905

④ 解释为何坐标位置基本相同：

坐标系统介绍：

EPSG:4326

EPSG:3857

3857是在4326的基础上进行投影的,两者的地理坐标系相同，所以经纬度相同

web墨卡托为投影坐标，应该使用平面直角坐标系x、y来表示，为了展示数据最真实的位置，我们采用经纬度表示

注：

web墨卡托为投影坐标系：为了展示数据的真实性，我们通常使用经纬度来表示，平面直角坐标系x、y来表示的数据不是我们地球上真实的表面，web墨卡托投影采用的是正球体处理，众所周知，我们的地球是椭球体；

写在最后：

效果图：传送门

6、声明

1）文章来源于项目实践，文中存在错误或任何问题请留言，谢您你的阅读

2）原创不易，转载请标注来源，感谢

会飞的鱼@

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS API for Javascript(四)

WebTileLayer加载天地图1、申请密钥使用WebTileLayer添加天地图，目前使用天地图需要申请密钥（http://lbs.tianditu.gov.cn/server/MapService.html）点击申请密钥（需注册）2、调用天地图服务：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>项目地.
复制链接

扫一扫