Skip to content

Commit 1b518fc

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

Some content is hidden

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

46 files changed

+5027
-975
lines changed

‎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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy