补充leaflet的canvas流图层以及markdown说明示例

潘卓然-中地数码台式机 · 潘卓然-中地数码台式机 · commit d572f795d034 · 2018-11-29T16:25:47.000+08:00
diff --git a/config/config-leaflet.js b/config/config-leaflet.js
@@ -1496,12 +1496,19 @@ var config = {
           leaffolder: true,
           childs: [
             {
-              name: "中地-出租车跟踪",
+              name: "中地-出租车跟踪geojson",
               file: "taxi",
               diffcult: "3",
               detail: "针对igserver-x的socket进行通信",
               icon: "taxi.png",
               update: "最后更新时间：2018-11-27,如有问题请咨询创新中心"
+            }, {
+              name: "中地-出租车跟踪mapv",
+              file: "mapv",
+              diffcult: "3",
+              detail: "使用mapv时无法进行点击事件的交互，该功能用于大数据展示",
+              icon: "mapv.png",
+              update: "最后更新时间：2018-11-29,如有问题请咨询创新中心"
             }
           ]
         }
diff --git a/demo/leaflet/example/igserverx/socket/mapv.htm b/demo/leaflet/example/igserverx/socket/mapv.htm
@@ -0,0 +1,47 @@
+﻿<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>Draw</title>
+  <script include="mapv" src="../../libs/zondyclient/include-leaflet-local.js"></script>
+  <style>
+    #map {
+      height: 800px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="map"></div>
+  <script>
+    var map = new L.Map("map", {
+      center: new L.LatLng(34.218216, 108.835846),
+      zoom: 13
+    });
+    var osm = L.tileLayer(
+      "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=" +
+      "sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw", {
+        attribution: '<a href="#">Mapbox</a>',
+        maxZoom: 18,
+        id: "mapbox.dark"
+      }
+    ).addTo(map);
+
+    var urlData = "ws://192.168.91.121:9382/flowdata/streamdemo";
+
+    var streamLayer = L.zondy.StreamLayer(map, urlData, {
+      render: "mapv",
+      iconUrl: '../img/leaflet/marker/mobile.png',
+      timeSpeed: 200, //播放间隔，如果更新频率太频繁则加大间隔，单位毫秒
+      field: "imei", //这个属性必须传入，如果没有则使用默认字段id
+      //方向字段fieldDeg: "deg" 没有不用传递
+    });
+    streamLayer.on("layerupdate", function (result) {
+      var feature = result.data;
+    });
+    streamLayer.addTo(map);
+  </script>
+</body>
+
+</html>
diff --git a/demo/leaflet/example/map/mapoperation/layerdisplay.htm b/demo/leaflet/example/map/mapoperation/layerdisplay.htm
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>地图域当前信息</title>
+    <script src="../../libs/zondyclient/include-leaflet-local.js"></script>
+    <!--引入当前页面样式表-->
+    <link href="../../css/openlayers/style.css" rel="stylesheet" type="text/css" />
+
+    <style>
+        body {
+            height: 800px;
+        }
+    </style>
+    <script type="text/javascript">
+        //使用严格模式
+        "use strict";
+        //定义地图
+        var map;
+        /**初始化地图显示
+        */
+        function init() {
+            //地图容器
+            map = L.map('leaf_map', {
+                //显示中心
+                center: [36, 110],
+                //最小显示等级
+                minZoom: 0,
+                //最大显示等级
+                maxZoom: 12,
+                //当前显示等级
+                zoom: 4
+            });
+            //
+            var guid = Math.floor(Math.random() * 10000000).toString(); 
+            mapDocLayer = new Zondy.Map.MapDocLayer("矢量瓦片武汉", {
+                   //IP地址
+                   ip: "192.168.10.185",
+                   //端口号
+                   port: "6163",
+                   //只显示一个图层,不平铺显示
+                   noWrap: true,
+                   //添加guid
+                   guid: guid
+               }).addTo(map);
+            //加载瓦片图层数据（OSM）
+            var tilelayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { noWrap: true }).addTo(map);
+            var tilehtml = tilelayer.getContainer();
+            console.log(tilehtml);
+        }
+
+  </script>
+</head>
+<body onload="init()">
+     <div id="leaf_map" style="width: 100%; height: 95%;position: absolute">
+    </div>
+</body>
+</html>
diff --git a/demo/leaflet/gallery/igserverx/socket/mapv.png b/demo/leaflet/gallery/igserverx/socket/mapv.png
diff --git a/demo/leaflet/markdown/igserverx/socket/mapv.md b/demo/leaflet/markdown/igserverx/socket/mapv.md
@@ -0,0 +1,7 @@
+### mapv渲染流图层
+
+> MapV渲染流图层强调的是`展示`，不像geojson的示例可以进行`交互操作`。
+
+> MapV使用canvas绘制图形，仅仅用于`大数据量的展示`，其吞吐量与性能是geojson绘制的的数倍。
+
+> 在绘制上，由于拖动，放大，缩小等操作时`不重绘canvas`，因此在渲染速度上要比geojson要快，地图操作更流畅
diff --git a/img/leaflet/marker/mobile.png b/img/leaflet/marker/mobile.png

Original file line number	Diff line number	Diff line change
`@@ -1496,12 +1496,19 @@ var config = {`
`1496`	`1496`	`leaffolder: true,`
`1497`	`1497`	`childs: [`
`1498`	`1498`	`{`
`1499`		`- name: "中地-出租车跟踪",`
	`1499`	`+ name: "中地-出租车跟踪geojson",`
`1500`	`1500`	`file: "taxi",`
`1501`	`1501`	`diffcult: "3",`
`1502`	`1502`	`detail: "针对igserver-x的socket进行通信",`
`1503`	`1503`	`icon: "taxi.png",`
`1504`	`1504`	`update: "最后更新时间：2018-11-27,如有问题请咨询创新中心"`
	`1505`	`+ }, {`
	`1506`	`+ name: "中地-出租车跟踪mapv",`
	`1507`	`+ file: "mapv",`
	`1508`	`+ diffcult: "3",`
	`1509`	`+ detail: "使用mapv时无法进行点击事件的交互，该功能用于大数据展示",`
	`1510`	`+ icon: "mapv.png",`
	`1511`	`+ update: "最后更新时间：2018-11-29,如有问题请咨询创新中心"`
`1505`	`1512`	`}`
`1506`	`1513`	`]`
`1507`	`1514`	`}`