[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>

混合地图实现效果
在这里插入图片描述

卫星地图实现效果
在这里插入图片描述

普通地图实现效果
在这里插入图片描述

以上为多种地图实现代码与效果,在此记录,下次我们记录如何使用一些小工具,以及与地图的一些常用交互。

  • 30
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值