[Webgis][地图加载]OpenLayer加载多种形式地图

这篇具有很好参考价值的文章主要介绍了[Webgis][地图加载]OpenLayer加载多种形式地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

描述在前

书接上回，作为打工人，学习还是要以项目为导向。由于领导想看卫星地图显示，这次我们记录下，如何使用OpenLayer 加载显示常见的几种二维地图，包括普通地图，卫星地图，和卫星路网混合地图。还是以高德地图为例，下面我们直接上代码，从实例入手学习。

代码在后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <style>
        html { height: 100% }
        body { height: 100%;margin: 0px;padding: 0px }
        #container{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
        }
        .unselectMap{
            float: left;
            box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px; 
            border-left: 1px solid rgb(139, 164, 220); 
            border-top: 1px solid rgb(139, 164, 220); 
            border-bottom: 1px solid rgb(139, 164, 220); 
            background: rgb(255, 255, 255); 
            padding: 2px 6px; 
            font-style: normal; 
            font-variant: normal; 
            font-kerning: auto; 
            font-optical-sizing: auto; 
            font-feature-settings: normal; 
            font-variation-settings: normal; 
            font-stretch: normal; 
            font-size: 12px; 
            line-height: 1.3em; 
            font-family: arial, sans-serif; 
            text-align: center; 
            white-space: nowrap; 
            border-radius: 3px 0px 0px 3px; 
            color: rgb(0, 0, 0);
        }
        .selectMap{
            float: left;
            box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px; 
            border-width: 1px; 
            border-style: solid; 
            border-color: rgb(139, 164, 220); 
            background: rgb(142, 168, 224); 
            padding: 2px 6px; 
            font: bold 12px / 1.3em arial, sans-serif; 
            text-align: center; 
            white-space: nowrap; 
            border-radius: 0px 3px 3px 0px; 
            color: rgb(255, 255, 255);
        }
        .mapChange{
            padding-left: 10px;
            padding-top: 10px;
            white-space: nowrap; 
            cursor: pointer; 
            position: absolute; 
            z-index: 10; 
            text-size-adjust: none;
        }
        /* 去除放大缩小号 */
        .ol-zoom{
            display:none;
        }
    </style>

    <title>Multiple Map</title>

</head>
<body>

    <div id="container"></div>
    <script>
        // 核心图层layer 为三种地图形式创建各自的 Layer，其中混合地图需要 路网地图AMapLayerRoadNet 与 卫星地图AMapLayerSatellite 叠加
        // AMapLayer 为普通地图的 Layer
        AMapLayer = new ol.layer.Tile({
            // 每个图层有对应的数据源（Source）
            source: new ol.source.XYZ({
                // 该url为高德瓦片地图地址
                url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
            })
        });
        // AMapLayerRoadNet 为路网地图的 Layer
        AMapLayerRoadNet = new ol.layer.Tile({
            // 每个图层有对应的数据源（Source）
            source: new ol.source.XYZ({
                // 该url为高德瓦片地图地址
                url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
            })
        });
        // AMapLayerSatellite 为卫星地图的 Layer
        AMapLayerSatellite = new ol.layer.Tile({
            // 每个图层有对应的数据源（Source）
            source: new ol.source.XYZ({
                // 该url为高德瓦片地图地址
                url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}'
            })
        });
        // 把整个地图看作一个容器（Map）
        var map = new ol.Map({
            target: 'container',
            // 核心为地图图层（Layer），若想实现路网与卫星地图混合，AMapLayerSatellite 需要在 AMapLayerRoadNet 之前
            layers: [AMapLayer,AMapLayerSatellite,AMapLayerRoadNet], 
            // 并由地图视图（View）进行地图表现
            view: new ol.View({
                //设定默认坐标系
                projection: 'EPSG:3857', 
                //设定中心点，因为默认坐标系为 3587，所以要将我们常用的经纬度坐标系4326 转换为 3587坐标系
                center: ol.proj.transform([120.266053,31.550228], 'EPSG:4326', 'EPSG:3857'), 
                // 默认显示级别，相当于瓦片地图的 Z 级别
                zoom: 5,
                // 最小显示级别
                minZoom:3, 
                // 最大显示级别
                maxZoom:19
            })
        });
        // 默认显示普通地图，所以将 AMapLayer 的 Visible 设定为true，其他设定为fasle
        AMapLayer.setVisible(true);
		AMapLayerRoadNet.setVisible(false);
		AMapLayerSatellite.setVisible(false);

        //创建地图形式切换按钮
        function createMapChangeBar(){
            let htmllet = "";
            htmllet += "<div title=\"显示普通地图\" id=\"usualMap\" class=\"selectMap\">地图</div>";
            htmllet += "<div title=\"显示卫星地图\" id=\"satelliteMap\" class=\"unselectMap\">卫星</div>";
            htmllet += "<div title=\"显示混合地图\" id=\"hybridMap\" class=\"unselectMap\">混合</div>";
            let p = document.createElement("div");
            p.className = "mapChange";
            p.innerHTML = htmllet;
            document.body.appendChild(p);
        }
        // 设定地图形式切换按钮的响应函数
        function mapTypeChangeMap() {
            createMapChangeBar();
            var usualMap=document.getElementById("usualMap");
            var satelliteMap=document.getElementById("satelliteMap");
            var hybridMap=document.getElementById("hybridMap");
            usualMap.addEventListener('click',function(){
                usualMap.className="selectMap";
                satelliteMap.className="unselectMap";
                hybridMap.className="unselectMap";
                AMapLayer.setVisible(true);
                AMapLayerRoadNet.setVisible(false);
                AMapLayerSatellite.setVisible(false);
            })
            satelliteMap.addEventListener('click',function(){
                usualMap.className="unselectMap";
                satelliteMap.className="selectMap";
                hybridMap.className="unselectMap";
                AMapLayer.setVisible(false);
                AMapLayerRoadNet.setVisible(false);
                AMapLayerSatellite.setVisible(true);
            })
            hybridMap.addEventListener('click',function(){
                usualMap.className="unselectMap";
                satelliteMap.className="unselectMap";
                hybridMap.className="selectMap";

                AMapLayer.setVisible(false);
                AMapLayerRoadNet.setVisible(true);
                AMapLayerSatellite.setVisible(true);
            })
        }
        mapTypeChangeMap();
    </script>
</body>
</html>