前言
leaflet 入門開發系列環境知識點了解：
- leaflet api文檔介紹，詳細介紹 leaflet 每個類的函數以及屬性等等
- leaflet 在線例子
- leaflet 插件，leaflet 的插件庫，非常有用
內容概覽
leaflet視頻監控播放
源代碼 demo 下載
效果圖如下：
本篇實現的思路：螢石官網，添加視頻設備，然后開啟直播獲取直播或者監控視頻流RTMP或者HLS，利用js插件ckplayer.js，在web網頁結合leaflet在地圖展示視頻監控播放效果。
螢石官網也有很多示例，可以結合官網的文檔參考
螢石官網：https://open.ys7.com
螢石開發文檔：https://open.ys7.com/doc/zh/
- 完整代碼如下：
<!DOCTYPE html> <html> <head> <title>視頻圖片監控demo</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script src="videoJS/ckplayer/ckplayer/ckplayer.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/> <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script> <style> html, body,#map { height: 100%; width: 100%; margin: 0; } </style> </head> <body> <div id='map'></div> <img id='fullImg' height="100%" width="100%" style="margin:0;position:absolute;left:0;top:0;z-index:9999;display:none;"></img> <script> window.data = null; $.ajax({ url : "http://localhost/gzsj/wechat/third/imgList", type : 'GET', dataType : 'json', async: false, data:{emcd:"1909030002",size:5}, success : function(data) { console.log('success',data); window.data = data.data; }, error : function(msg) { console.log('error',msg); } }); ……
完整demo源碼見小專欄文章尾部：GIS之家leaflet小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波