OpenLayers之地图控件

头像
HerryLo
     湖北
    阅读 6 分钟
    1
    头图

    看过之前的文章：OpenLayers之基础入门，对于OpenLayers基础使用，会有一个大致的了解。下面我们继续讲解OpenLayer的地图控件。
    下面示例是以 OpenLayersV8.2.0版本作为依赖包。

    地图显示

    地图显示应该放在第一篇文章讲，但是出了点意外给忘记了，所以补在第二篇。
    地图显示首先需要一个地图容器对象ol.Map，加上图层Layer，再给视图View加上经纬度和缩放，一个正常的地图就可以展示。图层在下一篇会说到，现在我们先聊聊视图View。

    View

    [ol.View](https://openlayers.org/en/v8.2.0/apidoc/module-ol_View-View.html)：View对象表示地图的简单二维视图；这是用于更改地图的中心、分辨率和旋转的对象。

    new ol.View({
  center: [116.39, 39.91],
  zoom: 10,
  rotation: 0,
  maxZoom: 18,
  minZoom: 4,
  padding: [0,0,0,0],
  projection: 'EPSG:4326'
})

    View有提供许多方法，如：getCenter、getZoom、getMaxZoom、getMinZoom、setZoom等。通过View提供的方法，我们可以得到和设置经纬度、缩放等，更多方法查看官方文档。

    事件

    OpenLayer地图实例Map API：官网ol.Map，下面是地图Map实例可以通过监听的事件。
    image.png
    click点击、dbclick双击、moveend 移动结束、movestart 移动开始、postrander完成渲染、postcompose开始渲染、percompose准备渲染、pointermove鼠标移动、pointerdrag鼠标拖拽等。。。

    示例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>访问 Map</title>
    <link rel="stylesheet" href="./8.2.0/theme/ol.css">
    <script src="./8.2.0/en/latest/ol/dist/ol.js"></script>
    <!-- <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"> -->
</head>

<body>
    <div id="map" style="height: 600px; border: 6px solid;"></div>
    <div>当前地图中心：<i id="center">116.39, 39.91</i></div>
    <div>当前缩放级别：<i id="zoom">10</i></div>

    <script>
        const url = 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}'
        // const url1 = 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer'
        let map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: url
                    })
                })
                // new ol.layer.Image({
                //     source: new ol.source.ImageArcGISRest({
                //         ratio: 1,
                //         params: {},
                //         url: url1,
                //     }),
                // }),
            ],
            view: new ol.View({
                center: [116.39, 39.91],
                zoom: 10,
                projection: 'EPSG:4326'
            })
        });
        const centerText = document.getElementById('center');
        const zoomText = document.getElementById('zoom');
          // 移动结束，更新当前经纬度和缩放比例 
        map.on('moveend', function (e) {
            centerText.innerText = map.getView().getCenter()
            zoomText.innerText = map.getView().getZoom()
        });
        window.map2d = map;
    </script>
</body>

</html>

    鼠标移动结束后，地图左下角可以查看当前的经纬度和缩放比例，下面看看效果！
    image.png

    地图控件

    ol.control是地图控件API，它提供了默认的地图控件，如果你希望自定义控件，也可以通过API实现。

    Control

    1.ol.control.Control：控件是一个可见的小部件，其DOM元素位于屏幕上的固定位置；

    • ol.control.Attribution：控件以显示与地图中的图层源关联的所有属性；
    • ol.control.FullScreen：提供一个按钮，当单击该按钮时，该按钮将用地图填充整个屏幕；
    • ol.control.MousePosition：显示鼠标光标二维坐标的控件；
    • ol.control.OverviewMap：鹰眼；
    • ol.control.Rotate：旋转；
    • ol.control.ScaleLine：比例尺；
    • ol.control.ZoomSlider：缩放滑块；
    • ol.control.ZoomToExtent：更改地图视图；
    • ol.control.Zoom：缩放；

    ol.control有提供默认的地图控制组件，通过ol.control.defaults.defaults()即可使用，如果希望自定义控件，可以参考：官方示例

    示例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>访问 Map</title>
    <link rel="stylesheet" href="./8.2.0/theme/ol.css">
    <script src="./8.2.0/en/latest/ol/dist/ol.js"></script>
    <!-- <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"> -->
    <style>
    </style>
</head>

<body>
    <div id="map" style="height: 600px; border: 6px solid;"></div>
    <div>当前地图中心：<i id="center">116.39, 39.91</i></div>
    <div>当前缩放级别：<i id="zoom">10</i></div>

    <script>
        const url = 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}'
        // const url1 = 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer'

        let map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: url
                    })
                })
                // new ol.layer.Image({
                //     source: new ol.source.ImageArcGISRest({
                //         ratio: 1,
                //         params: {},
                //         url: url1,
                //     }),
                // }),

            ],
            view: new ol.View({
                center: [116.39, 39.91],
                zoom: 10,
                projection: 'EPSG:4326'
            }),
            controls: ol.control.defaults.defaults().extend([
                // 比例尺
                new ol.control.ScaleLine(),
                // 全屏
                new ol.control.FullScreen(),
                // 缩放滑块
                new ol.control.ZoomSlider(),
                // 旋转
                new ol.control.Rotate({ autoHide: false }),
                // 鹰眼
                new ol.control.OverviewMap({
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.XYZ({
                                url: url
                            })
                        })
                    ],
                    view: new ol.View({
                        projection: 'EPSG:4326'
                    })
                })
            ])
        });
        const centerText = document.getElementById('center');
        const zoomText = document.getElementById('zoom');
        map.on('moveend', function (e) {
            centerText.innerText = map.getView().getCenter()
            zoomText.innerText = map.getView().getZoom()
        });
        window.map2d = map;
    </script>
</body>

</html>

    看看地图上的效果吧！
    image.png

    总结

    • [ol.View](https://openlayers.org/en/v8.2.0/apidoc/module-ol_View-View.html)视图可以设置地图中心点、缩放、projection等；
    • ol.control控件有提供默认控件，也可在其基础上自定义开发；
    前端openlayersgis
    HerryLo
    238 声望10 粉丝

    喜爱JavaScript和NodeJs；

    « 上一篇
    OpenLayers之基础入门
    下一篇 »
    OpenLayers之图层

    引用和评论

    推荐阅读
    头像
    OpenLayers之信息窗体

    HerryLo阅读 502

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.8k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.5k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.4k

    0 条评论
    得票最新