前言

leaflet 入门开发系列环境知识点了解：

内容概览

leaflet视频监控播放
源代码 demo 下载

效果图如下：

本篇实现的思路：萤石官网，添加视频设备，然后开启直播获取直播或者监控视频流RTMP或者HLS，利用js插件ckplayer.js，在web网页结合leaflet在地图展示视频监控播放效果。
萤石官网也有很多示例，可以结合官网的文档参考
萤石官网：https://open.ys7.com
萤石开发文档：https://open.ys7.com/doc/zh/

  • 完整代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>视频图片监控demo</title>
  5. <meta charset="utf-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  8. <script src="videoJS/ckplayer/ckplayer/ckplayer.js"></script>
  9. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
  10. <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
  11. <style>
  12. html, body,#map {
  13. height: 100%;
  14. width: 100%;
  15. margin: 0;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20.  
  21. <div id='map'></div>
  22. <img id='fullImg' height="100%" width="100%" style="margin:0;position:absolute;left:0;top:0;z-index:9999;display:none;"></img>
  23.  
  24. <script>
  25. window.data = null;
  26. $.ajax({
  27. url : "http://localhost/gzsj/wechat/third/imgList",
  28. type : 'GET',
  29. dataType : 'json',
  30. async: false,
  31. data:{emcd:"1909030002",size:5},
  32. success : function(data) {
  33. console.log('success',data);
  34. window.data = data.data;
  35. },
  36. error : function(msg) {
  37. console.log('error',msg);
  38. }
  39. });
  40. ……

完整demo源码见小专栏文章尾部：GIS之家leaflet小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

leaflet视频监控播放(附源码下载)的更多相关文章

  1. Zookeeper+websocket实现对分布式服务器的实时监控（附源码下载）

    ​ 我就是个封面 Zookeeper简介 Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统. 简单来说就是一个Zookeeper注册同步中心,内部结构为一个树形目录,每个节点上 ...

  2. leaflet图斑历史时空播放(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  3. Android 音视频深入 四 录视频MP4（附源码下载）

    本篇项目地址,名字是<录音视频(有的播放器不能放,而且没有时长显示)>,求star https://github.com/979451341/Audio-and-video-learnin ...

  4. leaflet实现风场图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  5. Android 音视频深入 十 FFmpeg给视频加特效（附源码下载）

    项目地址,求starhttps://github.com/979451341/Audio-and-video-learning-materials/tree/master/FFmpeg(AVfilte ...

  6. Android 音视频深入 八 小视频录制（附源码下载）

    本篇项目地址,求starthttps://github.com/979451341/Audio-and-video-learning-materials/tree/master/%E5%B0%8F%E ...

  7. leaflet 结合 Echarts4 实现迁徙图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  8. leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  9. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

随机推荐

  1. ORA-00845 startup启动不起来关于磁盘空间扩充

    问题描述:今天在虚拟机下进行startup的操作,但是没有起来,系统报错:ORA-00845: MEMORY_TARGET not supported on this system 1.startup ...

  2. Java字节码深度剖析

    Java字节码文件查看 我们有一个类Test01,具体内容如下: package bytecode; public class Test01 { private int i = 0; public i ...

  3. 【数据结构】之二叉树（Java语言描述）

    有关树的一些基础知识点请参考[这篇文章]. 本文主要记录Java语言描述的二叉树相关的一些操作,如创建.遍历等. 首先,我们需要一个表示树中节点的数据结构TreeNode,代码如下: public c ...

  4. 09-kubernetes configMap secret

    目录 配置容器化应用配置的方式 命令创建和测试configMap 创建一个Pod 挂在测试 命令行文件类创建方式 创建Pod测试 创建后测试 贴近实际进行测试 创建后测试 secret 举例测试 ge ...

  5. Day01-变量/常量/数据类型/流程控制之 if

    1.变量 把程序运行的中间结果临时的存在内存里,以便后续的代码调用.代指一些复杂的.过长的数据. 声明变量  name = 'Dylan' # 把数据'Dylan'声明(赋值)给变量 nmae,以便后 ...

  6. jQuery九宫格抽奖

    <div id="box"> <div class="content content-1">1</div> <div ...

  7. 在flink中使用jackson JSONKeyValueDeserializationSchema反序列化Kafka消息报错解决

    在做支付订单宽表的场景,需要关联的表比较多而且支付有可能要延迟很久,这种情况下不太适合使用Flink的表Join,想到的另外一种解决方案是消费多个Topic的数据,再根据订单号进行keyBy,再在逻辑 ...

  8. Python开发GUI工具介绍，实战：将图片转化为素描画！

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...

  9. 从“职场小白”进阶为“行业大牛”，四个"锦囊"教你破局

    在早期软件行业,会存在一个普遍的现象,有些大学的本科,或者研究生毕业,他们去面试工作的时候会发现,面试下来代码能力可能不是太好,这种情况下公司会问你愿不愿意去做测试? 如果说早期软件测试行业还是一个风 ...

  10. Vue.js命名风格指南

    前言 本命名风格指南推荐了一种统一的命名规范来编写 Vue.js 代码.这使得代码具有如下的特性: 统一团队的命名规范,其它开发者或是团队成员更容易上手阅读和理解. IDEs 更容易理解代码,从而提供 ...