OpenLayers基础教程——地图控件样式的扩展

最新推荐文章于 2024-05-21 17:52:59 发布

HerryDong

最新推荐文章于 2024-05-21 17:52:59 发布

阅读量1.8k

点赞数 4

文章标签： openlayers

本文链接：https://blog.csdn.net/HerryDong/article/details/108704161

版权

1、前言

上一篇博客介绍了OpenLayers中的一些常规地图控件，而这些地图控件无一例外，使用的都是OpenLayers默认的控件样式。这篇博客就来介绍一下如何利用自定义的CSS样式对地图控件进行控制。

2、默认的控件样式

我们这里就以地图拾取控件——MousePosition为例进行介绍。首先我们添加一个地图拾取控件，不对其进行样式的修改，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:400px;height:400px;">
        <div id="mouse-position"></div>
    </div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            }),
            controls: ol.control.defaults().extend([
                new ol.control.MousePosition()
            ])
        })
    </script>
</body>
</html>

运行结果如下图所示：
在这里插入图片描述
可以发现，默认的地图拾取控件位于地图的右上角，显示的字体颜色为黑色，对应的坐标也没有进行四舍五入的处理，因此看起来有些别扭。

3、自定义的控件样式

现在对地图拾取控件的样式进行修改，要求如下：位于地图左下角、字体显示颜色为红色、坐标保留两位小数，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <style>
        #mouse-position {
            position: absolute;
            top: 380px;
            width: 200px;
            height: 20px;
            z-index: 99;
        }

        .custom-mouse-position {
            color: red;
            font-size: 16px;
            font-family: "微软雅黑";
        }
    </style>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:400px;height:400px;">
        <div id="mouse-position"></div>
    </div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            }),
            controls: ol.control.defaults().extend([
                new ol.control.MousePosition({
                    coordinateFormat: ol.coordinate.createStringXY(2),     // 坐标保留两位小数
                    projection: 'EPSG:4326',                               // 投影
                    className: 'custom-mouse-position',                    // 文字样式
                    target: document.getElementById('mouse-position'),     // 容器id
                    undefinedHTML: '&nbsp'                                 // 未定义坐标的标记
                })
            ])
        })
    </script>
</body>
</html>

运行结果如下图所示：
在这里插入图片描述

4、结语

在OpenLayers中，有些地图控件如果在同一时间进行加载的话，其位置会发生重合，如ScaleLine和OverviewMap在默认情况下同时会在地图左下角进行显示，如下图所示：
在这里插入图片描述
此时如果展开OverviewMap，则ScaleLine会被其覆盖，如下图所示：

因此我们就需要对ScaleLine的默认样式进行扩展，以避免造成与OverviewMap重叠的现象。在浏览器中选择F12，查看其样式，发现其对应的样式名称为ol-scale-line，如下图所示：
在这里插入图片描述
现对其进行扩展，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <style>
        .ol-scale-line {
            margin-left: 200px;
        }
    </style>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:400px;height:400px;"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            }),
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({
                    units: 'metric'
                }),
                new ol.control.OverviewMap({
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    view: new ol.View({
                        projection: 'EPSG:4326'
                    })
                })
            ])
        })
    </script>
</body>
</html>

运行结果如下图所示：
在这里插入图片描述

HerryDong

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
OpenLayers基础教程——地图控件样式的扩展

1、前言上一篇博客介绍了OpenLayers中的一些常规地图控件，而这些地图控件无一例外，使用的都是OpenLayers默认的控件样式。这篇博客就来介绍一下如何利用自定义的CSS样式对地图控件进行控制。2、默认的控件样式我们这里就以地图拾取控件——MousePosition为例进行介绍。首先我们添加一个地图拾取控件，不对其进行样式的修改，代码如下：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><h
复制链接

扫一扫