openlayers+vue实现缓冲区

已于 2024-01-26 18:16:43 修改
阅读量1k 收藏 6
点赞数 9
分类专栏： 地图 vue 天地图 文章标签： vue.js 前端 arcgis
于 2024-01-26 18:09:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yu_Jian_Qt/article/details/135869232
版权
vue 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
地图
5 篇文章 0 订阅
订阅专栏
天地图
2 篇文章 0 订阅
订阅专栏

文章目录

前言

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

简单来说，缓冲区就是影响范围，比如想看看自己小区附近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.html
          url: `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) / 256
      const 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.html
          url: `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) / 256
      const 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中的类，需要单独引入使用

YUJIAN。
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Openlayers实例详解
08-09
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
openlayers+turf.js实现缓冲区的绘制
gis_sss的博客
10-30 8503
一、下载安装turf 下载地址：https://github.com/Turfjs/turf api和示例地址：http://turfjs.org/docs/ 二、使用openlayers配个turf.js (1) 点数据的缓存 //创建缓冲数据 var point = turf.point([114.2058,33.2469]); var buffered = turf.buf...
openlayers+turf实现自定义缓冲区绘制（vue）
最新发布
m0_73548338的博客
05-28 215
openlayers+turf实现自定义缓冲区绘制
如何基于openlayers绘制点、线、面各类要素缓冲区
HeyLoong的博客
06-15 1038
然而官方demo对于如何绘制缓冲区未详细说明。
OpenLayers6（8）：引入Turf.js做缓冲区分析
碰碰的博客
05-12 1904
1 版本 OpenLayers：6.14.1 2 相关配置 //前端的地理空间分析库，处理各种地图算法 npm i @turf/turf 3 Openlayers图形与图形Turf之间的互相转换 使用策略模式进行实现： /** * 策略模式，不同类型返回不同的Turf几何图形 */ export const mCoords2TurfGeom = { Point: function (coords) { return turf.point(coords);
openlayers——（一）缓冲区分析
xing_1209的博客
06-04 2862
缓冲区分析（一）turf坐标转换1. 问：2. 答：3. 最后实现：（二）查询和缓冲面相交的点1. 问：2. 答：3. 最后实现：（三）获取相交点（点集）中的坐标 （一）turf坐标转换 1. 问： turf.lineString(), turf.length() 必须是地理坐标系吗？？ 我用的是 3857坐标系，好像不行。 我想转换坐标系试一下，但是 坐标数据太多，转换出错了，代码没写对 怎么批量转换坐标系啊？？ 我只能搜到 transform() 这种方法 2. 答
openlayers 不规则polygon 按一定范围扩大边界
08-14
openlayers 不规则polygon 按一定范围扩大边界，利用turf.js 缓冲区 buffer ,两行代码实现。输入指定半径要素计算缓冲区，支持的单位是英里、公里和度。
Openlayers轨迹回放功能源码
01-14
还可以使用缓冲区来平滑点之间的连接，使轨迹看起来更自然。 在提供的压缩包文件"OpenlayersTrack_1610568016"中，可能包含了实现以上步骤的源代码示例。通过学习和理解这些代码，你可以深入掌握如何在OpenLayers中...
GISpub
03-31
JavaScript库如OpenLayers、Leaflet或Esri的ArcGIS API等，可能被用到了这个项目中，它们提供了丰富的地图功能，如地图加载、图层控制、标记添加、地理编码、缓冲区分析等。 首先，我们需要了解JavaScript的基础，...
Maherdana.github.io
07-04
7. **地理分析**：可能包括简单的空间分析功能，如缓冲区分析、距离计算等。 8. **前端框架**：可能结合React、Vue或Angular等前端框架构建更复杂的WebGIS应用。 9. **响应式设计**：为了适应不同设备和屏幕尺寸，...
缓冲区分析设计与实现
12-04
可对数据进行缓冲区分析处理，设置相应半径，查看区域范围内的结果
SuperMap iClient for JavaScript开发教程_javascript_SuperMap开发教程_supe
10-02
你可以学习如何通过服务获取和编辑地理数据，进行缓冲区分析、空间叠加、距离测量等空间操作。此外，还支持动态投影和空间索引，提升地图操作的效率。 **5. 地图控件与交互设计** 地图控件包括缩放、平移、全屏、...
openlayer调用turf进行空间数据分析实例
pdw521的专栏
02-09 2895
openlayer调用turf进行空间数据分析实例turf处理的数据格式为GeoJson，所以在前端在进行空间数据分析前要将数据进行转换。本人简单实现在OL中调用Turf功能，希望能给进行前端空间数据处理及分析的朋友提供参考。具体如下：1.引入turf脚本库&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head runat="server...
Openlayers 教程 34 - 前端空间分析（抽稀、缓冲分析、挖洞、差异、相交等）
linzi19900517的博客
05-09 3079
Openlayers 拓扑--联合、差异、相交、抽稀、缓冲、挖洞。
openlayers使用turf完成点线周边缓冲分析
小水滴的博客
06-23 777
openlayers使用turf完成点线周边缓冲分析
Vue + Openlayers入门教程（四）：Turf.js 实现缓冲区分析功能
菜鸟的博客
06-29 453
点击加载缓冲区数据，即在地图上显示预先设定好的分析数据源，点击缓冲区分析，即会对分析数据源进行缓冲区分析。
openlayers+vue 实现弹窗
09-08
在OpenLayers中通过Vue实现弹窗的过程如下： 1. 首先，在Vue项目中引入OpenLayers和相关的样式文件。 2. 在Vue组件中创建地图容器，并引入OpenLayers的Map和Overlay对象。通过ref属性获取到这些对象的引用。 3. 定义一个方法来创建并显示弹窗。该方法可以接受参数，例如要显示的内容、弹窗的位置等。 4. 在Vue的生命周期钩子函数中，使用OpenLayers的Map对象获取地图容器的大小，然后将地图容器的大小设置给Overlay对象，用于计算弹窗的位置。 5. 在Vue组件中使用v-on指令绑定一个点击事件，当用户点击地图上的某个要素时，调用弹窗的方法，并传入要显示的内容等参数。 6. 在弹窗的方法中，首先通过Map对象获取到当前点击的要素的位置信息，并将其转换为地理坐标。然后创建一个Overlay对象，将弹窗的内容放置在该对象之内。 7. 最后，使用Overlay对象的方法将其添加到地图上，并设置显示。 需要注意的是，具体的代码实现会有一些细微的差别，取决于你使用的OpenLayers和Vue的版本，以及你实际项目中的需求和设计。上述步骤仅为一个大致的指引，你可以根据实际情况进行调整和修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值