Vue中openlayers使用jsts库做空间拓扑关系查询

Vue中openlayers使用jsts库做空间拓扑关系查询

JSTS是一个符合OGC规范的简单要素空间位置判定函数JavaScript库,JSTS也是Java类库JTS的一个接口,且与OpenLayer3具有互操作性。
目前原生的OpenLayers3并不支持空间拓扑关系查询,此类库可以作为重要的补充。通过此类库,可以判断多种空间几何的位置关系,最初建立这个工程的目的是为web地图应用提供一套完整的类库来处理和分析简单几何体,但jsts也可以作为一个独立的几何库。
jsts是利用原JTS java源码通过AST AST自动翻译转换而成并保持了该API,除了对IO相关的部分类进行了选择性的并手动移植使其支持WKT,GeoJSON和OpenLayers 3。

jsts官方文档:https://bjornharrtell.github.io/jsts/
openlayers文档中使用jsts示例:https://openlayers.org/en/latest/examples/jsts.html

npm安装

npm i jsts@2.9.3

jsts使用代码示例:

import {
	GeometryCollection,
	LineString,
	LinearRing,
	MultiLineString,
	MultiPoint,
	MultiPolygon,
	Point,
	Polygon,
} from 'ol/geom.js';
import {
	WKT
} from 'ol/format.js';
// 引入jsts
import * as jsts from 'jsts/dist/jsts.min.js';


	jstsPraser;

	format = new WKT();

	/**
	 * 初始化jsts的parser 
	 */
	innitParser() {
		const parser = new jsts.io.OL3Parser();
		parser.inject(
			Point,
			LineString,
			LinearRing,
			Polygon,
			MultiPoint,
			MultiLineString,
			MultiPolygon,
		);
		this.jstsPraser = parser;
	}

	/**
	 * 判断是不是简单图形
	 * @param feature
	 */
	isSimpleGeometry(feature) {
		return this.jstsPraser.read(feature.getGeometry()).isSimple();
	}

其他操作借鉴文档
jsts官方文档:https://bjornharrtell.github.io/jsts/
在这里插入图片描述

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
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
发出的红包

打赏作者

星月前端

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

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

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

打赏作者

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

抵扣说明:

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

余额充值