vue+openlayers 开发一个卷帘图层控件

最新推荐文章于 2024-03-07 19:12:28 发布
最新推荐文章于 2024-03-07 19:12:28 发布
阅读量1.1k 收藏 9
点赞数 2
分类专栏： gis openlayers vue 文章标签： vue.js javascript 前端 gis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34447899/article/details/128671052
版权
gis 同时被 3 个专栏收录
7 篇文章 7 订阅
订阅专栏
openlayers
4 篇文章 0 订阅
订阅专栏
vue
2 篇文章 0 订阅
订阅专栏

vue+openlayers 开发一个卷帘图层控件

在这里插入图片描述

卷帘功能是gis项目中常见的一种基础功能，主要用于数据的叠加比对。在openlayers中实现卷帘图层并不复杂，下面开讲怎么做。

在vue中开发一个openlayers控件

开发openlayers控件主要使用ol/control/Control，openlayers中所有的control都是继承这个类。
这个类接收3个参数 element，target，render，我们关注element和target就可以，render暂时用不到。

new Control({
  element: 控件的dom元素,
  target: 控件创建位置的dom元素，当需要创建在地图元素之外时才需要设置这个,
})

在vue中，我们在template中创建面板，然后在mount中创建Control，通过refs将dom元素作为参数，就可以创建出一个自定义控件。

<template>
<div v-show="false">
	<div ref="myControl">...</div>
</div>
</template>
<script>
import Control from "ol/control/Control"
export default {
	...
	mounted(){
		//	创建openlayers的Map和view
		...
		let myControl = new Control({
		  element: this.$refs["myControl"],
		})
		map.addControl(myControl)
	}
}
</script>

卷帘功能原理

卷帘功能由两个部分组成，操作面板（分割线和按钮）和图层。
逻辑是按钮按下时拖动分割线，根据分割线当前位置控制图层显示部分。

先随便创建一个地图并添加一个图层

从官网示例复制的，数据服务都是公开的。

<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>
import "ol/ol.css"
import Map from "ol/Map"
import XYZ from "ol/source/XYZ"
import TileLayer from "ol/layer/Tile"
import View from "ol/View"
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import {Fill, Style} from 'ol/style.js';
export default {
  data() {
    return {}
  },
  computed: {},
  methods: {},
  mounted() {
    const layer = new TileLayer({
      source: new XYZ({
        attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' + 'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
        url: "https://server.arcgisonline.com/ArcGIS/rest/services/" + "World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
      }),
    })
    const style = new Style({
      fill: new Fill({
        color: "#eeeeee",
      }),
    })

    const vectorLayer = new VectorLayer({
      source: new VectorSource({
        url: "https://openlayers.org/data/vector/ecoregions.json",
        format: new GeoJSON(),
      }),
      style: function (feature) {
        const color = feature.get("COLOR") || "#eeeeee"
        style.getFill().setColor(color)
        return style
      },
    })
    const map = new Map({
      layers: [layer, vectorLayer],
      target: "map",
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    })
    // 为了后续使用方便将map放入this中
    this.map = map
  },
}
</script>

<style lang="scss">
#map {
  width: 1980px;
  height: 800px;
}
</style>

控制图层仅显示局部

实现方式与做地图裁切时相同，利用prerender和postrender时间来实现。
我们封装一下，放到method中方便后续调用。

export default {
  data() {
    return {
      swipeLayer: null
    }
  },
  computed: {},
  methods: {
	setSwipeLayer(layer) {
      this.unsetSwipeLayer()
      if (layer) {
        layer.on("prerender", this.prerender)
        layer.on("postrender", this.postrender)
        this.swipeLayer = layer
      }
    },
    unsetSwipeLayer() {
      if (this.swipeLayer) {
        this.swipeLayer.un("prerender", this.prerender)
        this.swipeLayer.un("postrender", this.postrender)
        this.swipeLayer = null
      }
    },
    prerender(e) {
      const ctx = e.context
      const hOrw = ctx.canvas.width
      const nVal = hOrw * 50 / 100 //仅显示一半
      ctx.save()
      ctx.beginPath()
      ctx.rect(0, 0, nVal, ctx.canvas.height)
      ctx.clip() // 裁剪

      this.map.render()
    },
    postrender(e) {
      const ctx = e.context
      ctx.restore()
    },
  },
  mounted() {
    ...
    this.setSwipeLayer(vectorLayer)
  },
}

此时再看地图应该只会显示一半，下面来创建分割线和按钮。

创建分割线和按钮，添加自定义控件

创建一个不可见的div来存放控件UI，这样在页面初始化时就不会出现面板闪一下的问题。

<template>
  <div>
    <div id="map"></div>
    <div v-show="false">
      <div
        class="ol-control ol-unselectable my-swipe"
        :style="{pointerEvents: isMoving?'auto':'none'}"
        ref="mySwipe"
        @mousemove="mouseMove"
        @mouseup="mouseUp"
      >
        <div
          class="my-swipe-line swipe-horizontal"
          :style="{left:swipeVal+'%',pointerEvents:isMoving?'none':'auto'}"
        >
          <span
            class="my-swipe-line-btn"
            :style="{pointerEvents:isMoving?'none':'auto'}"
            @mousedown="mouseDown"
          >
            <img :src="require('./change.png')" alt="拖动" />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
...
import Control from "ol/control/Control"
export default {
  data() {
    return {
      swipeLayer: null,
      isMoving: false,
      swipeVal: 50,
    }
  },
  computed: {},
  methods: {
	...
	mouseMove(e) {
      if (!this.isMoving) return
      const clientWidth = e.currentTarget.clientWidth
      const clientHeight = e.currentTarget.clientHeight
      const x = e.offsetX
      const y = e.offsetY
      if (x < 0 || x > clientWidth || y < 0 || y > clientHeight) return
      this.swipeVal = (x / clientWidth) * 100
    },
    mouseDown(e) {
      this.isMoving = true
    },
    mouseUp(e) {
      this.isMoving = false
    },
  },
  mounted() {
    ...
    // 创建卷帘控件
    this.swipeControl = new Control({
      element: this.$refs["mySwipe"],
    })
    map.addControl(this.swipeControl)
  },
}
</script>
<style lang="scss">
...
.my-swipe {
  width: 100%;
  height: 100%;
  z-index: 110;
  background: none !important;
  padding: 0;
  pointer-events: none;
  .my-swipe-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: white;
    .my-swipe-line-btn {
      position: relative;
      display: block;
      top: 50%;
      width: 20px;
      height: 30px;
      margin-left: -10px;
      background: white;
      border: 1px #efefef solid;
      border-radius: 3px;
      cursor: col-resize;
      img {
        vertical-align: middle;
        border-style: none;
      }
    }
  }
}
</style>

这一步创建出了控制界面，可通过鼠标拖动分割线。

将控件和图层关联起来

得益于vue的数据绑定，只需要修改prerender方法中的nVal部分就可以了。

export default {
  data() {
    return {
      swipeLayer: null
    }
  },
  computed: {},
  methods: {
    prerender(e) {
      ...
      const nVal = hOrw * this.swipeVal / 100 //根据分割线显示
      ...
    },
  },
  mounted() {
    ...
  },
}

完整代码

<template>
  <div>
    <div id="map"></div>
    <div v-show="false">
      <div
        class="ol-control ol-unselectable my-swipe"
        :style="{pointerEvents: isMoving?'auto':'none'}"
        ref="mySwipe"
        @mousemove="mouseMove"
        @mouseup="mouseUp"
      >
        <div
          class="my-swipe-line swipe-horizontal"
          :style="{left:swipeVal+'%',pointerEvents:isMoving?'none':'auto'}"
        >
          <span
            class="my-swipe-line-btn"
            :style="{pointerEvents:isMoving?'none':'auto'}"
            @mousedown="mouseDown"
          >
            <img :src="require('./change.png')" alt="拖动" />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "ol/ol.css"
import Map from "ol/Map"
import XYZ from "ol/source/XYZ"
import TileLayer from "ol/layer/Tile"
import View from "ol/View"
import GeoJSON from "ol/format/GeoJSON.js"
import VectorLayer from "ol/layer/Vector.js"
import VectorSource from "ol/source/Vector.js"
import { Fill, Style } from "ol/style.js"
import Control from "ol/control/Control"
export default {
  data() {
    return {
      swipeLayer: null,
      isMoving: false,
      swipeVal: 50,
    }
  },
  computed: {},
  methods: {
    setSwipeLayer(layer) {
      this.unsetSwipeLayer()
      if (layer) {
        layer.on("prerender", this.prerender)
        layer.on("postrender", this.postrender)
        this.swipeLayer = layer
      }
    },
    unsetSwipeLayer() {
      if (this.swipeLayer) {
        this.swipeLayer.un("prerender", this.prerender)
        this.swipeLayer.un("postrender", this.postrender)
        this.swipeLayer = null
      }
    },
    prerender(e) {
      const ctx = e.context
      const hOrw = ctx.canvas.width
      const nVal = (hOrw * this.swipeVal) / 100 //根据分割线显示
      ctx.save()
      ctx.beginPath()
      ctx.rect(0, 0, nVal, ctx.canvas.height)
      ctx.clip() // 裁剪

      this.map.render()
    },
    postrender(e) {
      const ctx = e.context
      ctx.restore()
    },
    mouseMove(e) {
      if (!this.isMoving) return
      const clientWidth = e.currentTarget.clientWidth
      const clientHeight = e.currentTarget.clientHeight
      const x = e.offsetX
      const y = e.offsetY
      if (x < 0 || x > clientWidth || y < 0 || y > clientHeight) return
      this.swipeVal = (x / clientWidth) * 100
    },
    mouseDown(e) {
      this.isMoving = true
    },
    mouseUp(e) {
      this.isMoving = false
    },
  },
  mounted() {
    const layer = new TileLayer({
      source: new XYZ({
        attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' + 'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
        url: "https://server.arcgisonline.com/ArcGIS/rest/services/" + "World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
      }),
    })
    const style = new Style({
      fill: new Fill({
        color: "#eeeeee",
      }),
    })

    const vectorLayer = new VectorLayer({
      source: new VectorSource({
        url: "https://openlayers.org/data/vector/ecoregions.json",
        format: new GeoJSON(),
      }),
      style: function (feature) {
        const color = feature.get("COLOR") || "#eeeeee"
        style.getFill().setColor(color)
        return style
      },
    })
    const map = new Map({
      layers: [layer, vectorLayer],
      target: "map",
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    })
    // 为了后续使用方便将map放入this中
    this.map = map

    this.setSwipeLayer(vectorLayer)
    // 创建卷帘控件
    this.swipeControl = new Control({
      element: this.$refs["mySwipe"],
    })
    map.addControl(this.swipeControl)
  },
}
</script>

<style lang="scss">
#map {
  width: 1980px;
  height: 800px;
}
.my-swipe {
  width: 100%;
  height: 100%;
  z-index: 110;
  background: none !important;
  padding: 0;
  pointer-events: none;
  .my-swipe-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: white;
    .my-swipe-line-btn {
      position: relative;
      display: block;
      top: 50%;
      width: 20px;
      height: 30px;
      margin-left: -10px;
      background: white;
      border: 1px #efefef solid;
      border-radius: 3px;
      cursor: col-resize;
      img {
        vertical-align: middle;
        border-style: none;
      }
    }
  }
}
</style>

延伸

代码逻辑比较简单，实际应用中通常会要求扩展一下功能，比如可以控制分割线哪一侧需要显示，卷动方向是水平还是垂直的，卷动图层要可修改等等。根据实际情况稍微改动一下就可以实现。
在这里插入图片描述

阿卡坤
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
Openlayers官方示例详解五之图层卷帘（Layer Swipe）
不睡觉的怪叔叔的博客
12-05 4583
  一、示例简介     在地图视口中构建一个卷帘，鼠标拉动这个卷帘，能够同时改变两个图层显示的大小。     图层卷帘效果： 二、代码详解 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewpo
vue+openlayers6实现卷帘功能（自定义滑块样式）
Swampis的博客
04-28 1142
话不多说直接贴代码，有需要的小伙伴可以拿去直接用。 <template> <div class="newmap"> <div class="map" id="map" onselectstart="return false"> <div id="swipeContainer" @mousemove="move"> <div id="swipeDiv">
openlayers 卷帘
最新发布
weixin_60592115的博客
03-07 861
注意 卷帘元素为map子集"></div></div>
【WebGIS初学到入职】（八）用OpenLayers实现图层卷帘效果
ReBeX
10-16 910
一、前言 图层卷帘可以做到一种地图视觉效果。能够轻易得做到展示、对比两份地图。 官网实例：Layer Swipe 参考博客：Openlayers官方示例详解五之图层卷帘（Layer Swipe） 二、开始 <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
全网最新版openlayers视频教程
02-27
学习关于二维地理图层渲染，投影转换，各种数据类型渲染，OGC服务，各种地图交互
openlayers实现卷帘功能
weixin_44614518的博客
09-08 1033
openlayers实现卷帘功能。
vue+openLayers入门教程
热门推荐
ScoloveCode的博客
09-14 2万+
介绍: OpenLayers官网 OpenLayers插件类型 可以理解为专门处理地图的一个库 其中有两大类 map和view,map是ol中的核心组件,初始化一副地图(map),时,至少需要一个可视化区域(view),一个或多个图层(layer)和一个地图加载的挂载点(target) 1.vue中使用Openlayers 注意:地图容器需要设置宽高,否则看不到初始化的地图效果 地图介绍 一.关于投影 ​ 1.投影,地球不是正圆的球体,是一个不规则的椭圆体,所以我们要是想让它展开在桌面上,就会发现地图都会和
Vue+Openlayer实现轨迹路线
~~
08-27 1万+
<template> <div> <div id="map" ref="map" style="width: 100vw; height: 100vh"></div> </div> </template> <script> import VectorLayer from "ol/layer/Vector"; import VectorSource from "ol/source/Vector"; im...
Openlayers+vue实现卷帘功能
fungis
08-25 1694
地图卷帘功能主要是通过控件元素的拖动 ，对地图图层渲染流程的控制。这里附上两种实现方法供大家参考。
vue+openlayers简单示例
10-19
一个Vue与Openlayers结合的应用示例，以组件的方式在Vue中使用openlayers地图，以及可以进行简单的地图配置
Vue+Openlayers自定义轨迹动画
01-18
本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码，供大家参考，具体内容如下 <a>OpenlayersTrack <div class=bar :s
vue3+vite+openlayers6实现绘制扇形及环形组件代码
08-05
内容概要：通过带着读者手写...阅读建议：此资源以开发绘制扇形及环形学习其原理地图容器，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
OpenLayers实现图层切换控件
10-14
主要为大家详细介绍了OpenLayers实现图层切换控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Openlayers 卷帘功能
weixin_38670190的博客
12-25 1588
卷帘 “卷帘”功能可以分为两部分： 控件元素的拖动。这里控件仿照ArcGIS for JS上的样式。 地图图层渲染流程的控制，对上层图层进行裁剪。 首先我们需要一个DOM组件作为拖动的“卷帘”，将其放在map容器内部，避免影响页面其他要素。 <div id="map" class="map"> <div id="swipeContainer"> <div id="swipeDiv"> <div class="ha
openlayers4、5之卷帘地图SWIPE MAP
gisdoer
09-18 1191
openlayers之卷帘地图SWIPE MAP 功能说明 **卷帘指，统一屏幕，左右或者上下同时看到两个图层，可以直观的进行对比。 通过滑块滑动控制显示比例** 原理 **地图渲染是绘制的canvas，卷帘实现原理是根据滑块值，设置地图显示比例，重新绘制canvas渲染地图范围** 详细教程及代码下载请访问 [查看](http://www.giserdqy.com/gis/opengis/ol4...
Openlayers笔记之实现卷帘查看功能
Spider_wang的博客
08-16 1313
在 Web GIS 的开发中，总是会遇到很多新奇的需求，比如卷帘查看功能。 卷帘查看是为了方便比较不同时间、不同类型的两张地图在同一地点的差异性，通过卷帘操作能够快速对比出两张地图的差异性。 1.实现思路 Openlayers API文档中提供了控制地图范围的接口(Extent)。通过加载两张地图，移动前端绘制的卷帘轴，实时获取卷帘轴当前的屏幕坐标（x, y)，并实时控制上面层级地图的显示范围，即可实现该功能。 2.具体实现 首先创建图层，加载两张在线地图： /* * 初始化地图 */ function.
227：vue+openlayers自定义js横向卷帘，图层名称跟着分割线移动
大剑师兰特的GIS世界
03-20 346
本示例演示如何在vue+openlayers项目中自定义js实现横向卷帘。这个示例中的功能包括开启关闭卷帘，选择显示的地图作为左边，另外一个作为右边，不能的选择，不能的切换效果。左右拉动按钮，可以看上下层的内容，文字跟着分割线来移动。
Openlayers2卷帘功能的实现
a18826265589的博客
07-18 397
概述： 在WebGIS开发中，经常会有用户提需求，要实现卷帘功能，卷帘功能主要是实现两张图之间的对比。在前文中，讲到了openlayers3以及Arcgis for js中卷帘的实现，在本文讲述如何在openlayers2中实现卷帘功能。 结果展示： 实现代码： 在此，扩展了一个名为Swipe的Control，Swipe的代码如下： [javascrip...
vue+openLayers 实现图层控制控件
06-02
要在 Vue 中使用 OpenLayers 实现图层控制控件，可以按照以下步骤进行操作： 1. 安装 OpenLayers 和 Vue： ``` npm install ol vue ``` 2. 在 Vue 中引入 OpenLayers： ```javascript import ol from 'ol' import 'ol/ol.css' ``` 3. 创建地图容器： ```html <template> <div ref="map" class="map"></div> </template> ``` 4. 在 Vue 的 mounted 钩子函数中创建地图： ```javascript mounted() { // 创建地图容器 const map = new ol.Map({ target: this.$refs.map, layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([116.3975, 39.9085]), zoom: 12 }) }); this.map = map; } ``` 5. 创建图层控制控件： ```html <template> <div ref="map" class="map"> <div class="ol-control ol-custom-control"> <div class="ol-custom-control-header">图层控制</div> <div class="ol-custom-control-body"> <div v-for="(layer, index) in layers" :key="index"> <input type="checkbox" :id="layer.name" v-model="layer.visible"> <label :for="layer.name">{{ layer.name }}</label> </div> </div> </div> </div> </template> ``` 6. 在 Vue 的 data 中定义图层数据和控件的状态： ```javascript data() { return { map: null, layers: [ { name: 'OSM', visible: true, layer: new ol.layer.Tile({ source: new ol.source.OSM() }) }, { name: 'Bing Maps', visible: false, layer: new ol.layer.Tile({ source: new ol.source.BingMaps({ key: 'your-bingmaps-api-key', imagerySet: 'Road' }) }) } ] } } ``` 7. 在 Vue 的 watch 中监听图层状态的变化并更新地图： ```javascript watch: { layers: { deep: true, handler(layers) { const map = this.map; map.getLayers().clear(); layers.forEach(layer => { if (layer.visible) { map.addLayer(layer.layer); } }); } } } ``` 通过以上步骤就可以在 Vue 中实现图层控制控件了。需要注意的是，在实际应用中，可以根据需要自定义控件的样式和布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值