Skip to content

Commit 1b518fc

Browse files
gyj12gyj12
committed
Leaflet部分： 增加军标绘制插件及相关示例；图形裁剪增加支持矢量地图文档和矢量图层
1 parent d77a97c commit 1b518fc

46 files changed

Lines changed: 5027 additions & 975 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎config/config-leaflet.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1161,6 +1161,45 @@ var config = {
11611161
update: "最后更新时间：2018-06-01"
11621162
}]
11631163
},
1164+
{
1165+
name: "军标绘制",
1166+
materialicon: "dashboard",
1167+
folder: "milstd",
1168+
leaffolder: true,
1169+
childs: [{
1170+
name: "军标绘制(箭头)",
1171+
file: "militaryarrow",
1172+
diffcult: "1",
1173+
detail: "绘制箭头",
1174+
icon: "militaryarrow.png",
1175+
update: "最后更新时间：2018-11-16",
1176+
person:"基础平台/产品中心-龚跃健"
1177+
}, {
1178+
name: "军标绘制(指北针)",
1179+
file: "militarycompass",
1180+
diffcult: "1",
1181+
detail: "绘制指北针",
1182+
icon: "militarycompass.png",
1183+
update: "最后更新时间：2018-11-16",
1184+
person:"基础平台/产品中心-龚跃健"
1185+
}, {
1186+
name: "军标绘制(旗标)",
1187+
file: "militaryflag",
1188+
diffcult: "1",
1189+
detail: "绘制旗标",
1190+
icon: "militaryflag.png",
1191+
update: "最后更新时间：2018-11-16",
1192+
person:"基础平台/产品中心-龚跃健"
1193+
},{
1194+
name: "军标绘制",
1195+
file: "militaryplotting",
1196+
diffcult: "1",
1197+
detail: "绘制箭头、指北针、旗标",
1198+
icon: "militaryplotting.png",
1199+
update: "最后更新时间：2018-11-16",
1200+
person:"基础平台/产品中心-龚跃健"
1201+
}]
1202+
},
11641203
{
11651204
name: "几何分析",
11661205
materialicon: "dashboard",

‎demo/leaflet/example/igserver/milstd/militaryarrow.htm‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
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 include="draw,milstdbyleaflet"
7+
src="../../libs/zondyclient/include-leaflet-local.js"></script>
8+
<style>
9+
body {
10+
height: 700px;
11+
}
12+
</style>
13+
<script type="text/javascript">
14+
var map;
15+
var layer;
16+
function init() {
17+
map = L.map('leaf_map', {
18+
//参考坐标系，默认是墨卡托坐标系（EPSG3857），EPSG4326为经纬度坐标系
19+
crs: L.CRS.EPSG4326,
20+
//显示中心
21+
center: [0, 0],
22+
//最小显示等级
23+
minZoom: 1,
24+
//最大显示等级
25+
maxZoom: 10,
26+
//当前显示等级
27+
zoom: 1,
28+
//不显示放大缩小按钮
29+
zoomControl: false,
30+
//限制显示地理范围
31+
maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 0))
32+
});
33+
34+
//显示OSM地图
35+
layer = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
36+
//最小显示等级
37+
minZoom: 1,
38+
//最大显示等级
39+
maxZoom: 15,
40+
//设置地图不连续显示
41+
noWrap: true
42+
}).addTo(map);
43+
}
44+
45+
var feature = null;
46+
//定义绘制图标
47+
function add() {
48+
if (feature !== null) {
49+
//清空地图
50+
feature.remove();
51+
}
52+
53+
var vertices = [[60, -40], [60, -20], [47, -30]];
54+
55+
var milStdType = document.getElementById("typeSelect").value;
56+
57+
//根据选中的军标类型（箭头）绘制图形
58+
switch (milStdType) {
59+
case "SimpleArrow":
60+
var milParam = new MilStd.MilstdParams({
61+
headHeightFactor: 0.15,
62+
headWidthFactor: 0.4,
63+
neckHeightFactor: 0.75,
64+
neckWidthFactor: 0.1,
65+
tailWidthFactor: 0.1,
66+
hasSwallowTail: true,
67+
swallowTailFactor: 0.5
68+
});
69+
break;
70+
case "DoubleArrow":
71+
var milParam = new MilStd.MilstdParams({
72+
headHeightFactor: 0.15,
73+
headWidthFactor: 0.8,
74+
neckHeightFactor: 0.7,
75+
neckWidthFactor: 0.4
76+
});
77+
vertices = [[90, -60], [60, -60], [90, -30], [60, -30]];
78+
break;
79+
case "StraightArrow":
80+
var milParam = new MilStd.MilstdParams({
81+
headHeightFactor: 0.1,
82+
headWidthFactor: 1.3,
83+
neckHeightFactor: 1.0,
84+
neckWidthFactor: 0.7,
85+
tailWidthFactor: 0.07,
86+
hasSwallowTail: false,
87+
swallowTailFactor: 0
88+
});
89+
break;
90+
case "SingleLineArrow":
91+
var milParam = new MilStd.MilstdParams({
92+
headHeightFactor: 0.1,
93+
headWidthFactor: 1.3
94+
});
95+
break;
96+
}
97+
//根据选择类型，用算法绘制相应的图形
98+
var parseDots = MilStd.Arrow.getArrowFromVert(vertices, milStdType, milParam);
99+
//根据最新的算法坐标点绘制几何图形（SingleLineArrow画线，其余三个箭头画多边形）
100+
var tempPoly = null; //图形或线
101+
if (milStdType === "SingleLineArrow") {
102+
tempPoly = L.polyline(parseDots);
103+
} else {
104+
tempPoly = L.polygon(parseDots);
105+
}
106+
//将绘制的多边形添加到地图中（为箭头）
107+
this._PolygonLayer = new L.LayerGroup();
108+
map.addLayer(this._PolygonLayer);
109+
tempPoly.addTo(this._PolygonLayer);
110+
feature = this._PolygonLayer;
111+
}
112+
113+
</script>
114+
</head>
115+
<body onload="init()">
116+
<div id="menu">
117+
<label style="font-weight: bold;">
118+
要添加的箭头类型： &nbsp;
119+
</label>
120+
<select name="type" id="typeSelect">
121+
<option value="SimpleArrow">简单箭头</option>
122+
<option value="DoubleArrow">双箭头</option>
123+
<option value="StraightArrow">直箭头</option>
124+
<option value="SingleLineArrow">单线箭头</option>
125+
</select>
126+
<button onclick="add()">
127+
开始添加
128+
</button>
129+
</div>
130+
<div id="leaf_map" style="width: 100%; height: 95%; z-index: 1">
131+
</div>
132+
</body>
133+
</html>

‎demo/leaflet/example/igserver/milstd/militarycompass.htm‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
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 include="draw,milstdbyleaflet"
7+
src="../../libs/zondyclient/include-leaflet-local.js"></script>
8+
<style type="text/css">
9+
body {
10+
height: 700px;
11+
}
12+
13+
#menu {
14+
text-align: center;
15+
width: 100%;
16+
height: 20px;
17+
padding: 5px 10px;
18+
font-size: 14px;
19+
font-family: "微软雅黑";
20+
left: 10px;
21+
}
22+
</style>
23+
<script type="text/javascript">
24+
var map;
25+
var layer;
26+
function init() {
27+
map = L.map('leaf_map', {
28+
//参考坐标系，默认是墨卡托坐标系（EPSG3857），EPSG4326为经纬度坐标系
29+
crs: L.CRS.EPSG4326,
30+
//显示中心
31+
center: [-20, -20],
32+
//最小显示等级
33+
minZoom: 1,
34+
//最大显示等级
35+
maxZoom: 10,
36+
//当前显示等级
37+
zoom: 2,
38+
//不显示放大缩小按钮
39+
zoomControl: false,
40+
//限制显示地理范围
41+
maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 0))
42+
});
43+
44+
//显示OSM地图
45+
layer = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
46+
//最小显示等级
47+
minZoom: 1,
48+
//最大显示等级
49+
maxZoom: 15,
50+
//设置地图不连续显示
51+
noWrap: true
52+
}).addTo(map);
53+
}
54+
55+
var feature = null;
56+
//定义绘制图标
57+
function add() {
58+
if (feature != null) {
59+
//清空地图
60+
feature.remove();
61+
}
62+
63+
//根据选中的军标类型（指北针）进行军标绘制
64+
var vertices = [[20, -30], [0, -15]];
65+
var milStdType = document.getElementById("typeSelect").value;
66+
var parseDots = MilStd.Compass.getCompassFromVert(vertices, milStdType);
67+
//图形
68+
var tempPoly = L.polygon(parseDots[0]);
69+
//线
70+
var templine = L.polyline(parseDots[1]);
71+
//将绘制的多边形添加到地图中（指北针）
72+
this._PolygonLayer = new L.LayerGroup();
73+
map.addLayer(this._PolygonLayer);
74+
tempPoly.addTo(this._PolygonLayer);
75+
templine.addTo(this._PolygonLayer);
76+
feature = this._PolygonLayer;
77+
}
78+
79+
</script>
80+
</head>
81+
<body onload="init()">
82+
<div id="menu">
83+
<label style="font-weight: bold;">
84+
要添加的指北针类型：
85+
</label>
86+
<select name="type" id="typeSelect">
87+
<option value="ArrowCross">十字箭头指北针</option>
88+
<option value="CircleClosedangle">圆形尖角指北针</option>
89+
<option value="Closedangle">尖角指北针</option>
90+
<option value="DoubleClosedangle">双向尖角指北针</option>
91+
<option value="Fourstar">四角指北针</option>
92+
<option value="Rhombus">菱形指北针</option>
93+
<option value="SameDirectionClosedangle">同向尖角指北针</option>
94+
<option value="Triangle">三角指北针</option>
95+
<option value="Vane">风向标指北针</option>
96+
</select>
97+
<button onclick="add()">
98+
开始添加
99+
</button>
100+
</div>
101+
<div id="leaf_map" style="width: 100%; height: 95%; z-index: 1">
102+
</div>
103+
</body>
104+
</html>

‎demo/leaflet/example/igserver/milstd/militaryflag.htm‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
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 include="draw,milstdbyleaflet"
7+
src="../../libs/zondyclient/include-leaflet-local.js"></script>
8+
<style type="text/css">
9+
body
10+
{
11+
height: 700px;
12+
}
13+
#menu
14+
{
15+
text-align: center;
16+
width: 100%;
17+
height: 20px;
18+
padding: 5px 10px;
19+
font-size: 14px;
20+
font-family: "微软雅黑";
21+
left: 10px;
22+
}
23+
</style>
24+
<script type="text/javascript">
25+
var map;
26+
var layer;
27+
function init() {
28+
map = L.map('leaf_map', {
29+
//参考坐标系，默认是墨卡托坐标系（EPSG3857），EPSG4326为经纬度坐标系
30+
crs: L.CRS.EPSG4326,
31+
//显示中心
32+
center: [0, -0],
33+
//最小显示等级
34+
minZoom: 1,
35+
//最大显示等级
36+
maxZoom: 10,
37+
//当前显示等级
38+
zoom: 2,
39+
//不显示放大缩小按钮
40+
zoomControl: false,
41+
//限制显示地理范围
42+
maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 0))
43+
});
44+
45+
//显示OSM地图
46+
layer = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
47+
//最小显示等级
48+
minZoom: 1,
49+
//最大显示等级
50+
maxZoom: 15,
51+
//设置地图不连续显示
52+
noWrap: true
53+
}).addTo(map);
54+
}
55+
56+
var feature = null;
57+
//定义绘制图标
58+
function add() {
59+
if (feature != null) {
60+
//清空地图
61+
feature.remove();
62+
}
63+
64+
//根据选中的军标类型（指北针）进行军标绘制
65+
var vertices = [[20, -30], [0, -15]];
66+
var milStdType = document.getElementById("typeSelect").value;
67+
//根据类型计算对应军标的坐标点数组
68+
var parseDots = MilStd.Flag.getFlagFromVert(vertices, milStdType);
69+
//图形
70+
var tempPoly = L.polygon(parseDots[0]);
71+
//线
72+
var templine = L.polyline(parseDots[1]);
73+
//将绘制的多边形添加到地图中（旗帜）
74+
this._PolygonLayer = new L.LayerGroup();
75+
map.addLayer(this._PolygonLayer);
76+
tempPoly.addTo(this._PolygonLayer);
77+
templine.addTo(this._PolygonLayer);
78+
feature = this._PolygonLayer;
79+
}
80+
81+
</script>
82+
</head>
83+
<body onload="init()">
84+
<div id="menu">
85+
<label style="font-weight: bold;">
86+
要添加的旗标类型：
87+
</label>
88+
<select name="type" id="typeSelect">
89+
<option value="TriangleFlag">三角旗</option>
90+
<option value="RectFlag">矩形旗</option>
91+
<option value="CurveFlag">波浪旗</option>
92+
</select>
93+
<button onclick="add()">
94+
开始添加</button>
95+
</div>
96+
<div id="leaf_map" style="width: 100%; height: 95%; z-index: 1">
97+
</div>
98+
</body>
99+
</html>

0 commit comments

Comments
 (0)