OpenLayers 3 内置交互

最新推荐文章于 2023-07-19 13:44:10 发布
最新推荐文章于 2023-07-19 13:44:10 发布
阅读量675 收藏
点赞数
分类专栏： OpenLayers 3 文章标签： OpenLayers 3 交互方式 DragRotate DragPan DragZoom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43521890/article/details/122942656
版权

OpenLayers 3 交互

一、OpenLayers 3 内置交互类

OpenLayers 3提供了最基本的地图放大，缩小，平移等功能，以满足用户浏览地图的需要。 这些功能都是内置的，实现类都放在包ol.interaction下面，可以通过官网API查询到。

交互类描述
旋转
ol.interaction.DragRotate按住alt+shift键，用鼠标左键拖动地图，就能让地图旋转
ol.interaction.PinchRotate两个手指旋转地图，针对触摸屏
平移
ol.interaction.DragPan鼠标或手指拖拽平移地图
ol.interaction.KeyboardPan使用键盘方向键平移地图
缩放
ol.interaction.DragZoom鼠标拖拽缩放，一般配合一个键盘按键辅助
ol.interaction.PinchZoom两个手指缩放地图，针对触摸屏
ol.interaction.KeyboardZoom使用键盘 + 和 - 按键进行缩放
ol.interaction.DoubleClickZoom鼠标或手指双击缩放地图
ol.interaction.MouseWheelZoom鼠标滚轮缩放地图

二、创建地图时设置交互

1、默认方式

在创建地图时，ol.interaction.defaults()这个函数用于返回默认的交互方式。默认的交互方式会开启所有的交互，可以旋转、平移、缩放

（1）map.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :地图交互默认设置</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>

<script>

    /**
     *  创建地图
     */
    new ol.Map({
	
		 // 不设置的情况下，默认会设置为ol.interaction.defaults()
        interactions: ol.interaction.defaults(), 

        // 设置地图图层
        layers: [

            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })

        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0,0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 0            // 设置地图显示层级为0
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    })

</script>
</body>
</html>
2、自定义交互

创建地图时自定义关闭指定的交互方式。

（1）map2.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :地图交互自定义</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>

<script>

    /**
     *  创建地图
     */
    new ol.Map({

        //false:禁用
        //true:启动（默认值）
        interactions: ol.interaction.defaults({
            dragRotate:false,           //按住alt+shift键，用鼠标左键拖动地图，就能让地图旋转；
            pinchRotate:false,          //两个手指旋转地图，针对触摸屏；

            dragPan:false,              //鼠标或手指拖拽平移地图；
            keyboardPan:false,          //使用键盘方向键平移地图；

            dragZoom:false,             //鼠标拖拽缩放，一般配合一个键盘按键辅助；
            pinchZoom:false,            //两个手指缩放地图，针对触摸屏；
            keyboardZoom:false,         //使用键盘 + 和 - 按键进行缩放；
            doubleClickZoom: false,     //鼠标或手指双击缩放地图；
            mouseWheelZoom: false,      //鼠标滚轮缩放地图;

        }),

        // 设置地图图层
        layers: [

            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })

        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0,0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 0            // 设置地图显示层级为0
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    })

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

三、动态设置地图交互

1、项目结构

在这里插入图片描述

2、map3.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :动态设置地图交互</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>
<div style="width: 1000px;margin: auto">
    <div>
        旋转:
    </div>
    <button onclick="setMapInteractions(1)">DragRotate</button>
    <button onclick="setMapInteractions(2)">PinchRotate</button>
    <div>
        平移:
    </div>
    <button onclick="setMapInteractions(3)">DragPan</button>
    <button onclick="setMapInteractions(4)">KeyboardPan</button>
    <div>
        缩放:
    </div>
    <button onclick="setMapInteractions(5)">DragZoom</button>
    <button onclick="setMapInteractions(6)">PinchZoom</button>
    <button onclick="setMapInteractions(7)">KeyboardZoom</button>
    <button onclick="setMapInteractions(8)">DoubleClickZoom</button>
    <button onclick="setMapInteractions(9)">MouseWheelZoom</button>
</div>

<script>

    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [

            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })

        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0, 0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 0            // 设置地图显示层级为0
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });



    /**
     *      设置地图交互
     *            //旋转
     *       1    DragRotate    //按住alt+shift键，用鼠标左键拖动地图，就能让地图旋转；
     *       2    PinchRotate   //两个手指旋转地图，针对触摸屏；
     *
     *           //平移
     *       3    DragPan   //鼠标或手指拖拽平移地图；
     *       4    KeyboardPan   //使用键盘方向键平移地图；
     *
     *           //缩放
     *       5    DragZoom    //鼠标拖拽缩放，一般配合一个键盘按键辅助；
     *       6    PinchZoom     //两个手指缩放地图，针对触摸屏；
     *       7    KeyboardZoom   //使用键盘 + 和 - 按键进行缩放；
     *       8    DoubleClickZoom   //鼠标或手指双击缩放地图；
     *       9    MouseWheelZoom  //鼠标滚轮缩放地图。
     *
     *
     */
    function setMapInteractions(index) {

        var interactions = null;

        var text = ''


        //获取地图交互对象，并遍历
        this.map.getInteractions().forEach(function (element, i, array) {

            if (interactions === null) {
                switch (index) {
                    case 1:
                        //判断交互对象是否属于DragRotate
                        //按住alt+shift键，用鼠标左键拖动地图，就能让地图旋转；
                        if (element instanceof this.ol.interaction.DragRotate) {
                            interactions = element;
                        }
                        text = "按住alt+shift键，用鼠标左键拖动地图，就能让地图旋转"
                        break;
                    case 2:
                        //判断交互对象是否属于PinchRotate
                        //两个手指旋转地图，针对触摸屏；
                        if (element instanceof this.ol.interaction.PinchRotate) {
                            interactions = element;
                        }
                        text = "两个手指旋转地图，针对触摸屏"
                        break;
                    case 3:
                        //判断交互对象是否属于DragPan
                        //鼠标或手指拖拽平移地图；
                        if (element instanceof this.ol.interaction.DragPan) {
                            interactions = element;
                        }
                        text = "鼠标或手指拖拽平移地图"
                        break;
                    case 4:
                        //判断交互对象是否属于KeyboardPan
                        //使用键盘方向键平移地图；
                        if (element instanceof this.ol.interaction.KeyboardPan) {
                            interactions = element;
                        }
                        text = "使用键盘方向键平移地图"
                        break;
                    case 5:
                        //判断交互对象是否属于DragZoom
                        //鼠标拖拽缩放，一般配合一个键盘按键辅助；
                        if (element instanceof this.ol.interaction.DragZoom) {
                            interactions = element;
                        }
                        text = "鼠标拖拽缩放，一般配合一个键盘按键辅助"
                        break;
                    case 6:
                        //判断交互对象是否属于PinchZoom
                        //两个手指缩放地图，针对触摸屏；
                        if (element instanceof this.ol.interaction.PinchZoom) {
                            interactions = element;
                        }
                        text = "两个手指缩放地图，针对触摸屏"
                        break;
                    case 7:
                        //判断交互对象是否属于KeyboardZoom
                        //使用键盘 + 和 - 按键进行缩放；
                        if (element instanceof this.ol.interaction.KeyboardZoom) {
                            interactions = element;
                        }
                        text = "使用键盘 + 和 - 按键进行缩放"
                        break;
                    case 8:
                        //判断交互对象是否属于DoubleClickZoom
                        //鼠标或手指双击缩放地图；
                        if (element instanceof this.ol.interaction.DoubleClickZoom) {
                            interactions = element;
                        }
                        text = "鼠标或手指双击缩放地图"
                        break;
                    case 9:
                        //判断交互对象是否属于MouseWheelZoom
                        //鼠标滚轮缩放地图。
                        if (element instanceof this.ol.interaction.MouseWheelZoom) {
                            interactions = element;
                        }
                        text = "鼠标滚轮缩放地图"
                        break;
                }
            }
        })

        //设置地图交互
        if (interactions != null) {

            var flag = interactions.getActive()
            interactions.setActive(!flag)

            flag = interactions.getActive()

            if (flag){
                console.log("开启："+text)
            }else{
                console.log("关闭："+text)
            }
            console.log("---------------------")


        }

    }

</script>
</body>
</html>
3、运行截图

在这里插入图片描述

大树下躲雨
关注
专栏目录
openlayers3要素移动交互并弹出要素信息
03-24
openlayers3中，显示点要素。当鼠标移动到要素上，高亮显示要素，并弹出要素信息。
openlayers3 基础（常见方法，类及实现）
06-18 672
　　　　ol3接口大全1.ol.Map类：（地图容器类） 　　　　实现： ol.Map(参数) 　　参数说明：1.1 target，说明地图所在的html元素、 　　　　　　　　如果没有指定，必须调用ol.Map类的setTarget（）方法以便绘制地图； 　　　　　　1.2 layers,指定加载的图层。 　　　　　　　　如果未定义，则将呈现不包...
OpenLayers3文档
05-09
openlayers3的文档，目前都是外文的，找了个中文的资料
OpenLayer 3 ：地图的交互
大树
12-09 978
OpenLayer 3 ：地图的交互 一、demo介绍 通过下方按钮，可对地图进行操作（上下左右移动,移动到指定坐标，地图层级放大缩小） 二、地图的交互 1、地图项目结构 2、map.html <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8">
OpenLayers 3 介绍
沈荣荣的博客
10-11 2780
OpenLayers 3 介绍 OpenLayers 3简称ol3，它是一个开源的Web GIS引擎，使用了JavaScript、最新的HTML5技术及CSS技术，支持dom，canvas和webgl三种渲染方式。除了支持网页端，还支持移动端（目前移动端还不成熟，有待进一步完善）。在地图数据源方面，支持各种类型的瓦片地图，既支持在线的，也支持离线的。比如OSM, Bing, MapBox,
OpenLayers3实现测量功能
10-14
OpenLayers3本身没有内置的测量控件，但它提供了必要的接口和几何对象支持，允许开发者通过编程方式实现测量功能。 首先，要在网页中实现测量功能，需要引入OpenLayers3的开发库。除此之外，为了优化用户体验，通常...
OpenLayers3实现图层控件功能
10-14
虽然OpenLayers 3没有直接提供内置的图层控件，但通过其丰富的API，我们可以自定义实现这一功能。下面我们将详细讲解如何使用OpenLayers 3来创建一个图层控件。 1. **前言** 在地图应用中，图层控件通常用于展示...
OpenLayers3实现对地图的基本操作
10-14
这些控件可以通过OpenLayers3的内置控件类来创建，例如`ol.control.Zoom`和`ol.control.Rotate`。此外，可以使用Bootstrap框架来创建自定义按钮并添加提示信息，通过CSS和JavaScript进行交互效果的实现。 4. **总结...
openlayers 3 源码
04-07
3. **控制与交互**：OpenLayers 3 提供了一系列内置的交互和控制，如缩放滑块、平移、旋转、测量工具等。开发者可以自定义交互行为，以满足特定需求。 4. **源（Source）**：数据源是图层的基础，负责加载地图数据...
openlayers3+geoserver地图交互
08-03
1，geoserver:地图服务器， 2，map_shp:地图shp 数据 （全国省界+县道） 3，GeoserverToolDemo： a绘点 b点击地图街道选中要素 c框选要素。
OpenLayers 3 地图框选 画多边形 获取坐标 实例
12-01
OpenLayers 3 地图框选 Draw 画多边形 Polygon 获取坐标
openlayers3入门教程
11-25
openlayers3入门教程是介绍openlayers3的入门教程
Openlayers3学习文档
07-10
openlayers3
openlayers3 简单示例
07-05
openlayers 3 示例代码 demo.html:基本的地图展示示例 - map-animation.html:地图动画效果示例 - map-zoom.html:地图基本缩放操作示例 - map-controls.html：地图控件显示的操作示例 - map-geojson.html: 加载geojson示例 - map-spy.html: 地图通透镜效果 - map-swipe.html:地图卷帘效果
Openlayers Interaction基础及重点内容讲解
大剑师兰特的GIS世界
07-03 217
在Openlayers中，需要用到一些设备行为来进行交互，这里面就惨生了一个概念Interaction。它是用来控制地图的。和控件一样的作用。不过它们的区别是控件触发都是一些可见的 HTML元素触发，如按钮、链接等，而交互功能不可见的，如鼠标双击、滚轮滑动，手机设备的手指缩放等。
Openlayers的交互功能（一）——新手教程
最新发布
m0_46410110的博客
07-19 722
OpenLayers是一个开源的，用来制作客户端交互式（interactive）地图的JavaScript类库，并且可以在绝大多数的浏览器中显示。由于OpenLayers是客户端的类库，所以不需要特殊的服务器端软件或设置。它的作用主要是用于展现数据并且提供相应的地图操作工具。官方API文档地址本文对OpenLayers进行了简单的介绍，同时说明了创建地图、加载控件、监听地图事件的操作方法。下一篇文章将继续对如何使用OpenLayers的交互功能进行说明，如对图斑的选中、添加、删除、编辑、平移等操作。
OpenLayers3的简单总结
huangzhixin1996的博客
05-06 1086
关于一些OpenLayers的概念，浅浅了解，有助于开发项目
arc engine 地图整饰的思路与流程
体验新模板
11-08 757
地图整饰的思路与流程 首先,鼠标交互选择图幅。用户在含有图幅索引图层的数据图上,用鼠标左击选择某幅图;然后系统通过空间检索,自动选定包含该图的标准图幅,据内外图廓间距扩展绘制出外图廓。同时根据左下角坐标生成方里网,并在地图上标注出方里网注记。再将接图表、图廓注记、比例尺和图号等图廓.整饰要素一一生成出来 。从而实现内外图廓、图外整饰信息的统一自动生成,完成地图的自动化整饰。对于任意范围图形整饰,主要考虑到用户的需求。用户有时需要对感兴趣的某些区域地图整饰输出.然后获取该区.域范围的四角坐标。以左下角点最小坐
使用OpenLayers管理地图交互控件
这个库提供了许多内置的控件，如平移、缩放、显示总览图以及编辑地理要素等，这些控件增强了用户与地图的交互体验。 `ol.Map` 类是OpenLayers的核心，它负责管理地图的各个方面，包括图层（layers）和控件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大树下躲雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值