使用openlayers进行空间分析的方法——JSTS库的应用

最新推荐文章于 2024-03-15 09:30:23 发布
最新推荐文章于 2024-03-15 09:30:23 发布
阅读量4.4k 收藏 6
点赞数
分类专栏： openlayers GIS 前端 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaoyang89111/article/details/88814098
版权
GIS 同时被 3 个专栏收录
20 篇文章 0 订阅
订阅专栏
前端
17 篇文章 2 订阅
订阅专栏
openlayers
13 篇文章 3 订阅
订阅专栏

查看openlayers文档可以发现，openlayers中进行缓冲区分析的方法只有一个，这个方法只适合扩展矩形缓冲区，如果想扩展任意形状的缓冲区则需要用到JSTS。

ol.extent.buffer(extent, value, opt_extent)

 例如下面的例子实现了对点【0,0】扩展缓冲区

var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
var vectorPoint = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [pointFeature]
    })
});
var vectorBuffers = new ol.layer.Vector({
    source: new ol.source.Vector({})
});
var map = new ol.Map({
    layers: [vectorPoint, vectorBuffers],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});
var radius = 1000000;

function bufferit(radius) {
    var poitnExtent = pointFeature.getGeometry().getExtent();
    var bufferedExtent = new ol.extent.buffer(poitnExtent, radius);
    console.log(bufferedExtent);
    var bufferPolygon = new ol.geom.Polygon([
        [
            [bufferedExtent[0], bufferedExtent[1]],
            [bufferedExtent[0], bufferedExtent[3]],
            [bufferedExtent[2], bufferedExtent[3]],
            [bufferedExtent[2], bufferedExtent[1]],
            [bufferedExtent[0], bufferedExtent[1]]
        ]
    ]);
    console.log("bufferPolygon", bufferPolygon);
    var bufferedFeature = new ol.Feature(bufferPolygon);
    vectorBuffers.getSource().addFeature(bufferedFeature)
}

 

JSTS是一个符合OGC规范的简单要素空间位置判定函数JavaScript库，JSTS也是Java类库JTS的一个接口，且与OpenLayer具有互操作性。 下面是JSTS官方例子：
 

使用WKT format读取A和B两个点

var reader = new jsts.io.WKTReader()
var a = reader.read('POINT (-20 0)')
var b = reader.read('POINT (20 0)')
将A点和B点进行40单位的缓冲区分析
a = a.buffer(40)
b = b.buffer(40)

A和B进行相交分析

var intersection = a.intersection(b)
A异同B分析

var difference = a.difference(b)
A合并B

var union = a.union(b)
A、B对称异同
var symDifference = a.symDifference(b)

 参考http://bjornharrtell.github.io/jsts/

openlayers中也可以直接使用JSTS进行空间分析，如下面的例子：

<!DOCTYPE html>
<html>
  <head>
    <title>JSTS Integration</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://unpkg.com/jsts@2.0.2/dist/jsts.min.js"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="index.js"></script>
  </body>
</html>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {fromLonLat} from 'ol/proj';
import OSM from 'ol/source/OSM';
import VectorSource from 'ol/source/Vector';
import LinearRing from 'ol/geom/LinearRing';
import {Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon} from 'ol/geom';

var source = new VectorSource();
fetch('data/geojson/roads-seoul.geojson').then(function(response) {
  return response.json();
}).then(function(json) {
  var format = new GeoJSON();
  var features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});

  var parser = new jsts.io.OL3Parser();
  parser.inject(Point, LineString, LinearRing, Polygon, MultiPoint, MultiLineString, MultiPolygon);

  for (var i = 0; i < features.length; i++) {
    var feature = features[i];
    // convert the OpenLayers geometry to a JSTS geometry
    var jstsGeom = parser.read(feature.getGeometry());

    // create a buffer of 40 meters around each line
    var buffered = jstsGeom.buffer(40);

    // convert back from JSTS and replace the geometry on the feature
    feature.setGeometry(parser.write(buffered));
  }

  source.addFeatures(features);
});
var vectorLayer = new VectorLayer({
  source: source
});

var rasterLayer = new TileLayer({
  source: new OSM()
});

var map = new Map({
  layers: [rasterLayer, vectorLayer],
  target: document.getElementById('map'),
  view: new View({
    center: fromLonLat([126.979293, 37.528787]),
    zoom: 15
  })
});

运行结果如下： 

GISER_A
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Openlayers 空间分析--抽稀、缓冲分析、挖洞
linzi19900517的博客
05-09 2816
Openlayers 拓扑--联合、差异、相交、抽稀、缓冲、挖洞
Openlayers实例详解
08-09
本课程选取了OpenLayers一些具有典型代表性的实例进行详解。讲解实例过程中对涉及到的相关知识点进行穿插分析介绍，适合初学者对OpenLayers形成整体认识、树立学习信心。课程涉及到map、view、projection、layer、source、feature、style、overlay、control等组件的实例分析。
arcgis for js叠加栅格图层(Raster Layer)
左直拳的马桶_日用桶
11-21 6648
其实呢，这个问题或许与栅格图层（Raster Layer）关系并不十分大，也可能所有类型的图层都有这个问题，我对arcgis尚不十分了解，目前只在栅格图层遇到问题，所以先记下来，存疑。栅格图层啥问题呢？叠不出来，报错。比如，有这么个地图服务： 然后想直接叠加其中一个子图层（可见其类型为栅格图层）。代码如下：var layer = new ArcGISTiledMapServiceLayer("ht
jsts: JavaScript 时间线库
最新发布
gitblog_00039的博客
03-15 342
jsts: JavaScript 时间线库 jsts 是一个用于在 JavaScript 中处理时间线数据的库。它可以让你轻松地创建和管理时间线，并将其可视化。 功能和用途 jsts 支持以下功能： 创建和管理时间线数据。 在时间线上添加事件并设置其开始和结束时间。 自定义事件样式和行为。 可视化时间线，包括缩放、平移、拖动等操作。 通过 API 获取时间线上的事件数据。 jsts 可以用于以...
OpenLayers教程一：OpenLayers概述
热门推荐
不睡觉的怪叔叔的博客
05-30 10万+
目录 一、OpenLayers简介 二、OpenLayers的特征 三、OpenLayers的框架结构 一、OpenLayers简介 OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。 OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机...
OpenLayers入门，OpenLayers如何加载GeoJson多边形、线段、点和区域范围等数据并叠加到OpenLayers矢量图层上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-28 466
前面两章已经讲了OpenLayers如何加载GeoJson数据到矢量图层和webgl图层上，前面两章也是可以支持多边形、线段、点和区域范围灯数据加载的，只是没有设置样式，所以只能看到点，本章就相当于完整版本，可以将所有图形都详细展示出来。
OpenLayers实现根据经纬度范围在地图上定位并画出区域
第七天堂
03-29 6043
昨天完成了在页面上展现WMS服务地图。之后的业务是在地图上定位数据的显示区域。用于定位的元数据在新建时会初始化一个经纬度范围，定位的原理是根据这个经纬度范围确定在地图上显示的范围，并将区域用一个矩形框起来。由于是头一次做地图定位，走了很多的冤枉路。下面把过程记录下来，和大家一起分享。 尝试1：在得到经纬度（四个点，分别是东经，西经，南纬，北纬），根据上述的经纬度取区域中心点的经纬度，然后根据这个...
openlayers结合turf.js 做空间分析
popstarqq的博客
06-29 1936
turf.js是一个空间分析的gis库，封装了很多常用的空间计算，比如相交，缓冲，点在面内等等；在做gis开发的时候，gis渲染引擎结合该库非常方便，不需要自己动手做空间分析的相关计算；本文用openlayers结合turf.js做个简单的相交分析 1 具体思路 使用openlayers创建两个多边形，然后利用turf.js的turf.intersect方法做空间相交分析，得到两个多边形相交的几何部分，然后用openlayers绘制高亮凸显出来。 2 效果和代码如下 import * as .
openlayers——（一）缓冲区分析
xing_1209的博客
06-04 2755
缓冲区分析（一）turf坐标转换1. 问：2. 答：3. 最后实现：（二）查询和缓冲面相交的点1. 问：2. 答：3. 最后实现：（三）获取相交点（点集）中的坐标 （一）turf坐标转换 1. 问： turf.lineString(), turf.length() 必须是地理坐标系吗？？ 我用的是 3857坐标系，好像不行。 我想转换坐标系试一下，但是 坐标数据太多，转换出错了，代码没写对 怎么批量转换坐标系啊？？ 我只能搜到 transform() 这种方法 2. 答
OpenLayers结合Turf实现空间运算
dreamgis的专栏
09-27 953
Turf.js是MapBox公司研发的基于浏览器端的空间分析库，它使用JavaScript进行编写，通过npm进行包管理。Turf 原生支持 GeoJSON 矢量数据。空间运算可谓是空间分析的基础，Turf.js提供了大量的空间分析功能，包含了空间运算功能，本文参考OpenLayers与Turf集成的官方示例，使用示例数据和原生JavaScript，进行求交运算与缓冲区运算，并进行可视化。空间运算利用几何函数来接收输入的空间数据，对其进行分析，然后生成输出数据，输出数据为针对输入数据执行分析的派生结果。
缓冲区分析设计与实现
12-04
可对数据进行缓冲区分析处理，设置相应半径，查看区域范围内的结果
openlayers js库，最新版
07-20
最新版openlayers库，版本号4.6.4，外网下载可能速度过慢，有需要的朋友可以下载。
openlayers开发用到的js库.zip
11-03
openlayers开发用到的js库.zip
wegue:使用OpenLayers和Vue.js进行Webmapping应用程序的模板和组件
04-28
Wegue（带有OpenLayers和Vue.js的WebGIS） 使用OpenLayers和Vue.js进行Webmapping应用程序的模板和可重用组件 转到上的在线演示关于Wegue（的We b摹用的OpenLayers和V UE被）结合的功率和地理空间精明使轻量级电子...
OpenLayers-ol-Draw.js更改
01-11
OpenLayers-ol-Draw.js更改
已知三角形三点坐标求一边上的高（海伦公式和坐标推导）
chaoyang89111的博客
04-21 1万+
最近研究轨迹压缩算法，使用道格拉斯－普克算法进行压缩时，需要根据三点坐标求三角形的高，总结了下有下面两种方法： 1、根据海伦公式求面积 已知三点坐标可以求出三边长。然后根据下面的推导过程可以得出海伦公式： 根据求出的面积S和BC边的边长可以求出高AD。 2、直接根据坐标推导出面积（积分原理，适用于平面直角坐标系） 已知A(x1,y1),B(x2,y2),C(x3,y3) ,求A...
Echarts GL 3d地图初体验，浙江天地图作为底图mapbox
chaoyang89111的博客
05-31 1万+
网上看到一张图效果非常好，斜45度角模式的3d地图，用在大屏模式上非常有科技感，高端大气上档次。 于是，研究了下怎么做，发现Echarts GL能做出相似的描边3D效果，地图可以加载浙江天地图（如下图）。 下面更新代码： <!DOCTYPE html> <html> <head> <title>3D</title&gt...
人员走动轨迹展示——小人走动行走动画
chaoyang89111的博客
06-19 8081
曾想过把轨迹中人员行走做成动画效果，一直没找到好的办法，现在找到一个开源使用openlayers开发的动画，但是该动画是飞机飞行，需要稍作修改，将飞机换成小人的64向图。需要调整的部分为： 1、飞机不分左右，调整为人需要做相应修改 2、人员脚步切换跟向前走动速度需要匹配，不然会有些奇怪，像飘移一样。 另外： 1、文中的ol_ext.js是另外一个比较好用的openlayers插件。o...
在vue3+ts项目中使用OpenLayers
07-08
在Vue 3 + TypeScript项目中使用OpenLayers，您可以按照以下步骤进行操作： 1. 安装OpenLayers：使用npm或yarn安装OpenLayers库。在命令行中运行以下命令： ```bash npm install ol ``` 或 ```bash yarn add ol ``` 2. 创建一个Vue组件：在您的Vue 3项目中，创建一个新的Vue组件，用于显示地图。打开一个新的`.vue`文件，例如`Map.vue`。 ```vue <template> <div ref="mapContainer" class="map-container"></div> </template> <script lang="ts"> import { defineComponent, onMounted, ref } from 'vue'; import 'ol/ol.css'; import { Map, View } from 'ol'; export default defineComponent({ name: 'Map', setup() { const mapContainer = ref(null); onMounted(() => { const map = new Map({ target: mapContainer.value, view: new View({ center: [0, 0], zoom: 2, }), }); }); return { mapContainer, }; }, }); </script> <style scoped> .map-container { width: 100%; height: 400px; } </style> ``` 3. 在需要显示地图的组件中使用Map组件：在需要显示地图的父组件中，导入并使用Map组件。 ```vue <template> <div> <h1>My Map</h1> <Map /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import Map from './components/Map.vue'; export default defineComponent({ name: 'App', components: { Map, }, }); </script> ``` 现在，您可以在Vue 3 + TypeScript项目中使用OpenLayers来显示地图。请注意，这只是一个基本示例，您可以进一步探索OpenLayers文档来了解更多功能和用法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值