位置: IT常识 - 正文

Openlayers 快速上手教程(openlayers6教程)

编辑:rootadmin
Openlayers 快速上手教程

推荐整理分享Openlayers 快速上手教程(openlayers6教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:openlayers wms,openlayers视频教程,openlayers wms,openlayers教程,openlayers教程,openlayers6教程,openlayers入门教程,openlayers教程,内容如对您有帮助,希望把文章链接给更多的朋友!

📢欢迎点赞👍/ 收藏⭐/ 留言📝如有错误敬请指正!

1. Openlayers简介

Openlayers 是开源的前端地图框架,官网地址:https://openlayers.org/ 它的作用主要是用于展现数据并且提供相应的地图操作工具。

1.1 官网首页

1.2 使用示例example

Openlayers6版本官网提供了 228 个使用案例,可以根据自己的需要筛选: 如: popup、draw、style 等 例如搜索popup: 点击进入后有详细的代码示例:

1.3 阅读api

在学会了 Openlayers 的基本使用后,API 的阅读使用则是工作必备。 左侧列表列出了Openlayers的所有类,方便快速搜索 例如搜索Map后进入:

2. 快速开始示例

我将通过一个官网的demo介绍如何使用Openlayers 初始代码:

<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css" type="text/css"> <style> .map-class { height: 50rem; width: 100%; } </style> <!-- 加载OpenLayers 类库 --> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script> <title>OpenLayers例子</title> </head> <body> <h2>我的地图</h2> <div id="map-id" class="map-class"></div> <script type="text/javascript"> var map = new ol.Map({ // 绑定 DIV 元素 target: 'map-id', // 添加图层 layers: [ new ol.layer.Tile({ // 设置图层的数据源 source: new ol.source.OSM() }) ], // 设置视图窗口 view: new ol.View({ //center: ol.proj.fromLonLat([37.41, 8.82]), center: ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'), zoom: 5 }) }); </script> </body></html>

通过上面例子可以看出 Openlayers 使用很简单,首先定义一个 Map,这是 Openlayers 的核心,它是一个容器,所有动作、设置等都在 Map 中展开。

Openlayers 快速上手教程(openlayers6教程)

下面对上面 demo所简要说明:

将 Map 容器与 HTML 元素(这里是 DIV 元素 map-id)做绑定,Map 提供有 target 属性来绑定;将图层 Layer 添加到 Map 中,这里是一个瓦面图层 ol.layer.Tile;图层是一个包装盒,需要给图层添加具体的数据源:new ol.source.OSM(),数据源表示一个服务,可以理解为是一个 URL;最后设置 Map 容器的视图窗口:new ol.View,就是我们初始化能看到的地图样子。

Openlayers 其核心组件是 Map、Layer、Source、View、Control、Interaction几乎所有的动作都是围绕这几个核心类展开。

Map

Map是 Openlayers 的使用的基础,所有的图层、地图控件、地图工具等必须添加到 Map 中才能使用。 往 Map 中添加图层、地图控件、地图工具等可以在初始化 Map 时就添加(如上 demo),可以调用 Map 相关的方法添加 addControl(control)、addInteraction(interaction)、addLayer(layer)。 Map 还提供了很多事件,如:点击地图(click)、双击地图(dbclick)等。 绑定 click 事件使用:

this.map.on("click", evt => { this.map.forEachFeatureAtPixel(evt.pixel, feature => {//鼠标点击某一个要素后,获取这个要素,执行业务逻辑 });});

PS: 另一种事件调用方式:this.map.dispatchEvent({type: "click", event: 回调函数 })

Layer

Layer 图层:单单一个 Map 是没有什么用的,只用绑定图层才能显示数据,Layer 作用能控制数据是否显示,以及地图可显示的最大或最小比例尺(即放大或缩小到某个级别不显示地图),这里特别说明下,图层主要是根据数据源的不同来选择,不同的数据源选择不同的图层,使用:

this.map.addLayer(new ol.layer.Vector({ source: new TileWMS({ url: "http://192.168.1.244:9090/geoserver/fj/wms", params: { LAYERS: "fj:cityErase" } })}))Source

这是整个 Openlayers 的灵魂,source 分为矢量数据源和影像数据源。有时候底图使用影像数据,而与我们业务相关的河流、行政区、水环境监测点等都是矢量数据。 数据源的使用如下:

this.map.addLayer(new ol.layer.Tile({ //加载影像数据 source: new ol.source.XYZ({ url: "https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=a5dd6a2f1c934394bce6b0fb077203eb", attributions: "测试" })}));this.map.addLayer(new VectorLayer({ //加载矢量数据 source: new ol.source.Vector(), //这里设置数据展示边框颜色 style: function(feature) { return new Style({ stroke: new Stroke({ color: "blue", width: 1 }) }) } }))View

view 用来设置地图的展示位置范围、地图中心位置以及当前地图使用的投影坐标系(有很多坐标系,如地理坐标系:4326)等,也可以设置地图旋转等,使用:

this.map.setView(new ol.View({ center: [114.064839,22.548857], //深圳 zoom: 15, projection: 'EPSG:4326' //使用的坐标,这里是 WGS84 坐标系}))Control

Control 控件,就是与地图相关操作的工具。如下图: 地图默认包含了放大缩小控件,控件的使用可以更加方便的帮助我们浏览数据,提高交互体验。

new ol.Map({ target: 'map2', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.transform( [104, 30], 'EPSG:4326', 'EPSG:3857'), zoom: 10 }), // 在默认控件的基础上,再加上其他内置的控件// 在上面 demo 中没有设置 controls 属性,直接使用 Map 的默认控件(放大、缩小) controls: ol.control.defaults().extend([ new ol.control.FullScreen(), new ol.control.MousePosition(), new ol.control.OverviewMap(), new ol.control.ScaleLine(), new ol.control.ZoomSlider(), new ol.control.ZoomToExtent() ]),});Interaction

交互操作就是我们与地图的相互操作,比如在地图上绘制要素、选择、修改、移动、拉伸等等操作。使用如下:

new ol.Map({ // 修改 openlayers 提供的默认的交互方式 interactions: ol.interaction.defaults({ doubleClickZoom: false, mouseWheelZoom: false }), layers: [ ... ... ], target: 'map2', view: new ol.View({ ... ... }) });

也可以手动添加:

// 添加绘制工具this.map.addInteraction(new Draw({ //在地图上绘制好的要素添加到指定数据源 source: this.drawVectorSource, //绘制要素的类型 type: GeometryType.POLYGON});

📢欢迎点赞👍/ 收藏⭐/ 留言📝如有错误敬请指正! 后续持续更新中…

本文链接地址:https://www.jiuchutong.com/zhishi/298785.html 转载请保留说明!

上一篇:瑞吉外卖项目:编辑员工信息与公共字段自动填充(瑞吉外卖项目简历)

下一篇:js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标(js去掉数组中的空字符串)

  • 农行app密码已锁定怎么解锁(农行app密码已锁定手机号是空号怎么解锁)

    农行app密码已锁定怎么解锁(农行app密码已锁定手机号是空号怎么解锁)

  • 支付宝小微商户怎样申请二维码(支付宝小微商户怎么注销)

    支付宝小微商户怎样申请二维码(支付宝小微商户怎么注销)

  • 京东删除订单记录后还能找回吗(京东删除订单记录客服能看到吗)

    京东删除订单记录后还能找回吗(京东删除订单记录客服能看到吗)

  • 小米护眼模式老是自动开启(小米护眼模式老是重启)

    小米护眼模式老是自动开启(小米护眼模式老是重启)

  • 怎么看拦截的垃圾信息(怎么看拦截的垃圾短信)

    怎么看拦截的垃圾信息(怎么看拦截的垃圾短信)

  • 优酷视频和优酷经典版有什么区别(优酷视频和优酷是一样的吗)

    优酷视频和优酷经典版有什么区别(优酷视频和优酷是一样的吗)

  • 在线无可用位置的原因(在线 无可用位置)

    在线无可用位置的原因(在线 无可用位置)

  • 荣耀10怎么退出talkback(荣耀10怎么退出防误触模式)

    荣耀10怎么退出talkback(荣耀10怎么退出防误触模式)

  • 华为mate305g和mate30pro5g的区别(华为mate305g和mate30pro4g的区别)

    华为mate305g和mate30pro5g的区别(华为mate305g和mate30pro4g的区别)

  • iphone7是哪年出的(iphone7哪年出产的)

    iphone7是哪年出的(iphone7哪年出产的)

  • ipad激活和未激活区别(ipad激活过和未激活区别)

    ipad激活和未激活区别(ipad激活过和未激活区别)

  • 电脑选多张图片按什么键(电脑选多张图片怎么选)

    电脑选多张图片按什么键(电脑选多张图片怎么选)

  • 桌面抽屉怎么设置(如何设置抽屉风格桌面布局)

    桌面抽屉怎么设置(如何设置抽屉风格桌面布局)

  • 声卡是按什么分类的(声卡分为)

    声卡是按什么分类的(声卡分为)

  • 手机无缘无故震动是怎么回事(手机无缘无故震动怎么回事)

    手机无缘无故震动是怎么回事(手机无缘无故震动怎么回事)

  • 华为手机关机设置在哪里(华为手机关机设置时间)

    华为手机关机设置在哪里(华为手机关机设置时间)

  • 直接免拼有什么区别吗(直接免拼需要花钱吗)

    直接免拼有什么区别吗(直接免拼需要花钱吗)

  • 华为手环怎么连接苹果手机(华为手环怎么连接门禁卡)

    华为手环怎么连接苹果手机(华为手环怎么连接门禁卡)

  • 荣耀20支持18w快充吗(荣耀20支持多大快充)

    荣耀20支持18w快充吗(荣耀20支持多大快充)

  • 铁路12306登录密码是什么(铁路12306登录密码忘记了怎么找回)

    铁路12306登录密码是什么(铁路12306登录密码忘记了怎么找回)

  • xp运行身份怎么取消

    xp运行身份怎么取消

  • 系统字体设置(系统字体设置在哪里)

    系统字体设置(系统字体设置在哪里)

  • oppo用户体验计划关闭在哪(oppo用户体验计划在哪里关闭)

    oppo用户体验计划关闭在哪(oppo用户体验计划在哪里关闭)

  • 前端学习笔记(14)-Vue3组件传参(前端 教程)

    前端学习笔记(14)-Vue3组件传参(前端 教程)

  • 个体工商户的纳税人类型怎么选
  • 销售白酒是否要交消费税?
  • 提前买礼物
  • 调研费用怎么写
  • 增值税发票的品名与报关单不一致
  • 小规模首次申请发票张数
  • 股权投资公司属于金融企业吗
  • 利润表报错了怎么撤回修改
  • 确认增值税时要通过未缴增值税科目吗
  • 知道销项税怎么算进项
  • 库存商品毁损会导致什么
  • 没收土地竞买保证金政策法律
  • 支付货款订金入什么科目核算与会计分录
  • 工程预付款未按时支付
  • 调拨入库的固定资产是否缴税?
  • 工程项目的业务流程
  • 年度账套怎么结转下一年
  • 资产负债表写错数字怎么改
  • 非税收入票据如何打印
  • 全资的子公司
  • 核定征收和查账征收,交的税一样吗
  • 小米路由器启动不了
  • 对方已经认证的红字发票怎么开
  • 王者荣耀中甄姬的cp是谁
  • 如何解决win7系统不稳定
  • 隐藏资源管理器窗口
  • php中字符串函数
  • php数组函数题目
  • 预收账款什么时候开发票
  • 企业购买预付卡送人分录
  • 事业单位会计准则是否废止
  • opencv如何使用
  • php+mongodb
  • php生成证书图片
  • php分页思路
  • 机器学习:基于逻辑回归对优惠券使用情况预测分析
  • 新星计划片头好可爱啊
  • 自产产品用于福利要交增值税吗
  • 公司车辆出售要交多少税
  • 土地补偿款有哪些款项
  • mysql从一张表更新到另一张表
  • python操作yaml文件
  • 小微企业利润表数据
  • 废品材料回收的会计分录
  • 增值税专用发票丢了怎么补救
  • 小企业资本公积的来源有
  • 装修款收不回怎么办
  • 公益事业捐赠有哪些税收优惠政策
  • 营改增后所得税怎么计算
  • 事业单位其他应付款核销分录
  • 不同银行的存款
  • 稀释股权违法吗
  • 商业企业的营业成本包括
  • 纳税人购进国内商品
  • 会计凭证负数金额怎么算
  • 发票提前开能入费用吗?
  • 企业利润率计算公式是怎样的
  • 一个分页存储过多的文件
  • 简述linux几种主流发行版本及其特点
  • win8分屏功能怎么用
  • win8开机启动项
  • win7纯净版系统多大
  • linux开机流程详解
  • cocos2dx怎么用啊
  • jquery自定义
  • 每天学一个成语
  • node.js中的http.response.setHeader方法使用说明
  • Node.js+ES6+dropload.js实现移动端下拉加载实例
  • python socket sendto
  • unityugui
  • javascript 自动执行
  • 动态效果怎么设置
  • 详解Python中的Descriptor描述符类
  • 山东国税网
  • 小规模纳税人能开9个点的发票吗
  • 新疆喀什泽普县海拔高度是多少米
  • 核定征收的适用税率
  • 医院等级怎么查询系统
  • 上海税务局发票验旧
  • 2010年末实现净利润390万,宣告发放现金股利40万,在计算本年未分配利润时,是否要减掉这40万?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设