OpenLayers之地图控件

掘金2023年度人气创作者打榜中,快来帮我打榜吧~

看过之前的文章: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对象表示地图的简单二维视图;这是用于更改地图的中心、分辨率和旋转的对象。

php 复制代码
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有提供许多方法,如:getCentergetZoomgetMaxZoomgetMinZoomsetZoom等。通过View提供的方法,我们可以得到和设置经纬度、缩放等,更多方法查看官方文档。

事件

OpenLayer地图实例Map API:官网ol.Map,下面是地图Map实例可以通过监听的事件。

click点击、dbclick双击、moveend 移动结束、movestart 移动开始、postrander完成渲染、postcompose开始渲染、percompose准备渲染、pointermove鼠标移动、pointerdrag鼠标拖拽等。。。

示例

xml 复制代码
<!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>

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

地图控件

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()即可使用,如果希望自定义控件,可以参考:官方示例

示例

xml 复制代码
<!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>

看看地图上的效果吧!

总结

  • [ol.View](https://openlayers.org/en/v8.2.0/apidoc/module-ol_View-View.html)视图可以设置地图中心点、缩放、projection等;
  • ol.control控件有提供默认控件,也可在其基础上自定义开发;

掘金2023年度人气创作者打榜中,快来帮我打榜吧~

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek