openlayer加载各种小控件

叁歲伎倆 2021-07-25 16:21 444阅读 0赞

<template>
        <div id="map"></div>
    </template>
     
    <script>
    
    import 'ol/ol.css'
    import {Map,View} from 'ol'
    import TileLayer from 'ol/layer/Tile'
    import OSM from 'ol/source/OSM'
    import {defaults as defaultControls,OverviewMap,FullScreen,ScaleLine,ZoomSlider,MousePosition,ZoomToExtent} from 'ol/control'
    
    export default {
      data(){
        return{
        }
      },
      mounted() {
        //鹰眼控件
        var overviewMapControl=new OverviewMap({
          className: 'ol-overviewmap ol-custom-overviewmap', //鹰眼控件样式
                layer:[
                        new TileLayer({
                            source:new OSM()
                        })
                ],
                collapseLabel:"\u00BB",//鹰眼展开时功能按钮上的标识
                label:"\u00AB",//鹰眼折叠时功能按钮上的标识
                collapsed:false//初始为展开显示方式
            });
    
         var map=new Map({
          target: "map",
          layers: [
            new TileLayer({
              source: new OSM()
            })
          ],
          view: new View({
            projection: "EPSG:4326",    //使用这个坐标系
            center: [104.704968,31.540962],  //西南科技大学
            zoom: 15
          }),
          controls: defaultControls({ attribution: false, zoom: true}).extend([
              overviewMapControl,  //鹰眼控件
              new FullScreen(),  //地图全屏控件
              new ScaleLine(),  //比例尺控件
              new ZoomSlider(),  //滑块缩放控件
              new MousePosition(),  //鼠标位置控件
              new ZoomToExtent({  //导航控件
                        extent: [                   
                            813079.7791264898, 5929220.284081122,
                            848966.9639063801, 5936863.986909639
                          ]
                      })
           ]),
        });
      }
    }
    </script>
     
    <style lang='scss'>
        #map{
          
          height:100vh;
          width:100vw;
          background-color: rgb(121, 119, 119);
          display: flex;
    
            // 鹰眼控件相对视图的位置
            .ol-custom-overviewmap, .ol-custom-overviewmap.ol-uncollapsible {
                top: auto;
                right: auto;
                // right: 0; /*右侧显示*/
                // bottom: 0; /*底部显示*/
                // margin-bottom: 10px;
                // margin-left: 10px;
            }
    
            /* 鹰眼控件展开时控件外框的样式 */
            .ol-custom-overviewmap:not(.ol-collapsed) {
                border: 1px solid black;
            }
    
            /* 鹰眼控件中地图容器的样式 */
            .ol-custom-overviewmap .ol-overviewmap-map {
                border: none;
                width: 150px; //控件的宽度
            }
    
            /* 在鹰眼控件中显示当前窗口中主图区域的边框 */
            // .ol-custom-overviewmap .ol-overviewmap-box {
            //     border: 2px solid red;
            // }
    
            /* 在鹰眼控件张开时其控件按钮图标的样式 */
            .ol-custom-overviewmap:not(.ol-collapsed) button {
                top: auto;
                right: auto;
                right: 1px;
                bottom: 1px;
            }
    
              //比例尺控件位置
             .ol-scale-line {
                right:10px;
                left: auto;
                bottom: 10px;
                top: auto;
              }
    
              //鼠标控件位置
              .ol-mouse-position{
                width: 350px;
                bottom: 10px;
                top: auto;
                right: 150px;
                left: auto;
            }
              
              //全屏控件
              .ol-full-screen{
                  top: 10px;
                  right: 10px;
                  left: auto;
                  bottom: auto;
              }
    
              //缩放控件位置
              .ol-zoom{
                  // top: 50px;
                  top: 37px;
                  right: 10px;
                  left: auto;
                  bottom: auto;
                  .ol-zoom-out {
                       margin-top: 3px;
                     }
              }
    
              
          }
    </style>

运行效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/68855409fa6b4b9fa51c1c0e8a8ea120.png