arcgis api for js 4.11 天地图_经纬度投影.html

最新推荐文章于 2022-07-10 11:43:58 发布
学无止境慢慢来
最新推荐文章于 2022-07-10 11:43:58 发布
阅读量768
点赞数
分类专栏： arcgis_js_api_demo4.11
arcgis_js_api_demo4.11 专栏收录该内容
21 篇文章 2 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天地图2</title>

    <!--官网接口。-->
    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
    <script src="https://js.arcgis.com/4.11/"></script>

    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
    <script>
        // 参考：https://blog.csdn.net/zhengjie0722/article/details/81780860
        // 参考：http://lbs.tianditu.gov.cn/server/MapService.html
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/WebTileLayer",
            "esri/layers/support/TileInfo",
            "dojo/domReady!"
        ], function (Map, MapView, WebTileLayer, TileInfo) {
            let tileInfo = new TileInfo({
                dpi: 90.71428571427429,  // 切片方案的每英寸点数（即像素）。
                size: 256,  // 设置每个瓷砖的高度和宽度为[256, 256]像素。
                origin: {  // 切片方案的原点。
                    type: "point",
                    x: -180,
                    y: 90,
                    spatialReference: {wkid: 4326}
                },
                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}
                ]
            });
            // WebTileLayer提供了一种简单的方法，可以将非ArcGIS服务器地图瓦片作为图层添加到地图中。
            // 以下要介绍 经纬度投影 的底图和注记。
            let tk = "你的tk";
            // 1.矢量底图(T=vec_c) vectorBasemap
            let vectorBasemapLayer = new WebTileLayer({
                id: "vectorBasemapMap",
                title: "vectorBasemapMap",
                // urlTemplate: 'http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=' + tk,
                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=' + tk,
                subDomains: ["t0"],
                tileInfo: tileInfo
            });
            // 2.矢量注记(T=cva_c) vectorNote
            let vectorNoteLayer = new WebTileLayer({
                id: "vectorNoteMap",
                title: "vectorNoteMap",
                // urlTemplate: 'http://{subDomain}.tianditu.com/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=' + tk,
                urlTemplate: 'http://{subDomain}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=' + tk,
                subDomains: ["t0"],
                tileInfo: tileInfo
            });

            // 3.影像底图(T=img_c) imageBasemap
            let imageBasemapLayer = new WebTileLayer({
                // urlTemplate: 'http://{subDomain}.tianditu.com/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=' + tk,
                urlTemplate: 'http://{subDomain}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=' + tk,
                subDomains: ["t0"],
                tileInfo: tileInfo
            });
            // 4.影像注记(T=cia_c) imageNote
            let imageNoteLayer = new WebTileLayer({
                id: "imageNoteMap",
                title: "imageNoteMap",
                // urlTemplate: 'http://{subDomain}.tianditu.com/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=' + tk,
                urlTemplate: 'http://{subDomain}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=' + tk,
                subDomains: ["t0"],
                tileInfo: tileInfo
            });

            // 5.地形晕渲(T=ter_c) terrainShading。
            let terrainShadingLayer = new WebTileLayer({
                // 托管瓷砖的URL模板。
                // urlTemplate: "http://{subDomain}.tianditu.com/DataServer?T=ter_c&X={col}&Y={row}&L={level}&tk=" + tk,
                urlTemplate: 'http://{subDomain}.tianditu.gov.cn/ter_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=' + tk,
                // 一串子域名，其中为Tiles提供服务，以加快瓷砖的检索速度。http://t0.tianditu.gov.cn/ter_c/wmts?
                subDomains: ['t0'],
                // 该层的平铺方案信息。
                tileInfo: tileInfo
            });
            // 6.地形注记(T=cta_c) terrainNote
            let terrainNoteLayer = new WebTileLayer({
                id: "terrainNoteMap",
                title: "terrainNoteMap",
                urlTemplate: 'http://{subDomain}.tianditu.com/DataServer?T=cta_c&x={col}&y={row}&l={level}&tk=' + tk,
                // urlTemplate: 'http://{subDomain}.tianditu.gov.cn/cta_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=' + tk,
                subDomains: ["t0"],
                tileInfo: tileInfo
            });

            // 7.全球境界(T=ibo_c) globalRealm。
            let globalRealmLayer = new WebTileLayer({
                // 托管瓷砖的URL模板。
                urlTemplate: "http://{subDomain}.tianditu.com/DataServer?T=ibo_c&X={col}&Y={row}&L={level}&tk=" + tk,
                // urlTemplate: 'http://{subDomain}.tianditu.gov.cn/ibo_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=' + tk,
                // 一串子域名，其中为Tiles提供服务，以加快瓷砖的检索速度。http://t0.tianditu.gov.cn/ter_c/wmts?
                subDomains: ['t0'],
                // 该层的平铺方案信息。
                tileInfo: tileInfo
            });

            let map = new Map({
                basemap: {
                    // vectorBasemapLayer, vectorNoteLayer
                    // imageBasemapLayer, imageNoteLayer
                    // terrainShadingLayer, terrainNoteLayer
                    // globalRealmLayer
                    baseLayers: [globalRealmLayer, terrainNoteLayer]
                }
            });
            let view2d = new MapView({
                map: map,
                // 经测试，此处div#map，貌似只能是map，不能是view2dDiv, map2d...
                container: "map",
                spatialReference: {
                    wkid: 4326
                },
                scale: 20000000,
                center: [101, 35]
            });
            console.log("view2d:", view2d);
        })
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>
学无止境慢慢来
关注
0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
arcgis api for js 4.11 天地图_经纬度投影.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫
专栏目录