arcgis js（五）切换底图

最新推荐文章于 2024-08-01 15:12:32 发布
最新推荐文章于 2024-08-01 15:12:32 发布
阅读量1.6k 收藏 7
点赞数 3
分类专栏： Web GIS 开发 文章标签： GIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hb_programmer/article/details/119834815
版权

1、经过四节的学习终于能够显示天地图了arcgis js（四）加载天地图_郝大大的博客-CSDN博客，以后的开发也就能基于天地图的底图了，这节学习天地图矢量底图和影像底图的自由切换，主要介绍两种方法。

2、切换底图比较常用的一个widget是"esri/widgets/BasemapToggle"，toggle本身就是切换的意思，通过实例化BasemapToggle对象，设置nextBasemap即可：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>测试</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.20/"></script>

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

    <script>
        require([
            "esri/Map",
            "esri/layers/WebTileLayer",
            'esri/layers/support/TileInfo',
            'esri/views/MapView',
            "esri/layers/FeatureLayer",
            "esri/geometry/SpatialReference",
            "esri/geometry/Point",
            "esri/widgets/BasemapToggle",

        ], function (Map, WebTileLayer, TileInfo, MapView, FeatureLayer, SpatialReference, Point, BasemapToggle) {
            var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
            var token = ""; //天地图token，在官网申请
            var tileInfo = new TileInfo({
                "rows": 256,
                "cols": 256,
                "compressionQuality": 0,
                "origin": {
                    "x": -180,
                    "y": 90
                },
                "spatialReference": {
                    "wkid": 4490
                },
                "lods": [
                    { "level": "1", "scale": 295829355.45, "resolution": 0.703125 },
                    { "level": "2", "scale": 147914677.725, "resolution": 0.3515625 },
                    { "level": "3", "scale": 73957338.8625, "resolution": 0.17578125 },
                    { "level": "4", "scale": 36978669.43125, "resolution": 0.087890625 },
                    { "level": "5", "scale": 18489334.715625, "resolution": 0.0439453125 },
                    { "level": "6", "scale": 9244667.3578125, "resolution": 0.02197265625 },
                    { "level": "7", "scale": 4622333.67890625, "resolution": 0.010986328125 },
                    { "level": "8", "scale": 2311166.839453125, "resolution": 0.0054931640625 },
                    { "level": "9", "scale": 1155583.4197265625, "resolution": 0.00274658203125 },
                    { "level": "10", "scale": 577791.7098632812, "resolution": 0.001373291015625 },
                    { "level": "11", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },
                    { "level": "12", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },
                    { "level": "13", "scale": 72223.96373291015, "resolution": 0.000171661376953125 },
                    { "level": "14", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },
                    { "level": "15", "scale": 18055.99093322754, "resolution": 0.00004291534423828125 },
                    { "level": "16", "scale": 9027.99546661377, "resolution": 0.000021457672119140625 },
                    { "level": "17", "scale": 4513.997733306885, "resolution": 0.000010728836059570312 },
                    { "level": "18", "scale": 2256.9988666534423, "resolution": 0.000005364418029785156 },
                    { "level": "19", "scale": 1128.4994333267211, "resolution": 0.000002682209014892578 }
                ]
            })

            //影像地图
            var tiledLayer = new WebTileLayer({
                urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                tileInfo: tileInfo,
                spatialReference: { wkid: 4490 },
            });

            //影像注记
            var tiledLayerAnno = new WebTileLayer({
                urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                tileInfo: tileInfo,
                spatialReference: { wkid: 4490 },
            });

            //矢量地图
            var vecLayer = new WebTileLayer({
                urlTemplate: tiandituBaseUrl + "/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=" + token,
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                tileInfo: tileInfo,
                spatialReference: { wkid: 4490 },
            });

            //矢量注记
            var vecLayerAnno = new WebTileLayer({
                urlTemplate: tiandituBaseUrl + "/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=" + token,
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                tileInfo: tileInfo,
                spatialReference: { wkid: 4490 },
            });


            //定位到济南市中心
            var cityCenter = new Point(116.985, 36.671, new SpatialReference({ wkid: 4490 }));

            // 创建地图
            var map = new Map({
                basemap: {
                    baseLayers: [tiledLayer, tiledLayerAnno]
                },
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: cityCenter,
                zoom: 12,
                ui: {
                    components: ["zoom", "compass"]
                }
            });

            const toggle = new BasemapToggle({
                view: view,
                nextBasemap: { baseLayers: [vecLayer, vecLayerAnno] }
            });

            view.ui.add(toggle, "top-right");


        });
    </script>
</head>

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

</html>

效果如下：

3、下面介绍使用Expand控件切换底图，这种方法可以设置底图的title：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.20/"></script>

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

    <script>
        require(["esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/layers/WebTileLayer",
            "esri/layers/MapImageLayer",
            "esri/widgets/LayerList",
            "esri/widgets/BasemapLayerList",
            "esri/widgets/Expand",
            "esri/geometry/SpatialReference",
            "esri/geometry/Point",
            "esri/layers/support/TileInfo",
        ],
            function (esriConfig, Map, MapView, FeatureLayer, WebTileLayer, MapImageLayer,
                LayerList, BasemapLayerList, Expand,
                SpatialReference, Point, TileInfo) {
                var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
                var token = ""; //天地图token，在官网申请
                var tileInfo = new TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "origin": {
                        "x": -180,
                        "y": 90
                    },
                    "spatialReference": {
                        "wkid": 4490
                    },
                    "lods": [
                        { "level": "1", "scale": 295829355.45, "resolution": 0.703125 },
                        { "level": "2", "scale": 147914677.725, "resolution": 0.3515625 },
                        { "level": "3", "scale": 73957338.8625, "resolution": 0.17578125 },
                        { "level": "4", "scale": 36978669.43125, "resolution": 0.087890625 },
                        { "level": "5", "scale": 18489334.715625, "resolution": 0.0439453125 },
                        { "level": "6", "scale": 9244667.3578125, "resolution": 0.02197265625 },
                        { "level": "7", "scale": 4622333.67890625, "resolution": 0.010986328125 },
                        { "level": "8", "scale": 2311166.839453125, "resolution": 0.0054931640625 },
                        { "level": "9", "scale": 1155583.4197265625, "resolution": 0.00274658203125 },
                        { "level": "10", "scale": 577791.7098632812, "resolution": 0.001373291015625 },
                        { "level": "11", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },
                        { "level": "12", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },
                        { "level": "13", "scale": 72223.96373291015, "resolution": 0.000171661376953125 },
                        { "level": "14", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },
                        { "level": "15", "scale": 18055.99093322754, "resolution": 0.00004291534423828125 },
                        { "level": "16", "scale": 9027.99546661377, "resolution": 0.000021457672119140625 },
                        { "level": "17", "scale": 4513.997733306885, "resolution": 0.000010728836059570312 },
                        { "level": "18", "scale": 2256.9988666534423, "resolution": 0.000005364418029785156 },
                        { "level": "19", "scale": 1128.4994333267211, "resolution": 0.000002682209014892578 }
                    ]
                });

                //影像地图
                var tdtImageLayer = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo,
                    spatialReference: { wkid: 4490 },
                    title: "天地图影像地图",
                    visible: true
                });

                //影像注记
                var tdtAnnoImageLayer = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo,
                    spatialReference: { wkid: 4490 },
                    title: "天地图影像注记",
                    visible: true
                });

                //矢量地图
                var tdtVecLayer = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo,
                    spatialReference: { wkid: 4490 },
                    title: "天地图矢量地图",
                    visible: false
                });

                //矢量注记
                var tdtAnnoVecLayer = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo,
                    spatialReference: { wkid: 4490 },
                    title: "天地图矢量注记",
                    visible: false
                });

                const map = new Map({
                    basemap: {
                        baseLayers: [tdtImageLayer, tdtAnnoImageLayer, tdtVecLayer, tdtAnnoVecLayer]
                    }

                });

                //定位到济南市中心
                var cityCenter = new Point(116.985, 36.671, new SpatialReference({ wkid: 4490 }));
                const view = new MapView({
                    map: map,
                    center: cityCenter,
                    zoom: 13,
                    container: "viewDiv",
                    ui: {
                        components: ["zoom", "compass"]
                    },
                });

                let basemapLayerList = new BasemapLayerList({
                    view: view,

                });

                var layerListExpand = new Expand({
                    expandIconClass: "esri-icon-layer-list",
                    view: view,
                    content: basemapLayerList
                });
                view.ui.add(layerListExpand, "top-right");


            });


    </script>


</head>

<body>

    <div id="viewDiv"></div>

</body>

</html>

 效果：

之乎者也哦
关注
专栏目录
arcgis api for js实现动态切换底图（淡入淡出效果）
05-05
arcgis api for js实现动态切换底图（淡入淡出效果）arcgis api for js实现动态切换底图（淡入淡出效果）
arcgisJs之底图切换插件
weixin_30548917的博客
05-23 664
arcgisJs之底图切换插件 底图切换插件在arcgis中有两种表现，如下： 1.两张底图切换 2.多张底图切换 一、两张地图切换 let basemapToggle = new BasemapToggle({ view: this.view, nextBasemap: customBasemap }) this...
从零开始的VUE+ArcGIS API for JS项目——底图切换工具（天地图，高德）
hfhf45_的博客
08-01 1869
实现自定义底图切换的工具，添加天地图，高德等地图作为底图。
ArcGIS JS底图切换功能（天地图底图）
qq_45661948的博客
08-14 899
关键点： 1.将天地图作为BasemapLayer； 2.将BasemapLayer合成Basemap（如果不添加注记无需合成）； 3.在BasemapGallery中将其basemaps属性设置为Basemap数组； //底图1 var tdt_vec_wLayer=new BasemapLayer({ url:"http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=G.
ArcGIS for js4.x实现天地图加载与地图切换
03-22
本文实现了ArcGIS js中加载天地图 并实现矢量地图和影像地图切换。 版本：ArcGIS for js4.x，天地图：包含国家天地图和山东天地图，2019年最新版天地图。
Arcgis js api 4.7 天地图 地形图 - 卫星图 切换
04-23
Arcgis js api 4.7 天地图 地形图 - 卫星图 切换 Arcgis js api 4.7 天地图 地形图 - 卫星图 切换
arcgis js 底图切换_ArcGIS API for JavaScript切换底图
weixin_31487533的博客
01-17 1179
由于小编也是刚接触GIS，也常被网上的各种资源所混淆，关于地图的基本创建就有很多方法。其实无关就是3x和4x版本的不同。3x版本大多是3.33，4x版本为4.16最新版本。以后小编也将采用最新版本。紧接上一篇的创建几何图形，本文主要讲述BasemapToggle和BasemapGallery这两个API来实现地图底图之间的切换。简单描述下两个apiBasemapToggle使用： require(...
arcgis js 底图切换_ArcGIS API For Javascript ：如何制作地图切换器
weixin_35906864的博客
01-17 706
大部分情况下我们开发会使用原生的地图切换器，由于每个项目的页面风格不同，业务场景不同，因此需要做一些样式不同的地图切换器。首先可以照猫画虎，自己照着地图切换器的样式抄一个，或者看看主流的地图切换器都长什么样，然后以这些为基本框架，自己再去设计地图切换器的样式，从核心功能上都大同小异，本篇文章主要想介绍的就是“换壳”。前端部分我们在前端做一个地图切换器。代码如下： 标签中的 CSS 样式代码为：.m...
arcgis js 底图切换_ArcGIS For JavaScript API Switch Basemap —— 切换底图
weixin_40003767的博客
01-17 375
描述：可切换地图地图，使用BasemapGallery类默认选择项您可以添加其他的底图的图库，但所有底图添加到BasemapGallery，需要在相同的投影。如果要显示底图从和ArcGIS.com,showArcGISBasemaps=True 那么其他的底图必须在Web墨卡托投影。所有底图添加到画廊需要具有相同的空间参考。如果使用默认的ArcGIS.com底图添加到库中所有的其他项目需要是在We...
【ArcGIS API】切换底图
m0_58960403的博客
12-03 510
【代码】【ArcGIS API】切换底图。
Arcgis js api && Element UI 自定义底图(basemap)切换
博客
12-03 1038
api版本：4.21, 链接：Map | API Reference | ArcGIS API for JavaScript 4.21 | ArcGIS Developer 原理: 使用了Element 2.x框架的select组件,点击对应的value，map.basemap="newBasemap",实现图层点击切换。 实现: 代码： <template> <div id="content"> <!-- <div id="basemap...
arcgis js api 加载天地图底图
06-13
使用arcgis for js api 加载天地图底图，包含天地图图层：矢量图、影像图、矢量标注、影像标注、水系、区域边线、道路图层，下载后可直接运行。
arcGis for javascript4.8如何中文地图调用与切换
07-23
新出的arcgis forJavaScript4.8中文地图调用，包括，中国色彩地图，中国灰色矢量地图等等，及其arcgis如何本地化，由于arcgis4.8的api是cdn托管的，所以可能会受到，防火墙限制，建议大家，把gis api换成本地化部署调用
arcgis 4.x 更换底图 vue
YangZe的博客
08-17 561
方法一： let map = new this.gisConstructor.Map(); let view = new this.gisConstructor.MapView({ map: map, zoom: 2, container: "viewDiv", }); // 底图服务 let tjUAVLayer = new this.gisConstructor.TileLayer({ .
ArcGIS API for JavaScript+vue系列（四）-自行封装类似于百度地图中的底图切换（basemapGallery）功能
tjx1997的博客
10-19 1425
目录一、背景与思考二、封装MapSwitch文件 一、背景与思考 在ArcGIS API的widgets中，有一个basemapGallery的底图切换功能，但是该功能占据的空间过大，且不够美观，所以尝试利用vue自行封装一个底图切换功能。 百度地图的底图切换功较为优秀，切换功能置于地图页面的右下角，且当鼠标未悬于切换图层上时不会展示其他的切换图层，该展示的方式既美观又不过分的占据地图的空间，所以参照此功能来封装我们的底图切换功能。 在封装该功能之前，我们需要需要分析一下该功能的组成部分。首先在地图页面
arcgis js 底图切换_3.选择底图
weixin_39966909的博客
12-23 400
概述本节您将学到： 怎么创建一个可以交互选择和显示 ArcGIS Online上底图的应用。应用可以使用和展示托管在ArcGIS Online和ArcGIS Enterprise栅格切片底图和矢量切片底图，同样可使用您通过ArcGIS Vector Tile Style Editor设计的自定义底图（注：当然也可以是自己发布的栅格底图和矢量底图）。使用BasemapToggle和BasemapGa...
arcgis for javascript 隐藏或显示底图
weixin_33943347的博客
04-25 950
arcgis for javascript展示地图的时候，有图层的概念，一层一层的，类似photoshop，在应用界面上控制图层的显隐，是极常见的功能。 但是，如果是控制底图的显示或隐藏呢，怎么搞？ 网上找不到满意的答案。中文的一篇类似答案都没有，英文的都是说new Map的时候，别指定底图，然后再采用add Layer的办法添加上去。我明白，add Layer的时候，可以...
ArcGIS API for JavaScript 3.x 地图切换
一碗老面的博客
09-06 555
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>地图切换</title> <link rel="stylesheet" type="text/css" href="http://locati.
arcgis学习系列-2 切换基础地图
naturessdfsafagf的博客
10-12 625
切换基础地图 概述 本文你将学习如何以交互的方式选择和展示arcgis on line 基础地图。 Arcgis on line 提供了大量即时可用的基础地图。这些基础地图由esri负责存储和管理，并且以tile layer的形式存储。瓦片图层以他们的格式和数据源类型进行分组，分为：raster tile basemaps and vector tile basemaps。 尽管可以独立的加载每一...
arcgis js 3 无限放大底图
最新发布
08-28
ArcGIS JS 3.x 中的无限放大底图（Infinite Zoom Basemap）是指一种地图展示模式，它允许用户无限制地缩放地图，直到达到像素级别，提供极细粒度的细节查看。这种功能通常通过高分辨率的瓦片（Tiles）服务支持，比如...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值