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

风轻轻~

已于 2022-06-30 15:02:35 修改

阅读量1.9k

点赞数

于 2020-05-20 14:01:22 首次发布

本文链接：https://blog.csdn.net/Jie_1997/article/details/106234945

版权

地图__ArcGIS Api For JS 专栏收录该内容

19 篇文章 5 订阅

订阅专栏

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

在这里插入图片描述

高德底图文件：https://download.csdn.net/download/Jie_1997/12438659

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

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

三. 添加对应的类要素

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

四. 使用高德底图

在这里插入图片描述

实例源码：

@{
    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>