openlayers+vue实现缓冲区

文章目录

  • 前言
  • 一、准备
  • 二、初始化地图
      • 1、创建一个地图容器
      • 2、引入必须的类库
      • 3、地图初始化
      • 4、给地图增加底图
  • 三、创建缓冲区
      • 1、引入需要的工具类库
      • 2、绘制方法
  • 四、完整代码
  • 总结

前言

缓冲区是地理空间目标的一种影响范围或服务范围,是对选中的一组或一类地图要素(点、线或面)按设定的距离条件,围绕其要素而形成一定缓冲区多边形实体,从而实现数据在二维空间得以扩展,后续也可以生成栅格进行叠加分析等。

简单来说，缓冲区就是影响范围，比如想看看自己小区附近10公里范围内有哪些加油站，这个以自己小区为中心，半径10公里的圆，就是一个缓冲区。

一、准备

本文已经预设建好了一个vue项目
接下来需要安装openlayers

npm install openlayers -- save

安装地图工具tur

npm install turf -- save

二、初始化地图

1、创建一个地图容器

<template><div style="width: 100vw; height: 100vh"><div id="map" style="height: 100%; width: 100%"></div></div>
</template>

2、引入必须的类库

<script>
// 引入地图库
import Map from 'ol/Map'
// 引入视图
import View from 'ol/View'
// 地图控件，例如放大、缩小、比例尺等
import { defaults as defaultControls } from 'ol/control'
// 地图瓦片
import { Tile as TileLayer } from 'ol/layer'
// 地图瓦片资源
import { WMTS } from 'ol/source'
// 地图瓦片网格
import WMTSTileGrid from 'ol/tilegrid/WMTS'
// 地图投影相关工具
import * as olProj from 'ol/proj'
// 获取地图范围工具
import { getWidth, getTopLeft } from 'ol/extent'
</script>

3、地图初始化

<script>
// 引入地图库
import Map from 'ol/Map'
// 引入视图
import View from 'ol/View'
// 地图控件，例如放大、缩小、比例尺等
import { defaults as defaultControls } from 'ol/control'
// 地图瓦片
import { Tile as TileLayer } from 'ol/layer'
// 地图瓦片资源
import { WMTS } from 'ol/source'
// 地图瓦片网格
import WMTSTileGrid from 'ol/tilegrid/WMTS'
// 地图投影相关工具
import * as olProj from 'ol/proj'
// 获取地图范围工具
import { getWidth, getTopLeft } from 'ol/extent'
export default {data() {return {// 地图对象map: null,// 地图中心center: [117.19637146504114, 39.084235071439096],}},mounted() {// 创建地图实例this.map = new Map({target: 'map',// 地图控件controls: defaultControls({attributionOptions: { collapsed: false },// 是否可旋转角度rotate: false}),// 视图view: new View({// 视图中心默认定位到哪里center: this.center,// 地图投影projection: 'EPSG:4326',// 缩放级别zoom: 13,minZoom: 2,maxZoom: 18})})}
}
</script>

4、给地图增加底图

<script>
// 引入地图库
import Map from 'ol/Map'
// 引入视图
import View from 'ol/View'
// 地图控件，例如放大、缩小、比例尺等
import { defaults as defaultControls } from 'ol/control'
// 地图瓦片
import { Tile as TileLayer } from 'ol/layer'
// 地图瓦片资源
import { WMTS } from 'ol/source'
// 地图瓦片网格
import WMTSTileGrid from 'ol/tilegrid/WMTS'
// 地图投影相关工具
import * as olProj from 'ol/proj'
// 获取地图范围工具
import { getWidth, getTopLeft } from 'ol/extent'
export default {data() {return {// 地图对象map: null,// 地图中心center: [117.19637146504114, 39.084235071439096],// 底图，本文实例用的是天地图免费图层，tk为天地图官网注册的key，大家自行注册basicLayer: [// 影像底图{// 具体可看https://openlayers.org/en/v6.15.1/apidoc/module-ol_source_WMTS-WMTS.htmlurl: `http://t3.tianditu.gov.cn/img_c/wmts?tk=key`, // 服务地址layer: 'img', // 图层名称matrixSet: 'c', // 矩阵集format: 'tiles', // 格式化成瓦片wrapX: true // 在水平方向上无限循环显示瓦片},// 影像注记，地图中的地点名称由此图层渲染{url: `http://t3.tianditu.gov.cn/cia_c/wmts?tk=key`,layer: 'cia',matrixSet: 'c',format: 'tiles',wrapX: true}]}},methods: {// 增加图层到地图addLayerToMap() {this.basicLayer.forEach((config, index) => {this.map.addLayer(this.initLayers(config, index + 1))})},// 初始化图层对象initLayers(config, index) {const projection = olProj.get('EPSG:4326')// 默认比例尺等相关配置const projectionExtent = projection.getExtent()const size = getWidth(projectionExtent) / 256const resolutions = new Array(18)const matrixIds = new Array(18)for (let z = 1; z < 19; ++z) {resolutions[z] = size / Math.pow(2, z)matrixIds[z] = z}let gridConfig = {origin: getTopLeft(projectionExtent),resolutions,matrixIds}// 网格const tileGrid = new WMTSTileGrid(gridConfig)// 创建瓦片资源let source = new WMTS(Object.assign({crossOrigin: 'anonymous',projection,tileGrid},config))// 创建图层对象return new TileLayer({source,projection,layerName: config.layer,index})},},mounted() {// 创建地图实例this.map = new Map({target: 'map',// 地图控件controls: defaultControls({attributionOptions: { collapsed: false },zoom: false,rotate: false}),view: new View({center: this.center,projection: 'EPSG:4326',zoom: 13,minZoom: 2,maxZoom: 18})})this.addLayerToMap()}
}
</script>

到此地图就算初始化成功
运行代码：
在这里插入图片描述

三、创建缓冲区

1、引入需要的工具类库

// 格式化GeoJSON
import { GeoJSON } from 'ol/format'
// 矢量图层资源
import { Vector as VectorSource } from 'ol/source'
// 矢量图层
import { Vector as VectorLayer } from 'ol/layer'
// 地图计算分析工具，例如绘制缓冲区、计算相交面、获取多边形中心等等
import * as turf from '@turf/turf'

2、绘制方法

createBuffer() {let options = {// 缓冲区的粒度steps: 60,// 缓冲区单位units: 'meters'}// 这里第一个参数为缓冲区的中心，第二参数为缓冲区的半径，第三个参数为缓冲区的生成参数let drawFeature = turf.circle(this.center, 300, options)//创建缓冲区let buffered = turf.buffer(drawFeature, 100, {units: 'kilometers',steps: 5})//创建数据geojson对象和数据源对象let format = new GeoJSON()let source = new VectorSource()//读取geojson数据let a = format.readFeature(drawFeature)// 将数据添加数据源的source.addFeature(a)// 设置缓冲区样式if (buffered) {let b = format.readFeature(buffered)source.addFeature(b)// 将缓冲区移入视图，padding为边距 this.map.getView().fit(b.getGeometry().getExtent(), { padding: [10, 10, 10, 10] })}//添加图层let bufferLayer = new VectorLayer({source: source,layerName: 'bufferLayer',zIndex: 3})this.map.addLayer(bufferLayer)}

还可以给缓冲区增加样式

在头部需要引入
// 地图样式相关，例如绘制圆形、设置笔触、多边形颜色、字体颜色等等
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style'// 在createBuffer方法中增加样式let a = format.readFeature(drawFeature)// 样式设置a.setStyle(new Style({stroke: new Stroke({color: 'rgba(255, 0, 0, 0.8)',width: 3}),fill: new Fill({color: 'rgba(255, 0, 0, 0.5)'}),image: new CircleStyle({// 点的颜色fill: new Fill({color: 'rgba(255, 0, 0, 0.8)'}),// 圆形半径radius: 5})}))// 设置缓冲区样式let b = format.readFeature(buffered)b.setStyle(new Style({stroke: new Stroke({color: '#2491ff',lineDash: [5, 5],width: 3}),fill: new Fill({color: 'rgba(176, 202, 241, 0.5)'})}))

效果如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c8d46a7a3327439cae40879050232bf4.png

四、完整代码

<template><div style="width: 100vw; height: 100vh"><div id="map" style="height: 100%; width: 100%"></div></div>
</template>
<script>
// 引入地图库
import Map from 'ol/Map'
// 引入视图
import View from 'ol/View'
// 地图控件，例如放大、缩小、比例尺等
import { defaults as defaultControls } from 'ol/control'
// 地图瓦片
import { Tile as TileLayer } from 'ol/layer'
// 地图瓦片资源
import { WMTS } from 'ol/source'
// 地图瓦片网格
import WMTSTileGrid from 'ol/tilegrid/WMTS'
// 地图投影相关工具
import * as olProj from 'ol/proj'
// 获取地图范围工具
import { getWidth, getTopLeft } from 'ol/extent'
// 格式化GeoJSON
import { GeoJSON } from 'ol/format'
// 矢量图层资源
import { Vector as VectorSource } from 'ol/source'
// 矢量图层
import { Vector as VectorLayer } from 'ol/layer'
// 地图样式相关，例如绘制圆形、设置笔触、多边形颜色、字体颜色等等
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style'
// 地图计算分析工具，例如绘制缓冲区、计算相交面、获取多边形中心等等
import * as turf from '@turf/turf'
export default {data() {return {// 地图对象map: null,// 地图中心center: [117.19637146504114, 39.084235071439096],// 底图，本文实例用的是天地图免费图层，tk为天地图官网注册的key，大家自行注册basicLayer: [// 影像底图{// 具体可看https://openlayers.org/en/v6.15.1/apidoc/module-ol_source_WMTS-WMTS.htmlurl: `http://t3.tianditu.gov.cn/img_c/wmts?tk=key`, // 服务地址layer: 'img', // 图层名称matrixSet: 'c', // 矩阵集format: 'tiles', // 格式化成瓦片wrapX: true // 在水平方向上无限循环显示瓦片},// 影像注记，地图中的地点名称由此图层渲染{url: `http://t3.tianditu.gov.cn/cia_c/wmts?tk=key`,layer: 'cia',matrixSet: 'c',format: 'tiles',wrapX: true}]}},methods: {// 增加图层到地图addLayerToMap() {this.basicLayer.forEach((config, index) => {this.map.addLayer(this.initLayers(config, index + 1))})},// 初始化图层对象initLayers(config, index) {const projection = olProj.get('EPSG:4326')// 默认比例尺等相关配置const projectionExtent = projection.getExtent()const size = getWidth(projectionExtent) / 256const resolutions = new Array(18)const matrixIds = new Array(18)for (let z = 1; z < 19; ++z) {resolutions[z] = size / Math.pow(2, z)matrixIds[z] = z}let gridConfig = {origin: getTopLeft(projectionExtent),resolutions,matrixIds}// 网格const tileGrid = new WMTSTileGrid(gridConfig)let source = new WMTS(Object.assign({crossOrigin: 'anonymous',projection,tileGrid},config))return new TileLayer({source,projection,layerName: config.layer,index})},/*** 创建缓冲区* shape: Point Line Square Circle Polygon* distance: 缓冲区距离，单位是千米* polygon: 根据已绘制的图形创建缓冲区* maxArea: 最大创建范围，超出后不再进行缓冲区查询*/createBuffer() {let options = {steps: 60,units: 'meters'}let drawFeature = turf.circle(this.center, 300, options)//创建缓冲区let buffered = turf.buffer(drawFeature, 100, {units: 'kilometers',steps: 5})//创建数据geojson对象和数据源对象let format = new GeoJSON()let source = new VectorSource()//读取geojson数据let a = format.readFeature(drawFeature)// 样式设置a.setStyle(new Style({stroke: new Stroke({color: 'rgba(255, 0, 0, 0.8)',width: 3}),fill: new Fill({color: 'rgba(255, 0, 0, 0.5)'}),image: new CircleStyle({// 点的颜色fill: new Fill({color: 'rgba(255, 0, 0, 0.8)'}),// 圆形半径radius: 5})}))// 设置缓冲区样式let b = format.readFeature(buffered)b.setStyle(new Style({stroke: new Stroke({color: '#2491ff',lineDash: [5, 5],width: 3}),fill: new Fill({color: 'rgba(176, 202, 241, 0.5)'})}))// 将数据添加数据源的source.addFeature(a)source.addFeature(b)// 将缓冲区移入视图，padding为边距this.map.getView().fit(b.getGeometry().getExtent(), { padding: [10, 10, 10, 10] })//添加图层let bufferLayer = new VectorLayer({source: source,layerName: 'bufferLayer',zIndex: 3})this.map.addLayer(bufferLayer)}},mounted() {// 创建地图实例this.map = new Map({target: 'map',controls: defaultControls({attributionOptions: { collapsed: false },zoom: false,rotate: false}),view: new View({center: this.center,projection: 'EPSG:4326',zoom: 13,minZoom: 2,maxZoom: 18})})this.addLayerToMap()this.createBuffer()}
}
</script>

总结

需要创建缓冲区首先需要初始化一个地图，一个地图需要有容器、控件（可选）、视图、图层来构成。

绘制缓冲区，这里借助工具turf.buffer来创建。
缓冲区的中心、半径和样式可以完全自定义，其中中心和半径，可以直接在创建时传入参数，自定义样式需要用到ol/style中的类，需要单独引入使用

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/649832.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++面试：散列表

C++面试：散列表

目录 1. 散列表的基本概念 散列表的定义 散列函数 哈希冲突 2. 处理冲突的方法 链地址法&#xff08;Separate Chaining&#xff09; 开放地址法 再散列 3. 散列表的性能分析 1. 平均查找长度&#xff08;ASL&#xff09; 2. 负载因子&#xff08;Load Factor&#…
阅读更多...
【Linux】-cp模型

【Linux】-cp模型

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …
阅读更多...
IS-IS：04 DIS

IS-IS：04 DIS

IS-IS 协议只支持两种网络类型&#xff0c;即广播网络和点到点网络。与 OSPF 协议相同&#xff0c; IS-IS 协议在广播网络中会将网络视为一个伪节点 &#xff08; Pesudonde&#xff0c;简称 PSN&#xff09;&#xff0c;并选举出一台DIS &#xff08;Designated IS&#xff09…
阅读更多...
ASP.NET Core 7 Web 使用Session

ASP.NET Core 7 Web 使用Session

ASP.NET Core 好像不能像20年前那样直接使用Session函数&#xff0c;我使用如下方法 1、在NuGet安装以下2个包 2、在Program.cs注册 //注册Session builder.Services.AddSession(options > {options.IdleTimeout TimeSpan.FromMinutes(60);options.Cookie.HttpOnly fals…
阅读更多...
CAN相关寄存器

CAN相关寄存器

1. CAN_ MCR&#xff1a;CAN主控制寄存器。主要负责CAN工作模式的配置。 CAN_BTR&#xff1a;位时序寄存器。用来设置分频/TBs1/TBs2/Tsw等参数&#xff0c;设置测试模式。 CAN_(T/R)IxR&#xff1a;标识符寄存器。存放&#xff08;待发送/接收)的报文ID、扩展ID、IDE位及RTR…
阅读更多...
如何快速搭建实用的爬虫管理平台

如何快速搭建实用的爬虫管理平台

目录 一、前言 二、选择合适的爬虫框架 三、搭建数据库 步骤1 步骤2 步骤3 四、搭建Web服务器 步骤1 步骤2 步骤3 步骤4 五、管理爬虫 六、总结 一、前言 爬虫是互联网数据采集的关键工具&#xff0c;但是随着数据量的增加和需求的多样化&#xff0c;手动运行和管…
阅读更多...
SIFT图像特征表述

SIFT图像特征表述

SIFT&#xff08;尺度不变特征变换&#xff09;是一种用于图像处理和计算机视觉领域的特征提取算法。其目的是检测和描述图像中的局部特征。SIFT特征对旋转、尺度缩放、亮度变化保持不变性&#xff0c;对视角变化、仿射变换、噪声也具有一定的稳健性。下面是SIFT特征提取的基本…
阅读更多...
计算机网络体系架构认知--网络协议栈

计算机网络体系架构认知--网络协议栈

文章目录 一.计算机网络分层架构各协议层和计算机系统的联系从整体上理解计算机网络通信计算机网络通信的本质 二.Mac地址,IP地址和进程端口号三.局域网通信与跨局域网通信局域网通信跨局域网通信全球互联的通信脉络 四.网络编程概述 一.计算机网络分层架构 实现计算机长距离网…
阅读更多...
12.Golang中类的表示与封装

12.Golang中类的表示与封装

目录 概述类的表示代码结果 类的封装代码结果 结束 概述 Golang中类的表示与封装 类的表示 代码 注释掉的代码&#xff0c;并不能拿来当赋值或获取值来使用。 package mainimport "fmt"// 类大写则代表&#xff0c;可以被其它包使用 type Hero struct {// 属性方法大…
阅读更多...
RHCE作业

RHCE作业

1.写一个脚本&#xff0c;完成如下功能 传递一个参数给脚本&#xff0c;此参数为gzip、bzip2或者xz三者之一 (1) 如果参数1的值为gzip&#xff0c;则使用tar和gzip归档压缩/etc目录至/backups目录中&#xff0c;并命名为/backups/etc-20160613.tar.gz&#xff1b; (2) 如果参…
阅读更多...
临紧光五行护盾

临紧光五行护盾

临紧光五行护盾基础名词解释 粒子系统仿真&#xff0c;离散事件系统设计临紧光五行护盾&#xff08;云藏山鹰临近光五行散射&#xff09;V-ATPase道装&#xff0c;意气实体过程光效集聚模拟器荀况数论云藏山鹰类型物粒子系统导引云藏山鹰类型物与冯诺依曼爆炸学物品分类表杨米尔…
阅读更多...
【华为 ICT HCIA eNSP 习题汇总】——题目集10

【华为 ICT HCIA eNSP 习题汇总】——题目集10

1、以下哪个动态路由协议不能应用在 IPv6 网络中&#xff1f; A、IS-IS B、RIPng C、BGP4 D、OSPFv3 考点&#xff1a;路由技术原理 解析&#xff1a;&#xff08;A&#xff09; IS-ISv6 是在 IPv6 环境下&#xff0c;IS-IS 协议进行了相应的扩展和改进&#xff0c;以适应 IPv6…
阅读更多...
项目风采展示【TRDa】

项目风采展示【TRDa】

桌面功能介绍&#xff1a; 1&#xff1a;支持本地音乐、三方音乐控制播放展示功能&#xff1b; 2&#xff1a;支持陀螺仪 3&#xff1a;支持蓝牙列表显示。
阅读更多...
STM32单片机的基本原理与应用（二）

STM32单片机的基本原理与应用（二）

单片机外部中断的基本原理 STM32 的每个 IO 都可以作为外部中断的中断输入口&#xff0c;这点也是 STM32 的强大之处。那么其中断是怎样实现的呢&#xff1f;其原理就是由GPIO口产生触发信号&#xff0c;通过NVIC中断控制器和EXTI外部中断控制器完成中断响应。使用外部中断可以…
阅读更多...
RabbitMQ问题总结

RabbitMQ问题总结

:::info 使用场景 异步发送&#xff08;验证码、短信、邮件。。。&#xff09;MySQL 和 Redis、ES 之间的数据同步分布式事务削峰填谷… ::: 如何保证消息不丢失 上图是消息正常发送的一个过程&#xff0c;那在哪个环节中消息容易丢失&#xff1f;在哪一个环节都可能丢失 生…
阅读更多...
opencv#32 可分离滤波

opencv#32 可分离滤波

滤波的可分离性 就是将一个线性滤波变成多个线性滤波&#xff0c;这里面具体所指的是变成x方向的线性滤波和y方向的线性滤波。无论先做x方向的滤波还是y方向滤波&#xff0c;两者的叠加结果是一致的&#xff0c;这个性质取决于滤波操作是并行的&#xff0c;也就是每一个图像在滤…
阅读更多...
vue3+echarts绘制某省区县地图

vue3+echarts绘制某省区县地图

vue3echarts绘制某省区县地图 工作中经常需要画各种各样的图&#xff0c;echarts是使用最多的工具&#xff0c;接近春节&#xff0c;想把之前画的echarts图做一个整合&#xff0c;方便同事和自己随时使用&#xff0c;因此用vue3专门写了个web项目&#xff0c;考虑之后不断完善…
阅读更多...
R12.2 EBS 修改 APPS 密码 详细步骤

R12.2 EBS 修改 APPS 密码 详细步骤

目录 前言准备修改步骤1.关闭应用层2.FNDCPASS 修改密码3. 运行 autoconfig4.单独启动 webLogic 服务5.登录weblogic&#xff0c;更新apps密码6.启动应用层7.验证 结尾 前言 本文的目的是修改 apps 密码&#xff0c;主要参考官方文档 metalink 1674462.1&#xff0c;请注意本文…
阅读更多...
Task04：DDPG、TD3算法

Task04：DDPG、TD3算法

本篇博客是本人参加Datawhale组队学习第四次任务的笔记 【教程地址】https://github.com/datawhalechina/joyrl-book 【强化学习库JoyRL】https://github.com/datawhalechina/joyrl/tree/main 【JoyRL开发周报】 https://datawhale.feishu.cn/docx/OM8fdsNl0o5omoxB5nXcyzsInGe…
阅读更多...
华为三层交换机之基本操作

华为三层交换机之基本操作

Telnet简介 Telnet是一个应用层协议,可以在Internet上或局域网上使用。它提供了基于文本的远程终端接口&#xff0c;允许用户在本地计算机上登录到远程计算机&#xff0c;然后像在本地计算机上一样使用远程计算机的资源。Telnet客户端和服务器之间的通信是通过Telnet协议进行的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023