OpenLayers绘制图形

2023-10-27

OpenLayers的显示构成由外向内为:

  1. ol.Map:地图对象。
  2. ol.layer.Vector:图层对象layer。Map含有多个layer,最终的显示效果是由多个layer叠加而成。
  3. ol.source.Vector和ol.style.Style:

一个layer由两部分构成:数据源source和样式style。其含义是,该layer下所有的图形都使用同样的绘制样式。

  • ol.source.Vector:数据源,提供该layer下所有的图形信息。
  • ol.style.Style:绘制样式,为该layer下所有的图形共用。具体见后面ol.style.Style详解。
  1. ol.Feature:要素,即图形。一个source下含多个Feature。Feature是所有图形的一个封装,具体代表什么图形由内部的geometry参数决定。
  2. ol.geom.Geometry:具体图形,决定了一个Feature具体代表什么图形。其类型有:
    • ol.geom.Point:点。
    • ol.geom.LineString:线。
    • ol.geom.Circle:圆。
    • ol.geom.LinearRing:线性环。
    • ol.geom.MultiPoint:多点。
    • ol.geom.MultiLineString:多线。
    • ol.geom.MultiPolygon:多面。
    • ol.geom.Polygon:多边形。

其结构如下:

 

因此,要绘制一个点,其过程为:

  1. 调用new ol.geom.Point来创建一个geometry对象。
  2. 将geometry对象作为属性,调用new ol.Feature来创建一个Feature。
  3. 多个Feature构成一个features数组,作为属性,调用new ol.source.Vector来创建一个source
  4. 调用new ol.style.Style来创建一个style。
  5. 将3和4中创建的source和style作为属性,调用来new ol.layer.Vector创建一个layer。
  6. 将layer作为属性,调用new ol.Map来创建Map。

若要清空一个layer的所有图形,那么获取该layer的source,然后调用source.clear()即可。

 

ol.style.Style详解

一个layer由两部分构成:数据源source和样式style。

其中,style即ol.style.Style,指明了各个类型的要素所使用的样式。其属性为:

  • geometry:要素的属性/要素/返回一个地理要素的函数,用来渲染成相应的地理要素。一般与image属性配合使用,用于定义image要显示的位置。
  • fill:填充要素的样式。只有一个color属性。其格式为:

color: 'rgba(255, 125, 125, 0.5)'

  • image:图片样式,类型为 ol.style.Image,也可设置为ol.style.Image的两个派生类:ol.stylel.Circleol.style.Icon。然而,image属性并不仅仅对图片生效。默认image会对整个layer的要素生效。例如将image赋值为ol.style.Circle,那么point要素会渲染成一个圆。
  • stroke:要素边界样式,类型为 ol.style.Stroke。主要属性为color和width。
  • text:要素文字的样式,类型为 ol.style.Text。主要配合ol.geom.Point在指定位置显示文本。文本内容由ol.style.Text.text属性控制。因此,若多个点共享同一个style,那么这些点显示的文本是相同的。若要每个点显示不同的文本,需要每个Feature单独设置自己的style。
  • zIndex:z轴次序。用于layer的上下堆叠。

也就是说,一个ol.style.Style对象,是由多个ol.style.XXX组成。所以一个ol.style.Style对象就涵盖了各个类型要素的显示方式。

因此,一个layer只需要设置一个ol.style.Style,然后该layer下的所有要素就会按ol.style.Style中定义的对应类型style来进行渲染,即

若非常确定一个layer下不会显示某些类型的要素,例如text,那么可以不为ol.style.Style设置对应的属性。

ol.style.Style是layer的全局属性,对layer的所有要素生效。但每个feature也可以调用setStyle()来设置自己的style。

例如:

对一个ol.geom.Point而言,fillstroke属性是无效的,其最主要的style是image属性。将image属性设为ol.stylel.Circle,则该点会显示为一个圆;将image属性设为ol.style.Icon,则该点会显示为一个图标。

对一个ol.geom.Circle而言,最主要的style属性是fillstroke,这两个属性决定了圆的内部颜色和外侧轮廓。而image属性则是无效的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

OpenLayers绘制图形 的相关文章

  • VINS-Mono详解(1)——feature_tracker部分

    前言 视觉 IMU融合的优势 xff1a 1 视觉可以帮助IMU消除积分漂移和校正IMU的Bias xff1b 2 借助IMU可以帮助视觉系统提升输出频率 xff1b 3 IMU可帮助单目解决尺度不可观的问题 xff0c 帮助双目减少尺度上
  • 【LightGBM】feature_importance获取特征重要性

    使用LightGBM feature importance 函数给训练完毕的LightGBM模型的各特征进行重要性排序 feature importance 61 pd DataFrame feature importance 39 fea
  • 基于openlayers的最短路径规划

    之前的文章讲到了如何构建空间数据库 矢量数据如何入库 如何构建拓扑网络 如何自定义查询函数 如何构建wms服务 本文讲解如何基于openlayers晚上最短路径规划功能 一 基于openlayers3 1 构建网页 这里只是一个简单的网页
  • OpenLayers基础教程——popup弹出框

    1 前言 在OpenLayers中 一般使用ol Overlay实现popup弹出框 弹出框一般用于显示地图上兴趣点的一些属性信息 如下图所示 下面开始介绍实现方法 2 准备测试数据 在SqlServer中新建一张省会数据表 Provinc
  • java中的异步处理和Feature接口(一)

    文章目录 背景介绍 Feature接口 Feature接口和Tread的区别 Feature接口示例 Feature接口的局限性 背景介绍 想象这样一个场景 你可能希望为你的法国客户提供指定主题的热点报道 为实现这一功能 你需要向 谷歌或者
  • OpenLayers与Bootstrap样式冲突的解决

    在引入Bootstrap响应式布局样式后 OpenLayers图层瓦片会显示异常 在页面中加入以下样式可以解决 参见 http openlayers org dev examples bootstrap html
  • Openlayers:矢量特征而不是标记

    我想在地图上放置一个符号 例如 到目前为止我已经使用了 OpenLayersOpenLayers Layer Markers 代码如下所示 map new OpenLayers Map map layer new OpenLayers La
  • 如何从 OpenLayers.Control.DrawFeature 获取积分返回

  • 如何修复 OpenLayers 6.6.1 中的 Typescript 错误

    升级到 OpenLayers 6 6 1 后 我收到了数百个由泛型引起的打字稿错误 例如 import olLayerVector from ol layer Vector import olFeature from ol Feature
  • Openlayers v4.0.1 支持 Google 地图 Javascript API 吗?

    我想知道 Openlayers 的最新版本 v4 0 1 是否支持 Google 地图作为图块图层 我找不到任何关于此的文档 如果 Openlayers 不支持 Google 地图 有人可以告诉我是否有任何方法可以做到这一点 OpenLay
  • 如何删除 openlayer 中的特定标记

    这是来自 capdragon 更新的新代码 但现在它不会创建标记 我现在不知道如何解决这个问题 我认为代码片段是解决我之前识别标记问题的一种非常聪明的方法 而且它可能是我现在缺少的一个非常小的东西 任何再次帮助将不胜感激
  • TypeScript + OpenLayers 7:设置和获取功能 ID 失败

    我有一张带有两个自定义按钮的地图 绘制多边形 and 删除功能 它允许我绘制和删除绘制的多边形 此外 我为多边形创建了一个测量叠加 显示了它们的面积 见图 为了识别多边形和覆盖层之间的连接 我尝试在它们上设置相同的 id 以便在删除多边形时
  • OpenLayers 动画 getView().fit()

    我一直在研究 openlayers 的动画功能 我可以看到使用缩放到给定点和分辨率是多么简单 view animate center position zoom 11 但我不知道如何制作动画 map getView fit extent m
  • 如何根据缩放级别加载图层?

    我想控制 OpenLayers 中的缩放 当缩放为 3 时 我想加载 KML1 当缩放为 4 时 我想加载 KML2 您能告诉我如何控制缩放事件吗 正如 j freyre 提到的 您应该注册一个函数 该函数会更改 KML 图层的可见性到 z
  • 使用 asp.net 和 iis 在 geoserver 中进行身份验证

    我不知道这是否是一个愚蠢的问题 但是如何将 asp net 身份验证与 openlayers 结合 我创建了一个登录页面来在 openlayers 中进行身份验证 在 c 中 服务器端 这是我的代码 Uri uri new Uri http
  • 如何在 OpenLayers 4 上添加点击事件?

    我需要将事件侦听器附加到 OpenLayers 4 中的功能 我已经尝试过feature on 点击 function 但它不起作用 如何将晒黑事件添加到功能中 先感谢您 没有click为功能注册的事件ol Feature目的 但click
  • Sencha Touch、OpenLayers、GeoServer:使用 Android 2.2 的设备上的编码错误

    我使用创建了一个小测试页面煎茶触摸 开放层我正在从一个接收 WMS WFS 数据地理服务器 我已将 HTML 页面上的编码设置为 UTF 8 我使用以下语句从 GeoServer 中提取一些 WFS 数据 var post new Open
  • OpenLayers 中的复合(complex)功能

    我在玩了一下 OpenLayers 想知道是否有一种方法可以创建自定义 功能 我想要完成的是一个具有多个部分的功能 或者是否有一种方法可以将多个功能 绑定 在一起 我想要实现的目标是 我想在地图上的某个位置显示各种数量的数据 并且我想将其包
  • 设置样式缩放级别 openlayers 3

    在 Openlayers 中 可以根据缩放级别打开或关闭某些功能 尽管查看了文档 但我在 OpenLayers 3 中没有找到相同的功能 有谁知道如何做到这一点 这是我放置在地图上的功能ol style Text是我只想在用户放大到特定缩放
  • 如何在geoserver中使用WPS进程生成MBtiles?

    如何在geoserver中生成mbtile 使用 openlayers 显示 geoserver 层 例如像这样调用wms层 new OpenLayers Layer WMS Kanpur http localhost 8080 geose

随机推荐

  • React+antdPro4+TS(typescript)相关(知识点)踩坑记录

    最近公司新开了项目 是后台管理系统 在技术选型上选择的时候 选择了react 然后整体的框架选择的是antd pro 4 这个脚手架搭建出来的单页面应用 要是想要仔细了解antd pro 可以看一下他的官方文档 antd pro 此次开发整
  • [c#][process]下发单个以及同时多条adb指令

    库 using System Diagnostics private Process cmd process 下发单条adb指令 代码示例 private string GetAdbCommandsArguments string cmds
  • fiddler设置只抓取某个网址的信息

    1 前提 在使用fiddler进行抓包过程中 如果想只抓取某一个地址下的请求 可以如下设置 2 设置 1 打开fiddler 选择过滤器 2 选择仅显示以下主机 3 点击 动作 选择 现在运行筛选器 4 打开百度 输入信息 进行搜索 查看抓
  • 字符分割算法研究

    字符分割 定义 以字符串的形式分割字符 达到将验证码分割的效果 从定位得到的车牌图像中分离出单个字符 包括汉字 字母和数字等 的图像 以便于字符分割 初步了解 行切分 字切分 参考范例 车牌识别 主要算法解析 改进的连通域分割法 版面分割是
  • 线程池基础知识

    1 为什么要使用线程池 线程池用什么用 创建线程和销毁线程的花销是比较大的 这些时间有可能比处理业务的时间还要长 这样频繁的创建线程和销毁线程 再加上业务工作线程 消耗系统资源的时间 可能导致系统资源不足 我们可以把创建和销毁的线程的过程去
  • Linux 将本地文件上传Linux服务器, 即ssh 命令上传本地文件

    利用ssh传输文件 在linux下一般用scp这个命令来通过ssh传输文件 1 从服务器上下载文件scp username servername path filename var www local dir 本地目录 例如scp root
  • supervisor托管配置nginx

    前言 阅读本文档前 请先了解如何安装配置supervisor和nginx 以下是相关学习文档 超全面 CentOS7 安装及配置supervisor CentOS 安装及配置nginx 配置 1 创建supervisor托管配置文件 详细如
  • oracle导库报959,IMP-00003: 遇到 ORACLE 错误 959

    导入前先要建好表空间和用户 建议你导出的时候按用户导出 不要用sys全部导出来还有在导入的时候需要指定导入到哪个用中去 给个操作手顺吧 我今天刚弄完的 1 导出 exp user user dbname owner user file pa
  • opencv之初学

    浅浅地记录一下自己学习opencv的过程吧 我有想毕业之后从事图像处理方面的工作 所以就从现在学起 争取明年秋招时能拿到offer吧 1 下载opencv opencv有很多的版本 我大概在网上搜了一下它的下载过程 需要在Visual St
  • UE4中文本文件配置文件Json文件XML文件的读写

    虚幻引擎中提供了与平台无关的文件读写与访问接口 通过调用 可以完成一些文件的读写 比如文本文件 配置文件 json文件 xml文件等 完成文件读写 首先需要获取文件路径等相关信息 对调用这些操作 我们需要包含头文件PlatformFilem
  • stm32水质检测系统(TDS检测,水温检测,PH检测,wifi上传,上位机显示)

    一 硬件材料清单 1 STM32核心板 2 OLED显示屏 3 PH传感器 4 TDS传感器 5 DS18B02水温传感器 6 ESP8266 二 实现的功能 1 数据的实时检测 2 本地OLED数据实时刷新 3 远程终端上位机数据显示刷新
  • Flask系列 路由系统

    Flask路由系统细分 from flask import Flask app Flask name app route def index return ok if name main app run 从这个简单的代码入口 来剖析一下路由
  • SpringIOC和AOP概念原理

    springIOC概念和原理 控制反转 把对象创建和对象之间的调用过程 交给Spring进行管理 使用IOC目的 为了耦合度降低 IOC思想是基于IOC容器完成 IOC容器底层就是对象工厂 Spring提供了IOC容器2中实现方式 俩个接口
  • 利用强化学习进行股票操作实战(一)

    利用强化学习进行股票操作实战 今天开始利用强化学习实现股票操作 我在网上找了一个简单的强化学习进行股票操作的例子 并在此基础上进行了小改动 首先讲下建模的思路 当模型发出买入指令时 我们一次性全部买入 当模型发出卖出指令时则一次性全部卖出
  • Swift 中 10 个震惊小伙伴的单行代码

    作者 uraimo 原文链接 原文日期 2016 01 06译者 bestswifter 校对 numbbbbb 定稿 小锅 几年前 函数式编程的复兴正值巅峰 一篇介绍 Scala 中 10 个单行函数式代码的博文在网上走红 很快地 一系列
  • qnx 设备驱动开发_2021年起奥迪车将换装Linux系统 此前为QNX

    车东西5月21日消息 外媒Forbes报道 奥迪官方宣布到2021年 会对旗下多款车型的信息娱乐系统进行升级换代 此前 奥迪旗下车型的信息娱乐系统基于QNX研发而来 未来将更换为Linux系统 升级后的奥迪信息娱乐系统 最大的亮点在于增加的
  • xcode,ios单元测试网络请求 AFNetworking 无法引入

    单元测试引入AFNetworking 同需要在 Podfile 引入 platform ios 7 0 target MyDemoTests do pod AFNetworking gt 2 5 0 end 否则无法引入
  • C++11中enum class的使用

    枚举类型 enumeration 使我们可以将一组整型常量组织在一起 和类一样 每个枚举类型定义了一种新的类型 枚举属于字面值常量类型 C 包含两种枚举 限定作用域的和不限定作用域的 这里主要介绍限定作用域的 不限定作用域的使用可以参考 h
  • [亲测有效]QT生成项目时候,右下角显示红色构建进度条,但是不报错,且无法生成UI界面 的解决方法。

    最近用QT5 9时候 发现生成项目莫名的慢 即使是生成过的项目也要十几秒钟才能弹出UI界面 于是我就想换一个版本用一下 于是我选择了QT 5 6 1版本 但是我发现完成项目后 点击左下角的运行按钮 右下角显示红色进度条的构建过程 更为诡异的
  • OpenLayers绘制图形

    OpenLayers的显示构成由外向内为 ol Map 地图对象 ol layer Vector 图层对象layer Map含有多个layer 最终的显示效果是由多个layer叠加而成 ol source Vector和ol style S