ArcGIS Api forJavaScript - 以高德地图为底图，实现标注图与卫星图的切换

妖狐艹你老母 2021-07-25 16:52 494阅读 0赞

## 一. 将高德底图文件放入项目中 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]  
**高德底图文件：**[https://download.csdn.net/download/Jie\_1997/12438659][https_download.csdn.net_download_Jie_1997_12438659]

## 二. 项目中加载高德底图、引入需要的js文件，css样式文件,及高德卫星图css样式文件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]  
**注意： js文件及css样式文件以实际地址实际为准（此处仅供参考）。**  
**arcgis的js文件及css样式文下载地址：** [https://download.csdn.net/download/Jie\_1997/12438411][https_download.csdn.net_download_Jie_1997_12438411]  
**高德卫星图样式文件下载地址：** [https://download.csdn.net/download/Jie\_1997/12439743][https_download.csdn.net_download_Jie_1997_12439743]

## 三. 添加对应的类要素 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 2]  
**ArcGIS API for JavaScript 官方文档使用:**  
[https://developers.arcgis.com/javascript/3/jsapi/map-amd.html][https_developers.arcgis.com_javascript_3_jsapi_map-amd.html]

## 四. 使用高德底图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 4]

# 实例源码： #

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>test</title>
        @*加载高德地图*@
        <script type="text/javascript">
            var dojoConfig = {
                async: true,
                parseOnLoad: true,
                packages: [{
                    name: "js",
                    location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
                }]
            };
        </script>
        @*引入arcgis所需js及css*@
        <link href="~/Content/esri.css" rel="stylesheet" />
        <link href="~/Content/tundra.css" rel="stylesheet" />
        <script src="~/Scripts/init.js"></script>
        @*引入高德卫星图样式*@
        <link href="~/Content/dituqiehuan.css" rel="stylesheet" />
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            html, body, #map {
                width: 100%;
                height: 100%;
            }
        </style>
        <script>
            var map;
            var urlMap = "线上图层链接地址"
            
            require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "js/gaodeLayer"],
                function (Map, ArcGISDynamicMapServiceLayer, gaodeLayer) {
                    /* code goes here */
                    //地图
                    map = new Map("map", {
                        center: [118.563409, 33.864469],
                        zoom: 10,
                        logo: false,
                        slider: false,
                    });
                    //在线图层
                    var ServiceLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.8 });
    
                    //var baselayer = new gaodeLayer({layertype: "label"});//加载标注图
                    var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                    var baselayer1 = new gaodeLayer({ layertype: "st" });//加载卫星图
    
                    //添加高德地图到map容器
                    map.addLayer(baselayer);
                    map.addLayer(baselayer1);
                    baselayer1.setVisibility(false);
                    baselayer.setVisibility(true);
    
                    $('.daolumap').click(function () {
                        baselayer1.setVisibility(false);
                        baselayer.setVisibility(true);
                        //标注图
                        map.addLayer(baselayer, 0);
                    })
                    $(".weixingmap").click(function () {
                        baselayer.setVisibility(false);
                        baselayer1.setVisibility(true);
                        //影像图
                        map.addLayer(baselayer1, 0);
                    })
    
                    //地图加载图层
                    map.addLayer(ServiceLayer);
                });
            
                
        </script>
    </head>
    <body>
        <div id="map"></div>
        <div style="position: absolute; right: 30px; top:10%;z-index:99;background:white;padding:2px;box-shadow:1px 2px 1px rgba(0,0,0,.25);height:26px;width:26px;text-align:center">
            <div class="dituqiehuan">
                <i class="iconfont icon-globe_blue" style="color:#ddd;font-size:16px;"></i>
            </div>
            <div id="dituimg" style="display: none; position: absolute; top: 40px; height: 40px; width: 120px; z-index: 999; right: 5px">
                <div class="hideimg" style="box-shadow: 5px 5px 5px #aaa; margin-right: 10px">
                    <img src="~/Content/道路图.png" style="height:40px; width:60px" class="daolumap" />
                </div>
                <div class="hideimg" style="box-shadow: 5px 5px 5px #aaa">
                    <img src="~/Content/卫星地图.jpg" style="height:40px; width:60px" class="weixingmap" />
                </div>
            </div>
        </div>
    </body>
    </html>
    @*地图样式切换显隐*@
    <script>
        var ditustate = 0;
        $(".dituqiehuan").click(function () {
            if (ditustate == 0) {
                $("#dituimg").css("display", "flex")
                ditustate = 1;
            } else {
                $("#dituimg").css("display", "none")
                ditustate = 0
            }
        })
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/b2e18608152d4ce9b8d27aa5ece768bc.png
[https_download.csdn.net_download_Jie_1997_12438659]: https://download.csdn.net/download/Jie_1997/12438659
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]: /images/20210725/f9962477dfef4d19a73dbaddbd9b3d33.png
[https_download.csdn.net_download_Jie_1997_12438411]: https://download.csdn.net/download/Jie_1997/12438411
[https_download.csdn.net_download_Jie_1997_12439743]: https://download.csdn.net/download/Jie_1997/12439743
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 2]: /images/20210725/efeb79a4ad32444a99f323249dd76797.png
[https_developers.arcgis.com_javascript_3_jsapi_map-amd.html]: https://developers.arcgis.com/javascript/3/jsapi/map-amd.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 3]: /images/20210725/bfed2bf0e92847a994ac2f4671fd925b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 4]: /images/20210725/ac2c19a49697428683f62d1197628e54.png