Skip to content

Commit 9b6e47e

Browse files
chenxianhuiichenxianhuii
committed
fix 修改ugc例子 review by qiw
1 parent 5c47f58 commit 9b6e47e

29 files changed

+212
-220
lines changed

‎examples/leaflet/ugc_computeGeodesicArea.html

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,6 @@
3434
<h5 class="panel-title text-center">计算经纬度面积</h5>
3535
</div>
3636
<div class="panel-body content">
37-
<div class="panel">
38-
<div class="input-group">
39-
<span class="input-group-addon">计算点到线段的距离</span>
40-
</div>
41-
</div>
4237
<input type="button" class="btn btn-default" value="计算" onclick="search()" />
4338
</div>
4439
</div>

‎examples/leaflet/ugc_computeGeodesicDistance.html

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,9 @@
3131
<body>
3232
<div id="toolbar" class="panel panel-primary">
3333
<div class="panel-heading">
34-
<h5 class="panel-title text-center">距离计算</h5>
34+
<h5 class="panel-title text-center">计算测地线的长度</h5>
3535
</div>
3636
<div class="panel-body content">
37-
<div class="panel">
38-
<div class="input-group">
39-
<span class="input-group-addon">计算点到线段的距离</span>
40-
</div>
41-
</div>
4237
<input type="button" class="btn btn-default" value="计算" onclick="search()" />&nbsp;
4338
</div>
4439
</div>
@@ -47,6 +42,7 @@ <h5 class="panel-title text-center">距离计算</h5>
4742
<script type="text/javascript" include="ugcwasm" src="../../dist/leaflet/include-leaflet.js"></script>
4843
<script>
4944
var map, popup, marker, line;
45+
popup = L.popup();
5046
var map, bufferLayer;
5147
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
5248
var url = host + '/iserver/services/map-world/rest/maps/World';
@@ -63,7 +59,6 @@ <h5 class="panel-title text-center">距离计算</h5>
6359
});
6460

6561
function addFeatures() {
66-
marker = L.marker([30, 123]).addTo(map);
6762
line = {
6863
type: 'Feature',
6964
geometry: {
@@ -89,11 +84,13 @@ <h5 class="panel-title text-center">距离计算</h5>
8984
var geometryAnalysis = new L.supermap.GeometryAnalysis();
9085
var distance;
9186
distance = geometryAnalysis.computeGeodesicDistance([120, 125], [30, 30], 6378137, 0.0033528106647475);
92-
marker.bindPopup('距离为: ' + distance).openPopup();
87+
popup.setLatLng([30, 123])
88+
.setContent('距离为: ' + distance)
89+
.openOn(map);
9390
}
9491

9592
function clearPopup() {
96-
marker && marker.closePopup();
93+
map.closePopup();
9794
}
9895
</script>
9996
</body>

‎examples/leaflet/ugc_distanceToLineSegment.html

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,9 @@
3131
<body>
3232
<div id="toolbar" class="panel panel-primary">
3333
<div class="panel-heading">
34-
<h5 class="panel-title text-center">距离计算</h5>
34+
<h5 class="panel-title text-center">计算点到线段的距离</h5>
3535
</div>
3636
<div class="panel-body content">
37-
<div class="panel">
38-
<div class="input-group">
39-
<span class="input-group-addon">计算点到线段的距离</span>
40-
</div>
41-
</div>
42-
<div class="panel distanceTip">(两个几何对象边线间最短距离)</div>
43-
<div class="panel distanceToLineSegmentTip" style="display: none">
44-
(如果点到线段的垂足不在线段上，则返回点到线段较近的端点的距离)
45-
</div>
4637
<input type="button" class="btn btn-default" value="计算" onclick="search()" />&nbsp;
4738
<input type="button" class="btn btn-default" value="移除" onclick="clearPopup()" />
4839
</div>

‎examples/leaflet/ugc_isIntersectRegionWithRect.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<body>
3232
<div id="toolbar" class="panel panel-primary">
3333
<div class="panel-heading">
34-
<h5 class="panel-title text-center">线光滑</h5>
34+
<h5 class="panel-title text-center">面与矩形相交检测</h5>
3535
</div>
3636
<div class="panel-body content">
3737
<input type="button" class="btn btn-default" value="执行" onclick="search()" />

‎examples/leaflet/ugc_pointPositon.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,9 @@ <h5 class="panel-title text-center">点线关系</h5>
229229
if (pointResult) {
230230
pointResult.removeFrom(map);
231231
}
232+
if (lineResult) {
233+
lineResult.removeFrom(map);
234+
}
232235
// if (!map) {
233236
// return;
234237
// }

‎examples/leaflet/ugc_resample.html

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,20 +35,21 @@ <h5 class="panel-title text-center">重采样</h5>
3535
</div>
3636
<div class="panel-body content">
3737
<input type="button" class="btn btn-default" value="计算" onclick="search()" />&nbsp;
38+
<input type="button" class="btn btn-default" value="移除" onclick="clearLayer()" />
3839
</div>
3940
</div>
4041
<div id="map" style="width: 100%; height: 100%"></div>
4142
<script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
4243
<script type="text/javascript" include="ugcwasm" src="../../dist/leaflet/include-leaflet.js"></script>
4344
<script>
44-
var map, polygon;
45+
var map, polygon, resLayer;
4546
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
4647
var url = host + '/iserver/services/map-world/rest/maps/World';
4748
L.supermap
4849
.initMap(url, {
4950
mapOptions: {
50-
center: [30, 120],
51-
zoom: 6
51+
center: [60, 40],
52+
zoom: 4
5253
}
5354
})
5455
.then((res) => {
@@ -105,16 +106,21 @@ <h5 class="panel-title text-center">重采样</h5>
105106
}
106107

107108
function search() {
109+
clearLayer();
108110
var geometryAnalysis = new L.supermap.GeometryAnalysis();
109111
var result = geometryAnalysis.resample(polygon, 0.5);
110-
L.geoJSON(result, {
112+
resLayer = L.geoJSON(result, {
111113
style: function(params) {
112114
return {
113115
color: 'green'
114116
}
115117
}
116118
}).addTo(map);
117119
}
120+
121+
function clearLayer() {
122+
resLayer && resLayer.removeFrom(map);
123+
}
118124
</script>
119125
</body>
120126
</html>

‎examples/leaflet/ugc_smooth.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,14 @@ <h5 class="panel-title text-center">线光滑</h5>
3535
</div>
3636
<div class="panel-body content">
3737
<input type="button" class="btn btn-default" value="执行" onclick="search()" />
38+
<input type="button" class="btn btn-default" value="移除" onclick="clearLayer()" />
3839
</div>
3940
</div>
4041
<div id="map" style="width: 100%; height: 100%"></div>
4142
<script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
4243
<script type="text/javascript" include="ugcwasm" src="../../dist/leaflet/include-leaflet.js"></script>
4344
<script>
44-
var map, popup, point, line;
45+
var map, resLayer, point, line;
4546
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
4647
var url = host + '/iserver/services/map-world/rest/maps/World';
4748
L.supermap
@@ -95,10 +96,11 @@ <h5 class="panel-title text-center">线光滑</h5>
9596
}
9697

9798
function search() {
99+
clearLayer();
98100
var geometryAnalysis = new L.supermap.GeometryAnalysis();
99101
let smoothLine;
100102
smoothLine = geometryAnalysis.smooth(line, point);
101-
L.geoJSON(smoothLine, {
103+
resLayer = L.geoJSON(smoothLine, {
102104
style: function() {
103105
return {
104106
weight: 5,
@@ -107,6 +109,10 @@ <h5 class="panel-title text-center">线光滑</h5>
107109
}
108110
}).addTo(map);
109111
}
112+
113+
function clearLayer() {
114+
resLayer && resLayer.removeFrom(map);
115+
}
110116
</script>
111117
</body>
112118
</html>

‎examples/leaflet/ugc_spatialRelationship.html

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ <h5 class="panel-title text-center">空间关系</h5>
5252
<script type="text/javascript" include="ugcwasm" src="../../dist/leaflet/include-leaflet.js"></script>
5353
<script>
5454
var map, targetPolygon, searchPolygons, searchLines, searchPoints;
55+
var resArr = [];
5556
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
5657
var url = host + '/iserver/services/map-world/rest/maps/World';
5758
L.supermap
@@ -163,7 +164,7 @@ <h5 class="panel-title text-center">空间关系</h5>
163164
type: 'Polygon'
164165
}
165166
};
166-
searchPolygons = [targetPolygon, polygon1];
167+
searchPolygons = [targetPolygon, polygon1, polygon2];
167168
L.geoJSON(searchPolygons).addTo(map);
168169
}
169170

@@ -178,12 +179,19 @@ <h5 class="panel-title text-center">空间关系</h5>
178179
searchResults.push(polygon);
179180
}
180181
});
182+
searchResults.forEach((item) => {
183+
res = L.geoJSON(item).addTo(map);
184+
resArr.push(res);
185+
});
181186
}
182187

183188
function clearLayer() {
184189
if (!map) {
185190
return;
186191
}
192+
resArr.forEach(res => {
193+
res.removeFrom(map);
194+
})
187195
}
188196
</script>
189197
</body>

‎examples/mapboxgl/ugc_computeGeodesicArea.html

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,6 @@
3434
<h5 class="panel-title text-center">计算经纬度面积</h5>
3535
</div>
3636
<div class="panel-body content">
37-
<div class="panel">
38-
<div class="input-group">
39-
<span class="input-group-addon">计算点到线段的距离</span>
40-
</div>
41-
</div>
4237
<input type="button" class="btn btn-default" value="计算" onclick="search()" />
4338
</div>
4439
</div>

‎examples/mapboxgl/ugc_computeGeodesicDistance.html

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,9 @@
3131
<body>
3232
<div id="toolbar" class="panel panel-primary">
3333
<div class="panel-heading">
34-
<h5 class="panel-title text-center">距离计算</h5>
34+
<h5 class="panel-title text-center">计算测地线的长度</h5>
3535
</div>
3636
<div class="panel-body content">
37-
<div class="panel">
38-
<div class="input-group">
39-
<span class="input-group-addon">计算点到线段的距离</span>
40-
</div>
41-
</div>
4237
<input type="button" class="btn btn-default" value="计算" onclick="search()" />&nbsp;
4338
</div>
4439
</div>

‎examples/mapboxgl/ugc_computeParallel_test.html renamed to ‎examples/mapboxgl/ugc_computeParallel.html

Lines changed: 17 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -31,30 +31,24 @@
3131
<body>
3232
<div id="toolbar" class="panel panel-primary">
3333
<div class="panel-heading">
34-
<h5 class="panel-title text-center">距离计算</h5>
34+
<h5 class="panel-title text-center">根据设置距离获取直线平行线</h5>
3535
</div>
3636
<div class="panel-body content">
3737
<div class="panel">
3838
<div class="input-group">
39-
<span class="input-group-addon">计算</span>
40-
<select id="operation" class="form-control">
41-
<option value="distanceToLineSegment">点到线段的距离</option>
42-
</select>
39+
<span class="input-group-addon">线距(米)</span>
40+
<input class="form-control" id="distance" type="number" value="5" />
4341
</div>
4442
</div>
45-
<div class="panel distanceTip">(两个几何对象边线间最短距离)</div>
46-
<div class="panel distanceToLineSegmentTip" style="display: none">
47-
(如果点到线段的垂足不在线段上，则返回点到线段较近的端点的距离)
48-
</div>
49-
<input type="button" class="btn btn-default" value="计算" onclick="search()" />&nbsp;
50-
<input type="button" class="btn btn-default" value="移除" onclick="clearPopup()" />
43+
<input type="button" class="btn btn-default" value="分析" onclick="search()" />&nbsp;
44+
<input type="button" class="btn btn-default" value="移除" onclick="clearLayer()" />
5145
</div>
5246
</div>
5347
<div id="map" style="width: 100%; height: 100%"></div>
5448
<script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
5549
<script type="text/javascript" include="ugcwasm" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
5650
<script>
57-
var map, popup, point, line;
51+
var map, popup, point, line, res;
5852
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
5953
var url = host + '/iserver/services/map-world/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}';
6054
function initMap(url) {
@@ -79,7 +73,7 @@ <h5 class="panel-title text-center">距离计算</h5>
7973
]
8074
},
8175
center: [120, 30],
82-
zoom: 6
76+
zoom: 5
8377
});
8478
map.on('load', function () {
8579
resolve(map);
@@ -104,33 +98,15 @@ <h5 class="panel-title text-center">距离计算</h5>
10498
}
10599

106100
function search() {
107-
clearPopup();
108-
const operationFun = document.getElementById('operation').value;
101+
clearLayer();
102+
const distance = parseFloat(document.getElementById('distance').value);
109103
var geometryAnalysis = new mapboxgl.supermap.GeometryAnalysis();
110-
let distance;
111-
distance = geometryAnalysis.computeParallel(
112-
{
113-
type: 'Feature',
114-
properties: {},
115-
geometry: {
116-
coordinates: [
117-
[120, 30],
118-
[125, 30]
119-
],
120-
type: 'LineString'
121-
}
122-
},
123-
5
124-
);
125-
addLayer('line1', 'line', [distance], {
104+
const res = geometryAnalysis.computeParallel(line, distance);
105+
console.log(res)
106+
addLayer('line1', 'line', [res], {
126107
'line-color': 'green',
127108
'line-width': 5
128109
});
129-
130-
// popup = new mapboxgl.Popup()
131-
// .setLngLat(point.geometry.coordinates)
132-
// .setHTML('距离为: ' + distance)
133-
// .addTo(map);
134110
}
135111

136112
function addLayer(id, type, sourceData, paint) {
@@ -148,8 +124,11 @@ <h5 class="panel-title text-center">距离计算</h5>
148124
});
149125
}
150126

151-
function clearPopup() {
152-
popup && popup.remove();
127+
function clearLayer() {
128+
if (map.getLayer("line1")) {
129+
map.removeLayer("line1")
130+
map.removeSource("line1")
131+
}
153132
}
154133

155134
initMap(url).then((map) => {

0 commit comments

Comments
 (0)