fix 修改ugc例子 review by qiw

SuperMap · Apr 29, 2024 · 9b6e47e · 9b6e47e
1 parent 5c47f58
commit 9b6e47e
Show file tree

Hide file tree

Showing 29 changed files with 212 additions and 220 deletions.
diff --git a/examples/leaflet/ugc_computeGeodesicArea.html b/examples/leaflet/ugc_computeGeodesicArea.html
@@ -34,11 +34,6 @@
         <h5 class="panel-title text-center">计算经纬度面积</h5>
       </div>
       <div class="panel-body content">
-        <div class="panel">
-          <div class="input-group">
-            <span class="input-group-addon">计算点到线段的距离</span>
-          </div>
-        </div>
         <input type="button" class="btn btn-default" value="计算" onclick="search()" />
       </div>
     </div>

diff --git a/examples/leaflet/ugc_computeGeodesicDistance.html b/examples/leaflet/ugc_computeGeodesicDistance.html
@@ -31,14 +31,9 @@
   <body>
     <div id="toolbar" class="panel panel-primary">
       <div class="panel-heading">
-        <h5 class="panel-title text-center">距离计算</h5>
+        <h5 class="panel-title text-center">计算测地线的长度</h5>
       </div>
       <div class="panel-body content">
-        <div class="panel">
-          <div class="input-group">
-            <span class="input-group-addon">计算点到线段的距离</span>
-          </div>
-        </div>
         <input type="button" class="btn btn-default" value="计算" onclick="search()" />&nbsp;
       </div>
     </div>
@@ -47,6 +42,7 @@ <h5 class="panel-title text-center">距离计算</h5>
     <script type="text/javascript" include="ugcwasm" src="../../dist/leaflet/include-leaflet.js"></script>
     <script>
       var map, popup, marker, line;
+      popup = L.popup();
       var map, bufferLayer;
       var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
       var url = host + '/iserver/services/map-world/rest/maps/World';
@@ -63,7 +59,6 @@ <h5 class="panel-title text-center">距离计算</h5>
         });
 
       function addFeatures() {
-        marker = L.marker([30, 123]).addTo(map);
         line = {
           type: 'Feature',
           geometry: {
@@ -89,11 +84,13 @@ <h5 class="panel-title text-center">距离计算</h5>
         var geometryAnalysis = new L.supermap.GeometryAnalysis();
         var distance;
         distance = geometryAnalysis.computeGeodesicDistance([120, 125], [30, 30], 6378137, 0.0033528106647475);
-        marker.bindPopup('距离为: ' + distance).openPopup();
+        popup.setLatLng([30, 123])
+              .setContent('距离为: ' + distance)
+              .openOn(map);
       }
 
       function clearPopup() {
-        marker && marker.closePopup();
+        map.closePopup();
       }
     </script>
   </body>

diff --git a/examples/leaflet/ugc_distanceToLineSegment.html b/examples/leaflet/ugc_distanceToLineSegment.html
@@ -31,18 +31,9 @@
   <body>
     <div id="toolbar" class="panel panel-primary">
       <div class="panel-heading">
-        <h5 class="panel-title text-center">距离计算</h5>
+        <h5 class="panel-title text-center">计算点到线段的距离</h5>
       </div>
       <div class="panel-body content">
-        <div class="panel">
-          <div class="input-group">
-            <span class="input-group-addon">计算点到线段的距离</span>
-          </div>
-        </div>
-        <div class="panel distanceTip">(两个几何对象边线间最短距离)</div>
-        <div class="panel distanceToLineSegmentTip" style="display: none">
-          (如果点到线段的垂足不在线段上，则返回点到线段较近的端点的距离)
-        </div>
         <input type="button" class="btn btn-default" value="计算" onclick="search()" />&nbsp;
         <input type="button" class="btn btn-default" value="移除" onclick="clearPopup()" />
       </div>

diff --git a/examples/leaflet/ugc_isIntersectRegionWithRect.html b/examples/leaflet/ugc_isIntersectRegionWithRect.html
@@ -31,7 +31,7 @@
   <body>
     <div id="toolbar" class="panel panel-primary">
       <div class="panel-heading">
-        <h5 class="panel-title text-center">线光滑</h5>
+        <h5 class="panel-title text-center">面与矩形相交检测</h5>
       </div>
       <div class="panel-body content">
         <input type="button" class="btn btn-default" value="执行" onclick="search()" />

diff --git a/examples/leaflet/ugc_pointPositon.html b/examples/leaflet/ugc_pointPositon.html
@@ -229,6 +229,9 @@ <h5 class="panel-title text-center">点线关系</h5>
         if (pointResult) {
           pointResult.removeFrom(map);
         }
+        if (lineResult) {
+          lineResult.removeFrom(map);
+        }
         // if (!map) {
         //   return;
         // }

diff --git a/examples/leaflet/ugc_resample.html b/examples/leaflet/ugc_resample.html
@@ -35,20 +35,21 @@ <h5 class="panel-title text-center">重采样</h5>
       </div>
       <div class="panel-body content">
         <input type="button" class="btn btn-default" value="计算" onclick="search()" />&nbsp;
+        <input type="button" class="btn btn-default" value="移除" onclick="clearLayer()" />
       </div>
     </div>
     <div id="map" style="width: 100%; height: 100%"></div>
     <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
     <script type="text/javascript" include="ugcwasm" src="../../dist/leaflet/include-leaflet.js"></script>
     <script>
-      var map, polygon;
+      var map, polygon, resLayer;
       var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
       var url = host + '/iserver/services/map-world/rest/maps/World';
       L.supermap
         .initMap(url, {
           mapOptions: {
-            center: [30, 120],
-            zoom: 6
+            center: [60, 40],
+            zoom: 4
           }
         })
         .then((res) => {
@@ -105,16 +106,21 @@ <h5 class="panel-title text-center">重采样</h5>
       }
 
       function search() {
+        clearLayer();
         var geometryAnalysis = new L.supermap.GeometryAnalysis();
         var result = geometryAnalysis.resample(polygon, 0.5);
-        L.geoJSON(result, {
+        resLayer = L.geoJSON(result, {
           style: function(params) {
             return {
               color: 'green'
             }
           }
         }).addTo(map);
       }
+
+      function clearLayer() {
+        resLayer && resLayer.removeFrom(map);
+      }
     </script>
   </body>
 </html>
diff --git a/examples/leaflet/ugc_smooth.html b/examples/leaflet/ugc_smooth.html
@@ -35,13 +35,14 @@ <h5 class="panel-title text-center">线光滑</h5>
       </div>
       <div class="panel-body content">
         <input type="button" class="btn btn-default" value="执行" onclick="search()" />
+        <input type="button" class="btn btn-default" value="移除" onclick="clearLayer()" />
       </div>
     </div>
     <div id="map" style="width: 100%; height: 100%"></div>
     <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
     <script type="text/javascript" include="ugcwasm" src="../../dist/leaflet/include-leaflet.js"></script>
     <script>
-      var map, popup, point, line;
+      var map, resLayer, point, line;
       var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
       var url = host + '/iserver/services/map-world/rest/maps/World';
       L.supermap
@@ -95,10 +96,11 @@ <h5 class="panel-title text-center">线光滑</h5>
       }
 
       function search() {
+        clearLayer();
         var geometryAnalysis = new L.supermap.GeometryAnalysis();
         let smoothLine;
         smoothLine = geometryAnalysis.smooth(line, point);
-        L.geoJSON(smoothLine, {
+        resLayer = L.geoJSON(smoothLine, {
           style: function() {
             return {
               weight: 5,
@@ -107,6 +109,10 @@ <h5 class="panel-title text-center">线光滑</h5>
           }
         }).addTo(map);
       }
+
+      function clearLayer() {
+        resLayer && resLayer.removeFrom(map);
+      }
     </script>
   </body>
 </html>
diff --git a/examples/leaflet/ugc_spatialRelationship.html b/examples/leaflet/ugc_spatialRelationship.html
@@ -52,6 +52,7 @@ <h5 class="panel-title text-center">空间关系</h5>
     <script type="text/javascript" include="ugcwasm" src="../../dist/leaflet/include-leaflet.js"></script>
     <script>
       var map, targetPolygon, searchPolygons, searchLines, searchPoints;
+      var resArr = [];
       var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
       var url = host + '/iserver/services/map-world/rest/maps/World';
       L.supermap
@@ -163,7 +164,7 @@ <h5 class="panel-title text-center">空间关系</h5>
             type: 'Polygon'
           }
         };
-        searchPolygons = [targetPolygon, polygon1];
+        searchPolygons = [targetPolygon, polygon1, polygon2];
         L.geoJSON(searchPolygons).addTo(map);
       }
 
@@ -178,12 +179,19 @@ <h5 class="panel-title text-center">空间关系</h5>
             searchResults.push(polygon);
           }
         });
+        searchResults.forEach((item) => {
+          res = L.geoJSON(item).addTo(map);
+          resArr.push(res);
+        });
       }
 
       function clearLayer() {
         if (!map) {
           return;
         }
+        resArr.forEach(res => {
+          res.removeFrom(map);
+        })
       }
     </script>
   </body>

diff --git a/examples/mapboxgl/ugc_computeGeodesicArea.html b/examples/mapboxgl/ugc_computeGeodesicArea.html
@@ -34,11 +34,6 @@
         <h5 class="panel-title text-center">计算经纬度面积</h5>
       </div>
       <div class="panel-body content">
-        <div class="panel">
-          <div class="input-group">
-            <span class="input-group-addon">计算点到线段的距离</span>
-          </div>
-        </div>
         <input type="button" class="btn btn-default" value="计算" onclick="search()" />
       </div>
     </div>

diff --git a/examples/mapboxgl/ugc_computeGeodesicDistance.html b/examples/mapboxgl/ugc_computeGeodesicDistance.html
@@ -31,14 +31,9 @@
   <body>
     <div id="toolbar" class="panel panel-primary">
       <div class="panel-heading">
-        <h5 class="panel-title text-center">距离计算</h5>
+        <h5 class="panel-title text-center">计算测地线的长度</h5>
       </div>
       <div class="panel-body content">
-        <div class="panel">
-          <div class="input-group">
-            <span class="input-group-addon">计算点到线段的距离</span>
-          </div>
-        </div>
         <input type="button" class="btn btn-default" value="计算" onclick="search()" />&nbsp;
       </div>
     </div>

diff --git a/...es/mapboxgl/ugc_computeParallel_test.html → examples/mapboxgl/ugc_computeParallel.html b/...es/mapboxgl/ugc_computeParallel_test.html → examples/mapboxgl/ugc_computeParallel.html
@@ -31,30 +31,24 @@
   <body>
     <div id="toolbar" class="panel panel-primary">
       <div class="panel-heading">
-        <h5 class="panel-title text-center">距离计算</h5>
+        <h5 class="panel-title text-center">根据设置距离获取直线平行线</h5>
       </div>
       <div class="panel-body content">
         <div class="panel">
           <div class="input-group">
-            <span class="input-group-addon">计算</span>
-            <select id="operation" class="form-control">
-              <option value="distanceToLineSegment">点到线段的距离</option>
-            </select>
+            <span class="input-group-addon">线距(米)</span>
+            <input class="form-control" id="distance" type="number" value="5" />
           </div>
         </div>
-        <div class="panel distanceTip">(两个几何对象边线间最短距离)</div>
-        <div class="panel distanceToLineSegmentTip" style="display: none">
-          (如果点到线段的垂足不在线段上，则返回点到线段较近的端点的距离)
-        </div>
-        <input type="button" class="btn btn-default" value="计算" onclick="search()" />&nbsp;
-        <input type="button" class="btn btn-default" value="移除" onclick="clearPopup()" />
+        <input type="button" class="btn btn-default" value="分析" onclick="search()" />&nbsp;
+        <input type="button" class="btn btn-default" value="移除" onclick="clearLayer()" />
       </div>
     </div>
     <div id="map" style="width: 100%; height: 100%"></div>
     <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
     <script type="text/javascript" include="ugcwasm" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
     <script>
-      var map, popup, point, line;
+      var map, popup, point, line, res;
       var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
       var url = host + '/iserver/services/map-world/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}';
       function initMap(url) {
@@ -79,7 +73,7 @@ <h5 class="panel-title text-center">距离计算</h5>
               ]
             },
             center: [120, 30],
-            zoom: 6
+            zoom: 5
           });
           map.on('load', function () {
             resolve(map);
@@ -104,33 +98,15 @@ <h5 class="panel-title text-center">距离计算</h5>
       }
 
       function search() {
-        clearPopup();
-        const operationFun = document.getElementById('operation').value;
+        clearLayer();
+        const distance = parseFloat(document.getElementById('distance').value);
         var geometryAnalysis = new mapboxgl.supermap.GeometryAnalysis();
-        let distance;
-        distance = geometryAnalysis.computeParallel(
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              coordinates: [
-                [120, 30],
-                [125, 30]
-              ],
-              type: 'LineString'
-            }
-          },
-          5
-        );
-        addLayer('line1', 'line', [distance], {
+        const res = geometryAnalysis.computeParallel(line, distance);
+        console.log(res)
+        addLayer('line1', 'line', [res], {
           'line-color': 'green',
           'line-width': 5
         });
-
-        // popup = new mapboxgl.Popup()
-        //   .setLngLat(point.geometry.coordinates)
-        //   .setHTML('距离为: ' + distance)
-        //   .addTo(map);
       }
 
       function addLayer(id, type, sourceData, paint) {
@@ -148,8 +124,11 @@ <h5 class="panel-title text-center">距离计算</h5>
         });
       }
 
-      function clearPopup() {
-        popup && popup.remove();
+      function clearLayer() {
+        if (map.getLayer("line1")) {
+          map.removeLayer("line1")
+          map.removeSource("line1")
+        }
       }
 
       initMap(url).then((map) => {