update 优化客户端分析接口，文档，示例 review by luox

SuperMap · Sep 18, 2024 · f26d15f · f26d15f
1 parent 54c7f1f
commit f26d15f
Show file tree

Hide file tree

Showing 31 changed files with 637 additions and 196 deletions.
diff --git a/build/jsdocs/template/typeLinkExt.js b/build/jsdocs/template/typeLinkExt.js
@@ -105,6 +105,7 @@ var typeLinks = {
     "GeoJSONObject": geojsonapi,
     "GeoJSONGeometry": geometryapi +'#section-3.1',
     "GeoJSONFeature": geometryapi + '#section-3.2',
+    "FeatureCollection": geometryapi + '#section-3.3',
     // WebMap 结构
     "WebMapSummaryObject": helpDocApi + '#iP/Appendix/WebMap/WebMapSummary.htm',
     "FlatGeobuf": 'https://github.com/flatgeobuf/flatgeobuf',

diff --git a/examples/leaflet/ugc_computeGeodesicArea.html b/examples/leaflet/ugc_computeGeodesicArea.html
@@ -29,13 +29,17 @@
         z-index: 10000;
         border-radius: 4px;
       }
+      .leaflet-popup-content {
+        width: 280px;
+        font-size: 16px !important;
+      }
     </style>
   </head>
 
   <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()" />
@@ -98,7 +102,7 @@ <h5 class="panel-title text-center">计算经纬度面积</h5>
         var geometryAnalysis = new L.supermap.GeometryAnalysis();
         var area;
         area = geometryAnalysis.computeGeodesicArea(polygon);
-        marker.bindPopup('面积为: ' + area).openPopup();
+        marker.bindPopup('面积为: ' + area + ' 平方米').openPopup();
       }
 
       function clearPopup() {

diff --git a/examples/leaflet/ugc_computeGeodesicDistance.html b/examples/leaflet/ugc_computeGeodesicDistance.html
@@ -29,6 +29,10 @@
         z-index: 10000;
         border-radius: 4px;
       }
+      .leaflet-popup-content {
+        width: 280px;
+        font-size: 16px !important;
+      }
     </style>
   </head>
 
@@ -87,10 +91,19 @@ <h5 class="panel-title text-center">计算测地线的长度</h5>
         clearPopup();
         var geometryAnalysis = new L.supermap.GeometryAnalysis();
         var distance;
-        distance = geometryAnalysis.computeGeodesicDistance([120, 125], [30, 30], 6378137, 0.0033528106647475);
-        popup.setLatLng([30, 123])
-              .setContent('距离为: ' + distance)
-              .openOn(map);
+        distance = geometryAnalysis.computeGeodesicDistance(
+          [
+            [120, 30],
+            [125, 30]
+          ],
+          6378137,
+          0.0033528106647475,
+          'KILOMETER'
+        );
+        popup
+          .setLatLng([30, 123])
+          .setContent('长度为: ' + distance + '千米')
+          .openOn(map);
       }
 
       function clearPopup() {

diff --git a/examples/leaflet/ugc_computeParallel.html b/examples/leaflet/ugc_computeParallel.html
@@ -40,8 +40,8 @@ <h5 class="panel-title text-center">根据设置距离获取直线平行线</h5>
       <div class="panel-body content">
         <div class="panel">
           <div class="input-group">
-            <span class="input-group-addon">线距(度)</span>
-            <input class="form-control" id="distance" type="number" value="5" />
+            <span class="input-group-addon">线距(千米)</span>
+            <input class="form-control" id="distance" type="number" value="500" />
           </div>
         </div>
         <input type="button" class="btn btn-default" value="分析" onclick="createParallel()" />&nbsp;
@@ -85,7 +85,7 @@ <h5 class="panel-title text-center">根据设置距离获取直线平行线</h5>
         clearLayer();
         var geometryAnalysis = new L.supermap.GeometryAnalysis();
         const distance = parseFloat(document.getElementById('distance').value);
-        const res = geometryAnalysis.computeParallel(line, distance);
+        const res = geometryAnalysis.computeParallel(line, distance, 'DEGREE', 'KILOMETER');
         parallelLine = L.geoJSON(res);
         parallelLine.addTo(map);
       }

diff --git a/examples/leaflet/ugc_convexHull.html b/examples/leaflet/ugc_convexHull.html
@@ -125,17 +125,10 @@ <h5 class="panel-title text-center">计算</h5>
         var geometryAnalysis = new L.supermap.GeometryAnalysis();
         const pointsCoors = pointLists.map((point) => point.geometry.coordinates);
         if (operationFun === 'computeConvexHull') {
-          calRes = geometryAnalysis[operationFun](pointsCoors, pointsCoors.length);
+          calRes = geometryAnalysis[operationFun](pointsCoors);
         } else {
-          const xArrs = [];
-          const yArrs = [];
-          pointsCoors.forEach((p) => {
-            xArrs.push(p[0]);
-            yArrs.push(p[1]);
-          });
-          calRes = geometryAnalysis[operationFun](xArrs, yArrs, pointsCoors.length);
+          calRes = geometryAnalysis[operationFun](pointLists);
         }
-        console.log(calRes);
         layer = L.geoJSON(calRes);
         layer.addTo(map);
       }

diff --git a/examples/leaflet/ugc_distanceToLineSegment.html b/examples/leaflet/ugc_distanceToLineSegment.html
@@ -29,6 +29,10 @@
         z-index: 10000;
         border-radius: 4px;
       }
+      .leaflet-popup-content {
+        width: 240px;
+        font-size: 16px !important;
+      }
     </style>
   </head>
 
@@ -88,10 +92,9 @@ <h5 class="panel-title text-center">计算点到线段的距离</h5>
         clearPopup();
         var geometryAnalysis = new L.supermap.GeometryAnalysis();
         var distance;
-        distance = geometryAnalysis.distanceToLineSegment(123, 25, 120, 30, 125, 30);
-        marker.bindPopup('距离为: ' + distance + '°').openPopup();
+        distance = geometryAnalysis.distanceToLineSegment(123, 25, 120, 30, 125, 30, 'DEGREE', 'KILOMETER');
+        marker.bindPopup('距离为: ' + distance + '千米').openPopup();
       }
-
       function clearPopup() {
         marker && marker.closePopup();
       }

diff --git a/examples/leaflet/ugc_pointPositon.html b/examples/leaflet/ugc_pointPositon.html
@@ -234,13 +234,6 @@ <h5 class="panel-title text-center">点线关系</h5>
         if (lineResult) {
           lineResult.removeFrom(map);
         }
-        // if (!map) {
-        //   return;
-        // }
-        // if (map.getLayer('highlightPoints')) {
-        //   map.removeLayer('highlightPoints');
-        //   map.removeSource('highlightPoints');
-        // }
       }
     </script>
   </body>

diff --git a/examples/mapboxgl/ugc_computeGeodesicArea.html b/examples/mapboxgl/ugc_computeGeodesicArea.html
@@ -35,7 +35,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()" />
@@ -112,7 +112,7 @@ <h5 class="panel-title text-center">计算经纬度面积</h5>
         area = geometryAnalysis.computeGeodesicArea(polygon);
         popup = new mapboxgl.Popup()
           .setLngLat([121, 31])
-          .setHTML('面积为: ' + area)
+          .setHTML('面积为: ' + area + '平方米')
           .addTo(map);
       }
 

diff --git a/examples/mapboxgl/ugc_computeGeodesicDistance.html b/examples/mapboxgl/ugc_computeGeodesicDistance.html
@@ -101,14 +101,15 @@ <h5 class="panel-title text-center">计算测地线的长度</h5>
         var geometryAnalysis = new mapboxgl.supermap.GeometryAnalysis();
         var distance;
         distance = geometryAnalysis.computeGeodesicDistance(
-          [120, 125],
-          [30, 30],
+          [[120, 30],
+          [125, 30]],
           6378137,
-          0.0033528106647475
+          0.0033528106647475,
+          'KILOMETER'
         );
         popup = new mapboxgl.Popup()
           .setLngLat([123, 30])
-          .setHTML('距离为: ' + distance)
+          .setHTML('长度为: ' + distance + '千米')
           .addTo(map);
       }
 

diff --git a/examples/mapboxgl/ugc_computeParallel.html b/examples/mapboxgl/ugc_computeParallel.html
@@ -40,8 +40,8 @@ <h5 class="panel-title text-center">根据设置距离获取直线平行线</h5>
       <div class="panel-body content">
         <div class="panel">
           <div class="input-group">
-            <span class="input-group-addon">线距(度)</span>
-            <input class="form-control" id="distance" type="number" value="5" />
+            <span class="input-group-addon">线距(千米)</span>
+            <input class="form-control" id="distance" type="number" value="500" />
           </div>
         </div>
         <input type="button" class="btn btn-default" value="分析" onclick="search()" />&nbsp;
@@ -105,8 +105,7 @@ <h5 class="panel-title text-center">根据设置距离获取直线平行线</h5>
         clearLayer();
         const distance = parseFloat(document.getElementById('distance').value);
         var geometryAnalysis = new mapboxgl.supermap.GeometryAnalysis();
-        const res = geometryAnalysis.computeParallel(line, distance);
-        console.log(res)
+        const res = geometryAnalysis.computeParallel(line, distance, 'DEGREE', 'KILOMETER');
         addLayer('line1', 'line', [res], {
           'line-color': 'green',
           'line-width': 5

diff --git a/examples/mapboxgl/ugc_convexHull.html b/examples/mapboxgl/ugc_convexHull.html
@@ -159,16 +159,9 @@ <h5 class='panel-title text-center'>计算</h5>
           const pointsCoors = pointLists.map(point => point.geometry.coordinates);
           var geometryAnalysis = new mapboxgl.supermap.GeometryAnalysis();
           if (operationFun === 'computeConvexHull') {
-            calRes = geometryAnalysis[operationFun](pointsCoors, pointsCoors.length);
+            calRes = geometryAnalysis[operationFun](pointsCoors);
           } else {
-            const xArrs = [];
-            const yArrs = [];
-            pointsCoors.forEach(p => {
-              xArrs.push(p[0]);
-              yArrs.push(p[1]);
-            });
-            calRes = geometryAnalysis[operationFun](xArrs, yArrs, pointsCoors.length);
-            console.log(calRes)
+            calRes = geometryAnalysis[operationFun](pointLists);
           }
           map.addLayer({
             "id": "fill",

diff --git a/examples/mapboxgl/ugc_distanceToLineSegment.html b/examples/mapboxgl/ugc_distanceToLineSegment.html
@@ -134,10 +134,10 @@ <h5 class="panel-title text-center">计算点到线段的距离</h5>
         clearPopup();
         var geometryAnalysis = new mapboxgl.supermap.GeometryAnalysis();
         var distance;
-        distance = geometryAnalysis.distanceToLineSegment(123, 25, 120, 30, 125, 30);
+        distance = geometryAnalysis.distanceToLineSegment(123, 25, 120, 30, 125, 30, 'DEGREE', 'KILOMETER');
         popup = new mapboxgl.Popup()
           .setLngLat([123, 25])
-          .setHTML('距离为: ' + distance + '°')
+          .setHTML('距离为: ' + distance + '千米')
           .addTo(map);
       }
 

diff --git a/examples/maplibregl/ugc_computeGeodesicArea.html b/examples/maplibregl/ugc_computeGeodesicArea.html
@@ -35,7 +35,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()" />
@@ -112,7 +112,7 @@ <h5 class="panel-title text-center">计算经纬度面积</h5>
         area = geometryAnalysis.computeGeodesicArea(polygon);
         popup = new maplibregl.Popup()
           .setLngLat([121, 31])
-          .setHTML('面积为: ' + area)
+          .setHTML('面积为: ' + area + '平方米')
           .addTo(map);
       }
 

diff --git a/examples/maplibregl/ugc_computeGeodesicDistance.html b/examples/maplibregl/ugc_computeGeodesicDistance.html
@@ -101,14 +101,15 @@ <h5 class="panel-title text-center">计算测地线的长度</h5>
         var geometryAnalysis = new maplibregl.supermap.GeometryAnalysis();
         var distance;
         distance = geometryAnalysis.computeGeodesicDistance(
-          [120, 125],
-          [30, 30],
+          [[120, 30],
+          [125, 30]],
           6378137,
-          0.0033528106647475
+          0.0033528106647475,
+          'KILOMETER'
         );
         popup = new maplibregl.Popup()
           .setLngLat([123, 30])
-          .setHTML('距离为: ' + distance)
+          .setHTML('长度为: ' + distance + '千米')
           .addTo(map);
       }
 

diff --git a/examples/maplibregl/ugc_computeParallel.html b/examples/maplibregl/ugc_computeParallel.html
@@ -40,8 +40,8 @@ <h5 class="panel-title text-center">根据设置距离获取直线平行线</h5>
       <div class="panel-body content">
         <div class="panel">
           <div class="input-group">
-            <span class="input-group-addon">线距(度)</span>
-            <input class="form-control" id="distance" type="number" value="5" />
+            <span class="input-group-addon">线距(千米)</span>
+            <input class="form-control" id="distance" type="number" value="500" />
           </div>
         </div>
         <input type="button" class="btn btn-default" value="分析" onclick="search()" />&nbsp;
@@ -105,7 +105,7 @@ <h5 class="panel-title text-center">根据设置距离获取直线平行线</h5>
         clearLayer();
         const distance = parseFloat(document.getElementById('distance').value);
         var geometryAnalysis = new maplibregl.supermap.GeometryAnalysis();
-        const res = geometryAnalysis.computeParallel(line, distance);
+        const res = geometryAnalysis.computeParallel(line, distance, 'DEGREE', 'KILOMETER');
         addLayer('line1', 'line', [res], {
           'line-color': 'green',
           'line-width': 5

diff --git a/examples/maplibregl/ugc_convexHull.html b/examples/maplibregl/ugc_convexHull.html
@@ -159,16 +159,9 @@ <h5 class='panel-title text-center'>计算</h5>
           const pointsCoors = pointLists.map(point => point.geometry.coordinates);
           var geometryAnalysis = new maplibregl.supermap.GeometryAnalysis();
           if (operationFun === 'computeConvexHull') {
-            calRes = geometryAnalysis[operationFun](pointsCoors, pointsCoors.length);
+            calRes = geometryAnalysis[operationFun](pointsCoors);
           } else {
-            const xArrs = [];
-            const yArrs = [];
-            pointsCoors.forEach(p => {
-              xArrs.push(p[0]);
-              yArrs.push(p[1]);
-            });
-            calRes = geometryAnalysis[operationFun](xArrs, yArrs, pointsCoors.length);
-            console.log(calRes)
+            calRes = geometryAnalysis[operationFun](pointLists);
           }
           map.addLayer({
             "id": "fill",

diff --git a/examples/maplibregl/ugc_distanceToLineSegment.html b/examples/maplibregl/ugc_distanceToLineSegment.html
@@ -134,10 +134,10 @@ <h5 class="panel-title text-center">计算点到线段的距离</h5>
         clearPopup();
         var geometryAnalysis = new maplibregl.supermap.GeometryAnalysis();
         var distance;
-        distance = geometryAnalysis.distanceToLineSegment(123, 25, 120, 30, 125, 30);
+        distance = geometryAnalysis.distanceToLineSegment(123, 25, 120, 30, 125, 30, 'DEGREE', 'KILOMETER');
         popup = new maplibregl.Popup()
           .setLngLat([123, 25])
-          .setHTML('距离为: ' + distance + '°')
+          .setHTML('距离为: ' + distance + '千米')
           .addTo(map);
       }
 

diff --git a/examples/openlayers/ugc_computeGeodesicArea.html b/examples/openlayers/ugc_computeGeodesicArea.html
@@ -72,7 +72,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()" />
@@ -157,7 +157,7 @@ <h5 class="panel-title text-center">计算经纬度面积</h5>
         var geometryAnalysis = new ol.supermap.GeometryAnalysis();
         var area;
         area = geometryAnalysis.computeGeodesicArea(polygon);
-        var innerHTML = '面积为: ' + area;
+        var innerHTML = '面积为: ' + area + '平方米';
         content.innerHTML = innerHTML;
         overlay.setPosition([121, 31]);
       }

diff --git a/examples/openlayers/ugc_computeGeodesicDistance.html b/examples/openlayers/ugc_computeGeodesicDistance.html
@@ -142,8 +142,8 @@ <h5 class="panel-title text-center">计算测地线的长度</h5>
       function search() {
         var geometryAnalysis = new ol.supermap.GeometryAnalysis();
         var distance;
-        distance = geometryAnalysis.computeGeodesicDistance([120, 125], [30, 30], 6378137, 0.0033528106647475);
-        var innerHTML = '距离为: ' + distance;
+        distance = geometryAnalysis.computeGeodesicDistance([[120, 30], [125, 30]], 6378137, 0.0033528106647475, 'KILOMETER');
+        var innerHTML = '长度为: ' + distance + '千米';
         content.innerHTML = innerHTML;
         overlay.setPosition([123, 30]);
       }

diff --git a/examples/openlayers/ugc_computeParallel.html b/examples/openlayers/ugc_computeParallel.html
@@ -40,8 +40,8 @@ <h5 class="panel-title text-center">根据设置距离获取直线平行线</h5>
       <div class="panel-body content">
         <div class="panel">
           <div class="input-group">
-            <span class="input-group-addon">线距(度)</span>
-            <input class="form-control" id="distance" type="number" value="5" />
+            <span class="input-group-addon">线距(千米)</span>
+            <input class="form-control" id="distance" type="number" value="500" />
           </div>
         </div>
         <input type="button" class="btn btn-default" value="分析" onclick="createParallel()" />&nbsp;
@@ -84,7 +84,7 @@ <h5 class="panel-title text-center">根据设置距离获取直线平行线</h5>
         clearLayer();
         var geometryAnalysis = new ol.supermap.GeometryAnalysis();
         const distance = parseFloat(document.getElementById('distance').value);
-        const res = geometryAnalysis.computeParallel(line, distance);
+        const res = geometryAnalysis.computeParallel(line, distance, 'DEGREE', 'KILOMETER');
         parallelLine = addLayer(res);
       }
 

diff --git a/examples/openlayers/ugc_convexHull.html b/examples/openlayers/ugc_convexHull.html
@@ -154,15 +154,9 @@ <h5 class="panel-title text-center">计算</h5>
         let calRes;
         const pointsCoors = pointLists.map((point) => point.geometry.coordinates);
         if (operationFun === 'computeConvexHull') {
-          calRes = geometryAnalysis[operationFun](pointsCoors, pointsCoors.length);
+          calRes = geometryAnalysis[operationFun](pointsCoors);
         } else {
-          const xArrs = [];
-          const yArrs = [];
-          pointsCoors.forEach((p) => {
-            xArrs.push(p[0]);
-            yArrs.push(p[1]);
-          });
-          calRes = geometryAnalysis[operationFun](xArrs, yArrs, pointsCoors.length);
+          calRes = geometryAnalysis[operationFun](pointLists);
         }
         layer = addLayer(calRes);
       }