修改 fgb 示例

xilanhuaweidapao · xilanhuaweidapao · commit dc8666083122 · 2023-03-09T20:21:48.000+08:00
diff --git a/examples/leaflet/01_mapQueryBySQL_FGB.html b/examples/leaflet/01_mapQueryBySQL_FGB.html
@@ -22,7 +22,7 @@
           maxZoom: 18,
           zoom: 2
       });
-      new L.supermap.TiledMapLayer(url).addTo(map);
+      new L.supermap.TiledMapLayer(url, {noWrap: true}).addTo(map);
       query();
 
       function query() {
diff --git a/examples/leaflet/02_getFeatureBySQL_FGB.html b/examples/leaflet/02_getFeatureBySQL_FGB.html
@@ -22,9 +22,9 @@
         crs: L.CRS.EPSG4326,
         center: { lon: 0, lat: 0 },
         maxZoom: 18,
-        zoom: 1
+        zoom: 2,
       });
-      new L.supermap.TiledMapLayer(baseUrl).addTo(map);
+      new L.supermap.TiledMapLayer(baseUrl, {noWrap: true}).addTo(map);
       query();
       function query() {
         var sqlParam = new L.supermap.GetFeaturesBySQLParameters({
diff --git a/examples/leaflet/config.js b/examples/leaflet/config.js
@@ -106,7 +106,7 @@ var exampleConfig = {
                   name: "SQL查询 (FGB)",
                   name_en: "SQL query (FGB)",
                   version: '11.1.0',
-                  thumbnail: "l_mapQueryBySQL.png",
+                  thumbnail: "query_fgb_features.png",
                   fileName: "01_mapQueryBySQL_FGB"
               }]
             },
@@ -127,7 +127,7 @@ var exampleConfig = {
                   name: "SQL查询 (FGB)",
                   name_en: "SQL query (FGB)",
                   version: '11.1.0',
-                  thumbnail: "l_getFeatureBySQL.png",
+                  thumbnail: "query_fgb_features.png",
                   fileName: "02_getFeatureBySQL_FGB"
               },{
                     name: "范围查询",
@@ -1085,21 +1085,21 @@ var exampleConfig = {
                     }
                 ]
             },
-            "FGBLayer": {
-              name: 'FGBLayer',
-              name_en: 'FGBLayer',
+            "FGB": {
+              name: 'FGB',
+              name_en: 'FGB',
               version: '11.1.0',
               content: [
                   {
-                      name: 'FGB 全量加载',
-                      name_en: 'FGB Full Load',
+                      name: 'FGB 全量加载（2500万点数据量）',
+                      name_en: 'FGB Full Load (Use lines to draw 25 millions Chinese roads)',
                       version: '11.1.0',
                       thumbnail: 'fgb_all_load.png',
                       fileName: 'fgb_all_load'
                   },
                   {
-                    name: 'FGB 按需加载',
-                    name_en: 'FGB Extent Load',
+                    name: 'FGB 按需加载（2500万点数据量）',
+                    name_en: 'FGB Extent Load (Use lines to draw 25 millions Chinese roads)',
                     version: '11.1.0',
                     thumbnail: 'fgb_bbox_load.png',
                     fileName: 'fgb_bbox_load'
diff --git a/examples/leaflet/fgb_all_load.html b/examples/leaflet/fgb_all_load.html
@@ -19,9 +19,9 @@
       map = L.map('map', {
         preferCanvas: true,
         crs: L.CRS.EPSG4326,
-        center: { lon: 110, lat: 30 },
+        center: { lon: 110, lat: 35 },
         maxZoom: 18,
-        zoom: 3
+        zoom: 4
       });
       new L.supermap.TiledMapLayer(baseUrl).addTo(map);
       new L.supermap.FGBLayer(fgbUrl, {
diff --git a/examples/leaflet/fgb_bbox_load.html b/examples/leaflet/fgb_bbox_load.html
@@ -25,7 +25,11 @@
       });
       new L.supermap.TiledMapLayer(baseUrl).addTo(map);
       new L.supermap.FGBLayer(fgbUrl, {
-        strategy: 'bbox'
+        strategy: 'bbox',
+        style: {
+          color: '#38f',
+          weight: 2
+        }
       }).addTo(map);
     </script>
   </body>
diff --git a/examples/leaflet/img/fgb_bbox_load.png b/examples/leaflet/img/fgb_bbox_load.png
diff --git a/examples/leaflet/img/query_fgb_features.png b/examples/leaflet/img/query_fgb_features.png
diff --git a/examples/mapboxgl/01_mapQueryBySQL_FGB.html b/examples/mapboxgl/01_mapQueryBySQL_FGB.html
@@ -19,6 +19,7 @@
        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
     var map = new mapboxgl.Map({
         container: 'map',
+        renderWorldCopies: false,
         style: {
             "version": 8,
             "sources": {
@@ -60,7 +61,11 @@
             var FGBLayer = new mapboxgl.supermap.FGBLayer({
               url: serviceResult.result.newResourceLocation,
               layerID: 'points',
-              strategy: 'all'
+              strategy: 'all',
+              paint: {
+                'fill-color': '#FF3300' /* 填充的颜色 */,
+                'fill-opacity': 0.6 /* 透明度 */
+              }
             });
             map.addLayer(FGBLayer);
         }, 'FGB');
diff --git a/examples/mapboxgl/02_getFeatureBySQL_FGB.html b/examples/mapboxgl/02_getFeatureBySQL_FGB.html
@@ -36,6 +36,7 @@
 
       var map = new mapboxgl.Map({
         container: 'map', //div id
+        renderWorldCopies: false,
         style: {
           version: 8,
           sources: {
diff --git a/examples/mapboxgl/config.js b/examples/mapboxgl/config.js
@@ -74,7 +74,7 @@ var exampleConfig = {
                       name: 'SQL查询 (FGB)',
                       name_en: 'SQL query (FGB)',
                       version: '11.1.0',
-                      thumbnail: 'mb_mapQueryBySQL.png',
+                      thumbnail: 'query_fgb_features.png',
                       fileName: '01_mapQueryBySQL_FGB'
                     }
                 ]
@@ -99,7 +99,7 @@ var exampleConfig = {
                       name: 'SQL查询 (FGB)',
                       name_en: 'SQL query (FGB)',
                       version: '11.1.0',
-                      thumbnail: 'mb_getFeatureBySQL.png',
+                      thumbnail: 'query_fgb_features.png',
                       fileName: '02_getFeatureBySQL_FGB'
                     },
                     {
@@ -462,7 +462,7 @@ var exampleConfig = {
                       fileName: "imageService"
                   }
               ]
-            },
+            }
         }
     },
     iPortal: {
@@ -1097,21 +1097,21 @@ var exampleConfig = {
                     }
                 ]
             },
-            FGBLayer: {
-              name: 'FGB图层',
-              name_en: 'FGBLayer',
+            FGB: {
+              name: 'FGB',
+              name_en: 'FGB',
               version: '11.0.1',
               content: [
                   {
-                      name: 'FGB 全量加载',
-                      name_en: 'FGB Full Load',
+                      name: 'FGB 全量加载（2500万点数据量）',
+                      name_en: 'FGB Full Load (Use lines to draw 25 millions Chinese roads)',
                       version: '11.1.0',
                       thumbnail: 'fgb_all_load.png',
                       fileName: 'fgb_all_load'
                   },
                   {
-                    name: 'FGB 按需加载',
-                    name_en: 'FGB Extent Load',
+                    name: 'FGB 按需加载（2500万点数据量）',
+                    name_en: 'FGB Extent Load (Use lines to draw 25 millions Chinese roads)',
                     version: '11.1.0',
                     thumbnail: 'fgb_bbox_load.png',
                     fileName: 'fgb_bbox_load'
diff --git a/examples/mapboxgl/fgb_all_load.html b/examples/mapboxgl/fgb_all_load.html
@@ -56,15 +56,19 @@
             }
           ]
         },
-        center: [110, 30],
-        zoom: 3
+        center: [110, 37],
+        zoom: 3.7
       });
       map.addControl(new mapboxgl.NavigationControl(), 'top-left');
       map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
       map.on('load', function () {
         const FGBLayer = new mapboxgl.supermap.FGBLayer({
           url: fgbUrl,
-          strategy: 'all'
+          strategy: 'all',
+          paint: {
+            'line-color': '#38f',
+            'line-width': 3
+          }
         });
         map.addLayer(FGBLayer);
       });
diff --git a/examples/mapboxgl/fgb_bbox_load.html b/examples/mapboxgl/fgb_bbox_load.html
@@ -62,7 +62,11 @@
 
       map.on('load', function () {
         const FGBLayer = new mapboxgl.supermap.FGBLayer({
-          url: fgbUrl
+          url: fgbUrl,
+          paint: {
+            'line-color': '#38f',
+            'line-width': 3
+          }
         });
         map.addLayer(FGBLayer);
       });
diff --git a/examples/mapboxgl/img/fgb_bbox_load.png b/examples/mapboxgl/img/fgb_bbox_load.png
diff --git a/examples/mapboxgl/img/query_fgb_features.png b/examples/mapboxgl/img/query_fgb_features.png
diff --git a/examples/openlayers/01_mapQueryBySQL_FGB.html b/examples/openlayers/01_mapQueryBySQL_FGB.html
@@ -22,12 +22,13 @@
             center: [0, 0],
             zoom: 2,
             projection: 'EPSG:4326',
-            multiWorld: true
+            multiWorld: false
         })
     });
     var layer = new ol.layer.Tile({
         source: new ol.source.TileSuperMapRest({
-            url: url
+            url: url,
+            wrapX: false
         }),
         projection: 'EPSG:4326'
     });
diff --git a/examples/openlayers/02_getFeatureBySQL_FGB.html b/examples/openlayers/02_getFeatureBySQL_FGB.html
@@ -25,16 +25,16 @@
           .defaults({ attributionOptions: { collapsed: false } })
           .extend([new ol.supermap.control.Logo()]),
         view: new ol.View({
-          center: [100, 0],
-          zoom: 3,
+          center: [0, 0],
+          zoom: 2,
           projection: 'EPSG:4326',
           multiWorld: true
         })
       });
       var layer = new ol.layer.Tile({
         source: new ol.source.TileSuperMapRest({
           url: baseUrl,
-          wrapX: true
+          wrapX: false
         }),
         projection: 'EPSG:4326'
       });
@@ -55,7 +55,8 @@
             const vectorSource = new ol.source.FGB({
               format: new ol.format.GeoJSON(),
               url: serviceResult.result.newResourceLocation,
-              strategy: ol.loadingstrategy.all
+              strategy: ol.loadingstrategy.all,
+              wrapX: false
             });
 
             resultLayer = new ol.layer.Vector({
diff --git a/examples/openlayers/config.js b/examples/openlayers/config.js
@@ -87,7 +87,7 @@ var exampleConfig = {
                   name: "SQL查询 (FGB)",
                   name_en: "SQL query (FGB)",
                   version: '11.1.0',
-                  thumbnail: "ol_mapQueryBySQL.png",
+                  thumbnail: "query_fgb_features.png",
                   fileName: "01_mapQueryBySQL_FGB"
               }
               ]
@@ -109,7 +109,7 @@ var exampleConfig = {
                   name: "SQL查询 (FGB)",
                   name_en: "SQL query (FGB)",
                   version: '11.1.0',
-                  thumbnail: "ol_getFeatureBySQL.png",
+                  thumbnail: "query_fgb_features.png",
                   fileName: "02_getFeatureBySQL_FGB"
                 }, 
                 {
@@ -1054,21 +1054,21 @@ var exampleConfig = {
                     fileName: "mask"
                 }]
             },
-            FGBLayer: {
+            FGB: {
               name: 'FGB',
-              name_en: 'FGBLayer',
+              name_en: 'FGB',
               version: '11.1.0',
               content: [
                   {
-                    name: 'FGB 全量加载',
-                    name_en: 'FGB Full Load',
+                    name: 'FGB 全量加载（2500万点数据量）',
+                    name_en: 'FGB Full Load (Use lines to draw 25 millions Chinese roads)',
                     version: '11.1.0',
                     thumbnail: 'fgb_all_load.png',
                     fileName: 'fgb_all_load'
                   },
                   {
-                    name: 'FGB 按需加载',
-                    name_en: 'FGB Extent Load',
+                    name: 'FGB 按需加载（2500万点数据量）',
+                    name_en: 'FGB Extent Load (Use lines to draw 25 millions Chinese roads)',
                     version: '11.1.0',
                     thumbnail: 'fgb_bbox_load.png',
                     fileName: 'fgb_bbox_load'
diff --git a/examples/openlayers/fgb_all_load.html b/examples/openlayers/fgb_all_load.html
@@ -22,8 +22,8 @@
           .defaults({ attributionOptions: { collapsed: false } })
           .extend([new ol.supermap.control.Logo()]),
         view: new ol.View({
-          center: [103, 30],
-          zoom: 4,
+          center: [103, 35],
+          zoom: 5,
           projection: 'EPSG:4326',
           multiWorld: true
         })
@@ -42,7 +42,13 @@
       });
 
       var fgbLayer = new ol.layer.Vector({
-        source: vectorSource
+        source: vectorSource,
+        style: new ol.style.Style({
+          stroke: new ol.style.Stroke({
+            color: '#38f',
+            width: 2
+          })
+        })
       });
       map.addLayer(fgbLayer);
     </script>
diff --git a/examples/openlayers/fgb_bbox_load.html b/examples/openlayers/fgb_bbox_load.html
@@ -12,8 +12,8 @@
   <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
     <div id="map" style="width: 100%; height: 100%"></div>
     <script type="text/javascript">
-      var host = window.isLocal ? window.server : "https://iserver.supermap.io",
-      url = host + "/iserver/services/map-china400/rest/maps/China_4326";
+      var host = window.isLocal ? window.server : 'https://iserver.supermap.io',
+        url = host + '/iserver/services/map-china400/rest/maps/China_4326';
       var fgbUrl = 'https://iclient.supermap.io/minio/fgb/roads.fgb';
       var map;
       map = new ol.Map({
@@ -31,8 +31,7 @@
       window.map = map;
       var layer = new ol.layer.Tile({
         source: new ol.source.TileSuperMapRest({
-          url,
-          wrapX: true
+          url
         }),
         projection: 'EPSG:4326'
       });
@@ -43,7 +42,13 @@
       });
 
       var fgbLayer = new ol.layer.Vector({
-        source: vectorSource
+        source: vectorSource,
+        style: new ol.style.Style({
+          stroke: new ol.style.Stroke({
+            color: '#38f',
+            width: 2
+          })
+        })
       });
       map.addLayer(fgbLayer);
     </script>
diff --git a/examples/openlayers/img/fgb_bbox_load.png b/examples/openlayers/img/fgb_bbox_load.png
diff --git a/examples/openlayers/img/query_fgb_features.png b/examples/openlayers/img/query_fgb_features.png

Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@ var exampleConfig = {`
`74`	`74`	`name: 'SQL查询 (FGB)',`
`75`	`75`	`name_en: 'SQL query (FGB)',`
`76`	`76`	`version: '11.1.0',`
`77`		`- thumbnail: 'mb_mapQueryBySQL.png',`
	`77`	`+ thumbnail: 'query_fgb_features.png',`
`78`	`78`	`fileName: '01_mapQueryBySQL_FGB'`
`79`	`79`	`}`
`80`	`80`	`]`
`@@ -99,7 +99,7 @@ var exampleConfig = {`
`99`	`99`	`name: 'SQL查询 (FGB)',`
`100`	`100`	`name_en: 'SQL query (FGB)',`
`101`	`101`	`version: '11.1.0',`
`102`		`- thumbnail: 'mb_getFeatureBySQL.png',`
	`102`	`+ thumbnail: 'query_fgb_features.png',`
`103`	`103`	`fileName: '02_getFeatureBySQL_FGB'`
`104`	`104`	`},`
`105`	`105`	`{`
`@@ -462,7 +462,7 @@ var exampleConfig = {`
`462`	`462`	`fileName: "imageService"`
`463`	`463`	`}`
`464`	`464`	`]`
`465`		`- },`
	`465`	`+ }`
`466`	`466`	`}`
`467`	`467`	`},`
`468`	`468`	`iPortal: {`
`@@ -1097,21 +1097,21 @@ var exampleConfig = {`
`1097`	`1097`	`}`
`1098`	`1098`	`]`
`1099`	`1099`	`},`
`1100`		`- FGBLayer: {`
`1101`		`- name: 'FGB图层',`
`1102`		`- name_en: 'FGBLayer',`
	`1100`	`+ FGB: {`
	`1101`	`+ name: 'FGB',`
	`1102`	`+ name_en: 'FGB',`
`1103`	`1103`	`version: '11.0.1',`
`1104`	`1104`	`content: [`
`1105`	`1105`	`{`
`1106`		`- name: 'FGB 全量加载',`
`1107`		`- name_en: 'FGB Full Load',`
	`1106`	`+ name: 'FGB 全量加载（2500万点数据量）',`
	`1107`	`+ name_en: 'FGB Full Load (Use lines to draw 25 millions Chinese roads)',`
`1108`	`1108`	`version: '11.1.0',`
`1109`	`1109`	`thumbnail: 'fgb_all_load.png',`
`1110`	`1110`	`fileName: 'fgb_all_load'`
`1111`	`1111`	`},`
`1112`	`1112`	`{`
`1113`		`- name: 'FGB 按需加载',`
`1114`		`- name_en: 'FGB Extent Load',`
	`1113`	`+ name: 'FGB 按需加载（2500万点数据量）',`
	`1114`	`+ name_en: 'FGB Extent Load (Use lines to draw 25 millions Chinese roads)',`
`1115`	`1115`	`version: '11.1.0',`
`1116`	`1116`	`thumbnail: 'fgb_bbox_load.png',`
`1117`	`1117`	`fileName: 'fgb_bbox_load'`