image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="./dist/include-openlayers-local.js"></script>
    10.     <script src='https://lib.baomitu.com/jquery/2.2.4/jquery.js'></script>
    11.     <style>
    12.         * {
    13.             margin: 0;
    14.             padding: 0
    15.         }
    17.         #map {
    18.             position: absolute;
    19.             top: 0;
    20.             bottom: 0;
    21.             z-index: 100;
    22.             width: 100%;
    23.         }
    24.         .btn{
    25.             position: absolute;
    26.             z-index: 200;
    27.             left:50px;
    28.         }
    29.     </style>
    30. </head>
    32. <body>
    33.     <div class="btn">
    34.         <button>显示矢量图</button>
    35.         <button>显示卫星地球</button>
    36.     </div>
    38.     <div id="map">
    40.     </div>
    41.     <script>
    42.         var gaodeMapLayer = new ol.layer.Tile({
    43.             title: "高德地图",
    44.             source: new ol.source.XYZ({
    45.                 url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
    46.                 wrapX: false
    47.             })
    48.         });
    49.         var image = new ol.layer.Tile({
    50.             title: "高德地图",
    51.             source: new ol.source.XYZ({
    52.                 url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
    53.                 wrapX: false
    54.             })
    55.         })
    56.         const map = new ol.Map({
    57.             target: "map",
    58.             layers: [gaodeMapLayer, image],
    59.             view: new ol.View({
    60.                 center: [114, 30],
    61.                 zoom: 4,
    62.                 projection: "EPSG:4326"
    63.             })
    64.         })
    65.         $(".btn button").click(function(){
    66.             /* 点击对应的按钮让对应的图层显示 */
    67.             const index = $(this).index();
    68.             const layers = map.getLayers().getArray();
    69.             layers.forEach((item,i)=>{
    70.                 if(i==index){
    71.                     item.setVisible(true)
    72.                 }else{
    73.                     item.setVisible(false)
    74.                 }
    75.             })
    76.         })
    77.     </script>
    78. </body>
    80. </html>
    1.  <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>

    参考代码