Skip to content

Commit d572f79

Browse files
author
潘卓然-中地数码台式机
committed
补充leaflet的canvas流图层以及markdown说明示例
1 parent fb46d1a commit d572f79

6 files changed

Lines changed: 120 additions & 1 deletion

File tree

‎config/config-leaflet.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1496,12 +1496,19 @@ var config = {
14961496
leaffolder: true,
14971497
childs: [
14981498
{
1499-
name: "中地-出租车跟踪",
1499+
name: "中地-出租车跟踪geojson",
15001500
file: "taxi",
15011501
diffcult: "3",
15021502
detail: "针对igserver-x的socket进行通信",
15031503
icon: "taxi.png",
15041504
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,如有问题请咨询创新中心"
15051512
}
15061513
]
15071514
}

‎demo/leaflet/example/igserverx/socket/mapv.htm‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>Draw</title>
7+
<script include="mapv" src="../../libs/zondyclient/include-leaflet-local.js"></script>
8+
<style>
9+
#map {
10+
height: 800px;
11+
}
12+
</style>
13+
</head>
14+
15+
<body>
16+
<div id="map"></div>
17+
<script>
18+
var map = new L.Map("map", {
19+
center: new L.LatLng(34.218216, 108.835846),
20+
zoom: 13
21+
});
22+
var osm = L.tileLayer(
23+
"https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=" +
24+
"sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw", {
25+
attribution: '<a href="#">Mapbox</a>',
26+
maxZoom: 18,
27+
id: "mapbox.dark"
28+
}
29+
).addTo(map);
30+
31+
var urlData = "ws://192.168.91.121:9382/flowdata/streamdemo";
32+
33+
var streamLayer = L.zondy.StreamLayer(map, urlData, {
34+
render: "mapv",
35+
iconUrl: '../img/leaflet/marker/mobile.png',
36+
timeSpeed: 200, //播放间隔，如果更新频率太频繁则加大间隔，单位毫秒
37+
field: "imei", //这个属性必须传入，如果没有则使用默认字段id
38+
//方向字段fieldDeg: "deg" 没有不用传递
39+
});
40+
streamLayer.on("layerupdate", function (result) {
41+
var feature = result.data;
42+
});
43+
streamLayer.addTo(map);
44+
</script>
45+
</body>
46+
47+
</html>

‎demo/leaflet/example/map/mapoperation/layerdisplay.htm‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<title>地图域当前信息</title>
6+
<script src="../../libs/zondyclient/include-leaflet-local.js"></script>
7+
<!--引入当前页面样式表-->
8+
<link href="../../css/openlayers/style.css" rel="stylesheet" type="text/css" />
9+
10+
<style>
11+
body {
12+
height: 800px;
13+
}
14+
</style>
15+
<script type="text/javascript">
16+
//使用严格模式
17+
"use strict";
18+
//定义地图
19+
var map;
20+
/**初始化地图显示
21+
*/
22+
function init() {
23+
//地图容器
24+
map = L.map('leaf_map', {
25+
//显示中心
26+
center: [36, 110],
27+
//最小显示等级
28+
minZoom: 0,
29+
//最大显示等级
30+
maxZoom: 12,
31+
//当前显示等级
32+
zoom: 4
33+
});
34+
//
35+
var guid = Math.floor(Math.random() * 10000000).toString();
36+
mapDocLayer = new Zondy.Map.MapDocLayer("矢量瓦片武汉", {
37+
//IP地址
38+
ip: "192.168.10.185",
39+
//端口号
40+
port: "6163",
41+
//只显示一个图层,不平铺显示
42+
noWrap: true,
43+
//添加guid
44+
guid: guid
45+
}).addTo(map);
46+
//加载瓦片图层数据（OSM）
47+
var tilelayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { noWrap: true }).addTo(map);
48+
var tilehtml = tilelayer.getContainer();
49+
console.log(tilehtml);
50+
}
51+
52+
</script>
53+
</head>
54+
<body onload="init()">
55+
<div id="leaf_map" style="width: 100%; height: 95%;position: absolute">
56+
</div>
57+
</body>
58+
</html>

‎demo/leaflet/gallery/igserverx/socket/mapv.png‎

62.7 KB
Loading

‎demo/leaflet/markdown/igserverx/socket/mapv.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
### mapv渲染流图层
2+
3+
> MapV渲染流图层强调的是`展示`，不像geojson的示例可以进行`交互操作`。
4+
5+
> MapV使用canvas绘制图形，仅仅用于`大数据量的展示`，其吞吐量与性能是geojson绘制的的数倍。
6+
7+
> 在绘制上，由于拖动，放大，缩小等操作时`不重绘canvas`，因此在渲染速度上要比geojson要快，地图操作更流畅

‎img/leaflet/marker/mobile.png‎

1.61 KB
Loading

0 commit comments

Comments
 (0)