openlayers-04-地图控件

阿发博客

已于 2023-05-22 23:19:03 修改

阅读量472

点赞数 1

分类专栏： OpenLayers入门与实践文章标签： webgis OpenLayers

于 2023-05-15 23:54:40 首次发布

本文链接：https://blog.csdn.net/chuanren1991/article/details/130695222

版权

OpenLayers入门与实践专栏收录该内容

19 篇文章 9 订阅

订阅专栏

ol提供的地图控件比较常用的包括：鼠标位置、比例尺、鹰眼、图层缩放滑块。
直接通过代码来讲解体会一下会更加直观。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>地图控件</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0px !important;
        }
        #mapCon {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        /* 鼠标位置盒子的样式 */
        #mouse-position {
            position: absolute;
            bottom: 10px;
            right: 20px;
            padding: 2px 10px;
            /* 需要设置的大一些才能显示在地图上面 */
            z-index: 1000;
            text-align: center;
            background-color: #ffffff66;
            border-radius: 5px;
        }
        /* 鼠标位置信字体样式 */
        .custom-mouse-position {
            color: rgb(0,0,0);
            font-size: 16px;
            font-family: "宋体";
        }

        /****************自定义鹰眼样式 *************/
        .ol-custom-overviewmap, .ol-custom-overviewmap.ol-uncollapsible {
            bottom: auto;
            left: auto;
            /* 右侧显示 */
            right: 0;
            /* 顶部显示 */
            top: 0;
        }
        /* 鹰眼控件展开时控件外框的样式 */
        .ol-custom-overviewmap:not(.ol-collapsed)  {
            border: 1px solid rgb(216, 216, 216);
        }
         /* 鹰眼控件中地图容器样式 */
        .ol-custom-overviewmap .ol-overviewmap-map {
            border: none;
            width: 270px;
        }
        /* 鹰眼控件中显示当前窗口中主图区域的边框 */
        .ol-custom-overviewmap .ol-overviewmap-box {
            border: 2px solid rgb(41, 80, 255);
        }
        /* 鹰眼控件展开时其控件按钮图标的样式 */
        .ol-custom-overviewmap:not(.ol-collapsed) button{
            bottom: auto;
            left: auto;
            right: 1px;
            top: 1px;
        }
        /****************自定义鹰眼样式 *************/
    </style>
</head>
<body>
    <!-- 地图容器 -->
    <div id="mapCon">
        <div id="mouse-position"></div>
    </div>

    <script type="text/javascript">
        var key = "4689fc6b9bc0fdc8c48298f751ebfb41";//天地图密钥

        
        //ol.layer.Tile：是一个瓦片图层类，用于显示瓦片资源。
        //source是必填项，用于为图层设置来源。

        //ol.source.XYZ: 
        //创建天地图矢量图层
        var TiandiMap_vec = new ol.layer.Tile({
            title: "天地图矢量图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,
                wrapX: false
            })
        });
        //创建天地图矢量注记图层
        var TiandiMap_cva = new ol.layer.Tile({
            title: "天地图矢量注记图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key,
            })
        });

        //鹰眼控件（OverviewMap）,默认样式
        // var overviewMapControl = new ol.control.OverviewMap();

        //鹰眼控件（OverviewMap）,自定义样式的鹰眼控件  
        var overviewMapControl = new ol.control.OverviewMap({
            //鹰眼控件样式
            className: 'ol-overviewmap ol-custom-overviewmap', 
            //鹰眼中加载同坐标系下不同数据源的图层
            layers: [TiandiMap_vec, TiandiMap_cva],
            //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
            collapseLabel: '\u00BB',
            //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
            label: '\u00AB',
            //初始为展开显示方式
            collapsed: false,
            view: new ol.View({
                maxZoom:1,//将最大最小缩放等级设置为一样的，可以避免鹰眼内的地图跟随外部地图缩放。
                minZoom: 1,
                projection: "EPSG:4326",//这里需要与下面的map对象的view中设置的一致，不然鹰眼内的小地图无法渲染。
            }),
        });

        //实例化Map对象加载地图
        var map = new ol.Map({
            //地图容器div的ID
            target: 'mapCon',
            //地图容器中加载的图层
            layers: [TiandiMap_vec, TiandiMap_cva],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点（经纬度）
                center: [116.3913,39.9071],//北京
                //地图初始显示级别
                zoom: 2,
                projection: "EPSG:4326",//这里改为4326，地理坐标系，这样center可以直接用经纬度设置。
            }),
            //加载鹰眼控件,鹰眼控件，无法通过map.addControl方法添加，通过map.addControl添加后，鹰眼控件无法正常显示。
            controls: ol.control.defaults().extend([overviewMapControl])
        });

        var view  = map.getView();
        //实例化 图层缩放滑块(ZoomSlider)控件
        //拖动滑块时，地图会议当前地图的中心点进行放大缩小，可以通过 view.getCenter();方法获取当前地图的中心点
        console.log(view.getCenter());
        var zoomslider = new ol.control.ZoomSlider(); 
        //加载到地图容器中
        map.addControl(zoomslider);

        //鼠标位置控件（MousePosition）
        var mousePositionControl = new ol.control.MousePosition({
            //坐标格式，保留4位小数
            coordinateFormat: ol.coordinate.createStringXY(4),
            //地图投影坐标系，这里选择地理坐标系，即经纬度模式
            projection: 'EPSG:4326',
            //显示经纬度信息的 div 的css样式名称
            className: 'custom-mouse-position',
            //显示鼠标位置的div容器
            target: document.getElementById('mouse-position'),
            //未定义坐标的标记
            undefinedHTML: '&nbsp;'
        });
        //加载到地图容器中
        map.addControl(mousePositionControl);

        //比例尺控件（ScaleLine）
        var scaleLineControl = new ol.control.ScaleLine({
            //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
            units: "metric" 
        });
        //加载到地图容器中
        map.addControl(scaleLineControl);

        
    </script>
</body>
</html>

示例代码