在Openlayer中理解特性(Feature)的运用与实现
最编程
2024-07-23 18:42:29
...
注意:feature中不能直接getSource(),layer才可以直接getSource()。但是可以通过自己封装函数来实现通过feature获取layer。feature可以直接getGeometry()
基本用法:
<template>
<div id="map" style="height: 100vh; width: 100vw"></div>
</template>
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import { Point, LineString, Polygon } from "ol/geom";
export default {
data() {
return {
map: {},
vectorLayer: {},
};
},
created() {},
mounted() {
this.initMap();
this.addLayer();
},
computed: {},
methods: {
initMap() {
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
projection: "EPSG:4326",
center: [104.2979180563, 30.528298024],
zoom: 18,
}),
});
},
addLayer() {
this.vectorLayer = new VectorLayer({
source: new VectorSource(),
});
this.vectorLayer.getSource().addFeature(
//添加点图层
new Feature({
geometry: new Point([104.2979180563, 30.528298024]),
})
//添加线图层
// new Feature({
// geometry: new LineString([
// [104.2979180563, 30.528298024],
// [104.2987389704, 30.527798338],
// ]),
// })
//添加面图层
// new Feature({
// geometry: new Polygon([
// [
// [104.2979180563, 30.528298024],
// [104.2987389704, 30.527798338],
// [104.2974397847, 30.5265062907],
// [104.2979180563, 30.528298024],
// ],
// ]),
// })
);
this.map.addLayer(this.vectorLayer);
},
},
};
</script>
引入:
import { Feature } from "ol";
import { Point, LineString, Polygon } from "ol/geom";
创建点要素Point:
let feature = new Feature({
geometry: new Point([104.2979180563, 30.528298024]),
});
或者:
let feature = new Feature(new Point([104.2979180563, 30.528298024]));
创建线要素LineString:
let feature = new Feature({
geometry: new LineString([
[104.2979180563, 30.528298024],
[104.2987389704, 30.527798338],
]),
});
动态添加坐标:
let geometry = new LineString(); //线,Point 点,Polygon 面
let coordinate = [
[105.6005859375, 30.65681556429287],
[107.95166015624999, 31.98944183792288],
];
function addPonitToGeometry(arr) {
for (let i = 0; i < arr.length; i++) {
geometry.appendCoordinate(arr[i]);
}
}
addPonitToGeometry(coordinate);
let LineStringFeature = new Feature(geometry);
创建面要素Polygon:
let feature = new Feature({
geometry: new Polygon([
[
[106, 33],
[108.03955078125, 32.2313896627376],
[108.25927734375, 33.15594830078649],
[106, 33],
],
]),
});
给feature设置id
feature.setId(xxx)
获取feature的id
feature.getId()
通过feature的id获取feature
source.getFeatureById(xxx)
添加feature:
source.addFeature(xxx)
移除feature:
source.removeFeature(xxx)
数据源source中遍历所有要素feature:
source.forEachFeature(feature=>{})
数据源source中获取features数组:
source.getFeatures()
geojson中获取features数组:
import GeoJSON from "ol/format/GeoJSON";
geojsonData: {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [0, 0],
},
},
],
},
let features = new GeoJSON().readFeatures(this.geojsonData)
给feature动态设置文本text
change() {
this.feature
.getStyle()
.getText()
.setText("哈哈哈");
this.feature.changed();
}
给feature设置样式style
feature.setStyle(new Style(xxx))
根据feature获取geometry
feature.getGeometry()
将feature置于视图中心-fly飞行
this.map.getView().fit(feature.getGeometry(), {
duration: 1000,
padding: [100, 100, 100, 100],
});
根据feature获取geometry类型:
feature.getGeometry().getType()
如:Point、LineString、Polygon等
给feature设置指定属性
feature.set("xx",xx)
给feature设置多个属性
feature.setProperties(Object)
获取feature中的指定属性
获取feature要素后,可以直接通过feature.get('属性名')来获取geojson中该feature的属性值
获取feature中的所有属性
或者通过feature.getProperties()来获取geojson中该feature的所有的属性值,返回包含属性值的一个对象
获取feature的中点
let extent = feature.getGeometry().getExtent();
let center = ol.extent.getCenter(extent);
通过feature获取layer
适用于点要素和面要素,而线要素还有待研究。
参考:Openlayers通过feature获取Layer以及通过点获取线feature_openlayers getlayers_一又的博客-****博客
import {Vector as VectorSource } from "ol/source";
//根据feature获取layer
getLayer(feature = {}, map = {}) {
let layers = map.getLayers().getArray();
for (let i in layers) {
let source = layers[i].getSource();
if (source instanceof VectorSource) {
let features = source.getFeatures();
if (features.length > 0) {
for (let j in features) {
if (features[j] === feature) {
return layers[i];
}
}
}
}
}
return {};
},
上一篇: 轻松入门Git Flow:基础教程解析
推荐阅读
-
【摩尔线程+Colossal-AI强强联手】MusaBert登上CLUE榜单TOP10:技术细节揭秘 - 技术实力:摩尔线程凭借"软硬兼备"的技术底蕴,让MusaBert得以从底层优化到顶层。其内置多功能GPU配备AI加速和并行计算模块,提供了全面的AI与科学计算支持,为AI推理和低资源条件下的大模型训练等场景带来了高效、经济且环保的算力。 - 算法层面亮点:依托Colossal-AI AI大模型开发系统,MusaBert在训练过程中展现出了卓越的并行性能与易用性,特别在预处理阶段对DataLoader进行了优化,适应低资源环境高效处理海量数据。同时,通过精细的建模优化、领域内数据增强以及Adan优化器等手段,挖掘和展示了预训练语言模型出色的语义理解潜力。基于MusaBert,摩尔线程自主研发的MusaSim通过对比学习方法微调,结合百万对标注数据,MusaSim在多个任务如语义相似度、意图识别和情绪分析中均表现出色。 - 数据资源丰富:MusaBert除了自家高质量语义相似数据外,还融合了悟道开源200GB数据、CLUE社区80GB数据,以及浪潮公司提供的1TB高质量数据,保证模型即便在较小规模下仍具备良好性能。 当前,MusaBert已成功应用于摩尔线程的智能客服与数字人项目,并广泛服务于语义相似度、情绪识别、阅读理解与声韵识别等领域。为了降低大模型开发和应用难度,MusaBert及其相关高质量模型代码已在Colossal-AI仓库开源,可快速训练优质中文BERT模型。同时,通过摩尔线程与潞晨科技的深度合作,仅需一张多功能GPU单卡便能高效训练MusaBert或更大规模的GPT2模型,显著降低预训练成本,进一步推动双方在低资源大模型训练领域的共享目标。 MusaBert荣登CLUE榜单TOP10,象征着摩尔线程与潞晨科技联合研发团队在中文预训练研究领域的领先地位。展望未来,双方将携手探索更大规模的自然语言模型研究,充分运用上游数据资源,产出更为强大的模型并开源。持续强化在摩尔线程多功能GPU上的大模型训练能力,特别是在消费级显卡等低资源环境下,致力于降低使用大模型训练的门槛与成本,推动人工智能更加普惠。而潞晨科技作为重要合作伙伴,将继续发挥关键作用。
-
理解与实现:FPN(特征金字塔网络)在语义分割中的工作机制与代码解析
-
在Java中,理解锁方法(Lock): lock与tryLock的实战运用
-
在CSS中理解并运用子元素的绝对定位与父级元素的相对定位(子绝父相)
-
形象理解:BFS在FloodFill图像渲染算法中的应用(LeetCode实战解析) - 序章:算法积累与实现
-
理解工作流:自动化业务流程管理与Activiti实践" **简述** 工作流(Workflow)是一种利用电脑技术自动化管理业务流程的方式,让不同参与者按既定路径执行任务,确保文档、信息或任务在预设规则下顺利传递,最终达成期望的业务目标。 **核心概念** - **工作流自动化**: 计算机驱动业务流程处理与执行,如在参与者间自动传递文档和任务。 - **目标与应用**: 管理工作流程确保按时、由合适的人执行,同时允许人工介入以增强灵活性。 - **工作流框架示例**: Activiti、JBPM、OSWorkflow 和 Workflow,它们背后通常依赖数据库支持。 - **关键组件**: ProcessEngine 在 Activiti 中扮演核心角色,负责流程实例创建、数据管理和流程监控。 **相关领域** - **业务流程管理 (BPM)**: 一种系统性方法论,聚焦于构建并优化端到端卓越业务流程以提升企业业绩,在EMBA、MBA等商业课程中得到关注。 - **业务流程建模与标记语言 (BPMN)**: 用于绘制业务流程图的工具,探讨其在不同场景下的应用精确度、标准化价值以及未来发展愿景。 **辅助术语** - 流对象 (Flow Objects): BPMN 中用于描述流程中活动、决策、序列和其他元素的具体实现单元。
-
【2022新手指南】Java编程进阶之路 - 六、技术架构篇 ### MySQL索引底层解析与优化实战 - 你会讲解MySQL索引的数据结构吗?性能调优技巧知多少? - Redis深度揭秘:你知道多少?从基础到哨兵、主从复制全梳理 - Redis持久化及哨兵模式详解,还有集群搭建和Leader选举黑箱打开 - Zookeeper是个啥?特性和应用场景大公开 - ZooKeeper集群搭建攻略及 Leader选举、读写一致性、共享锁实现细节 - 探究ZooKeeper中的Leader选举机制及其在分布式环境中的作用 - Zab协议深入剖析:原理、功能与在Zookeeper中的核心地位 - RabbitMQ全方位解读:工作模式、消费限流、可靠投递与配置策略 - 设计者视角:RabbitMQ过期时间、死信队列与延时队列实践指南 - RocketMQ特性和应用场景揭示:理解其精髓与差异化优势 - Kafka详细介绍:特性及广泛应用于实时数据处理的场景解析 - ElasticSearch实力揭秘:特性概述与作为搜索引擎的广泛应用 - MongoDB认知升级:非关系型数据库的优势阐述,安装与使用实战教学 - BIO/NIO/AIO网络模型对比:掌握它们的区别与在网络编程中的实际应用 - Netty带你飞:理解其超快速度背后的秘密,包括线程模型分析 - 网络通信黑科技:Netty编解码原理与常用编解码器的应用,Protostuff实战演示 - 解密Netty粘包与拆包现象,怎样有效应对这一常见问题 - 自定义Netty心跳检测机制,轻松调整检测间隔时间的艺术 - Dubbo轻骑兵介绍:核心特性概览,服务降级实战与其实现益处 - Dubbo三大神器解读:本地存根与本地伪装的实战运用与优势呈现 ----------------------- 七、结语与回顾
-
从错误中学C/C++:理解指针在传值与传址中的运用——第6.6节
-
C++编程:实战教程 - 实现栈与队列(Deque) 容器适配器,探讨Stack和Queue的实现及Queueue(Deque)的问题。深入理解:如何模拟实现Priority Queue (优先级队列) - 实例与练习。续集:仿函数在C++中的二次探索
-
在Openlayer中理解特性(Feature)的运用与实现