GIS前端编程—视频展示

简介: GIS前端编程—视频展示

得益于互联网的快速发展,WebGIS发展迅猛,其开发工具与开发平台也呈现出百花齐放之势。目前,涌现出了大量的WebGIS二次开发产品。在互联网方向上,有诸如百度地图API、天地图API、高德地图API、腾讯地图API、Google地图API等产品;在行业应用方向上,既有很多诸如GeoServer的开源WebGIS平台,还有像中地数码、超图、ESRI等GIS厂商提供的专业WebGIS开发平台,如MapGIS IGServer、ArcGIS for Server等。


WebGIS应用中,有时会借助

视频展示

地物的信息,这样会更加便捷、高效。例如,在某景点位置添加一个图片标注,当单击该图片标注时播放景点的宣传视频,增强用户体验。

Leaflet提供了L.VideoOverlay对象,供用户在地图上叠加视频进行展示,其构造方法为:

video用于设置视频文件地址,bounds用于设置视频添加的位置范围,options用于设置视频图层的一些参数。

本实例以天地图地图作为底图,在地图上添加一个自定义视频播放图标的标注。当单击该标注时,添加视频图层并播放视频;再次单击该标注时,移除视频图层。主要实现步骤如下。

(1)在中通过onload事件加载初始化函数,并创建一个div作为地图容器。

(2)在初始化函数中,创建一个Map对象,设置显示中心、当前显示级数等参数。

(3)通过L.TileLayer加载一幅天地图地图进行显示。

(4)利用L.Marker和L.Icon添加一个自定义视频播放图标的标注。

(5)监听自定义视频播放图标的标注单击事件,当单击该标注时添加L.VideoOVideoOverlay进行视频展示。

代码如下:

空间数据是GIS的核心,能够直接或间接提供空间数据服务的GIS服务平台是发布地理信息服务的关键。目前,互联网企业纷纷进入电子地图领域,如国内的百度地图开放平台、高德开放平台、天地图-国家地理信息公共服务平台等。借助这些极具影响力的平台产品,GISer社区活跃起来,同时公众对GIS的认知也越来越多,GIS成为当前IT界的一个焦点。与此同时,开源社区也不断涌现出各类GIS项目,其中不乏一些优秀的开源GIS服务平台,如GeoServer、MapServer等。

1. 互联网公共地图服务开放平台

各个互联网公共地图服务开放平台的模式大同小异,一般提供电子地图服务与个性化的应用服务(POI、定位、导航、出行等)API,以及各端开发的SDK,如百度地图、高德地图等。天地图作为国家地理信息公共服务平台,提供了丰富的服务资源(数据服务资源、应用服务资源),各大服务机构(政府部门、企事业单位等)可以不断更新GIS服务,同时也提供Web端与移动端开发的SDK。

此类互联网公共地图服务开放平台获得了广大GISer的认可,成为轻量级GIS应用开发的利器,为GIS开发生态环境添砖加瓦,具有重要的作用与意义。

国外的OpenStreetMap为GIS应用提供了在线地图服务。OpenStreetMap是开放数据,由OpenStreetMap基金会(OSMF)采用开放数据库许可协议授权。只要用户表明来源为OpenStreetMap及其贡献者,就可以自由地复制、分发、传送其数据。

2. 开源GIS服务平台

与互联网公共地图服务开放平台不同,开源GIS服务平台最大的特点就是GIS服务的发布与管理。作为GIS服务器,支持用户定制自己专属的GIS服务,更为灵活,可以满足更多的应用场景需求。

(1)GeoServer。GeoServer是一个功能齐全,遵循OGC服务规范的开源GIS服务平台。GeoServer是OpenGIS Web服务规范的J2EE实现,用户利用GeoServer可以更加方便地发布地图数据,允许对数据进行更新、删除、插入等操作,还可以通过GeoServer迅速地共享地理空间信息。GeoServer是社区开源项目,用户可以直接通过社区网站(如中文社区网站http://www.opengeo.cn/)下载相关资料。

GeoServer支持OGC服务规范的系列服务,支持PostgreSQL、MySQL等数据库及ArcSDE、Shapefile等中间件和文件资源,能够将网络地图输出为JPEG、PNG、KML等多种图片格式和数据格式,可以运行在任何基于J2EE的容器,支持多种WebGIS前端框架,如OpenLayers等


目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
259 1
|
4月前
|
机器学习/深度学习 人工智能 前端开发
未来趋势下的前端开发:可视化编程的崛起
随着人工智能和机器学习技术的不断发展,前端开发领域也在逐渐迎来变革。本文探讨了未来趋势下前端开发的发展方向,重点介绍了可视化编程在前端开发中的应用和优势,以及对传统前端开发方式的影响。
|
4月前
|
前端开发 JavaScript 开发工具
Web网页前端教程免费:引领您踏入编程的奇幻世界
Web网页前端教程免费:引领您踏入编程的奇幻世界
46 3
|
3月前
|
前端开发
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
|
3月前
|
前端开发 PHP 数据格式
【附带效果视频】php接口给前端返回流式数据,php使用event-stream进行数据推送,循环一次输出一次
【附带效果视频】php接口给前端返回流式数据,php使用event-stream进行数据推送,循环一次输出一次
100 0
|
5月前
|
SQL 机器学习/深度学习 前端开发
10个宝藏级编程资源,让你省下8K学费不香吗_类似javaguide的前端网站
10个宝藏级编程资源,让你省下8K学费不香吗_类似javaguide的前端网站
10个宝藏级编程资源,让你省下8K学费不香吗_类似javaguide的前端网站
|
5月前
|
前端开发
前端常见编程题一
前端常见编程题一
|
5月前
|
存储 前端开发 JavaScript
前端常见编程题二
前端常见编程题二
|
5月前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
42 0
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
|
5月前
|
编解码 前端开发 JavaScript
纯前端也能实现视频转GIF
纯前端也能实现视频转GIF