【feature】L7layer添加restdata优化

Author: xiongjiaojiao

src/mapboxgl/mapping/utils/L7LayerUtil.js

@@ -190,16 +190,14 @@ function addCredentialToUrl(url, credential) {
  * @description 获取数据集表头信息
  * @param {string} datasetUrl 数据集地址
  * @param {Object} credential
- * @param {boolean} withCredentials
+ * @param {Object} options
  */
-function getRestDataFields(datasetUrl, credential, withCredentials) {
+function getRestDataFields(datasetUrl, credential, options) {
   const url = addCredentialToUrl(`${datasetUrl}/fields.json?returnAll=true`, credential);
-  return FetchRequest.get(url, {
-    withCredentials
-  })
+  return FetchRequest.get(url, null, options)
     .then((res) => res.json())
     .then((result) => {
-      return result.data.map((item) => {
+      return result.map((item) => {
         const { caption, name, isSystemField, type, maxLength, isZeroLengthAllowed } = item;
         return {
           name,
@@ -218,13 +216,11 @@ function getRestDataFields(datasetUrl, credential, withCredentials) {
  * @description 获取值域
  * @param {string} datasetUrl
  * @param {Object} credential
- * @param {boolean} withCredentials
+ * @param {Object} options
  */
-function getRestDataDomains(datasetUrl, credential, withCredentials) {
+function getRestDataDomains(datasetUrl, credential, options) {
   const url = addCredentialToUrl(`${datasetUrl}/domain.json`, credential);
-  return FetchRequest.get(url, {
-    withCredentials
-  }).then((result) => {
+  return FetchRequest.get(url, null, options).then((result) => {
     return result.json();
   });
 }
@@ -246,10 +242,10 @@ function sortRestdataField(fieldInfos) {
   return systemFields.concat(nonsystemFields);
 }
 
-async function requestRestDataFieldsInfo(datasetUrl, credential, withCredentials) {
+async function requestRestDataFieldsInfo(datasetUrl, credential, options) {
   const [fields, domains] = await Promise.all([
-    getRestDataFields(datasetUrl, credential, withCredentials),
-    getRestDataDomains(datasetUrl, credential, withCredentials)
+    getRestDataFields(datasetUrl, credential, options),
+    getRestDataDomains(datasetUrl, credential, options)
   ]);
   domains.forEach((domain) => {
     const { fieldName, type, rangeInfos, codeInfos } = domain;
@@ -274,8 +270,8 @@ async function requestRestDataFieldsInfo(datasetUrl, credential, withCredentials
  * @param credential
  * @param withCredentials
  */
-async function getRestDataFieldInfo(datasetUrl, credential, withCredentials) {
-  const fieldsInfos = await requestRestDataFieldsInfo(datasetUrl, credential, withCredentials);
+async function getRestDataFieldInfo(datasetUrl, credential, options) {
+  const fieldsInfos = await requestRestDataFieldsInfo(datasetUrl, credential, options);
   return {
     fieldNames: fieldsInfos.map((el) => el.name),
     fieldTypes: fieldsInfos.map((el) => el.type)
@@ -392,12 +388,9 @@ async function getRestDataGeojsonByWebMap(data, options) {
     targetEpsgCode: '4326',
     queryParameter: { name: datasetName + '@' + dataSourceName }
   };
-  const SQLConfig = {
-    withCredentials: options.withCredentials
-  };
   const datasetUrl = `${url.split('featureResults')[0]}datasources/${dataSourceName}/datasets/${datasetName}`;
-  const { fieldNames, fieldTypes } = await getRestDataFieldInfo(datasetUrl, credential, options.withCredentials);
-  const attrDataInfo = await FetchRequest.post(url, SQLParams, SQLConfig);
+  const { fieldNames, fieldTypes } = await getRestDataFieldInfo(datasetUrl, credential, options);
+  const attrDataInfo = await FetchRequest.post(url, JSON.stringify(SQLParams), options);
   const featuresRes = await attrDataInfo.json();
 
   return {
@@ -409,9 +402,10 @@ async function getRestDataGeojsonByWebMap(data, options) {
 /**
  * 获取单条item
  * @param href
+ * @param option
  */
 function getStructDataItemJson(href, option) {
-  return FetchRequest.get(href, option)
+  return FetchRequest.get(href, null, option)
     .then((res) => res.json())
     .then((data) => {
       if (data.succeed === false) {
@@ -430,7 +424,7 @@ function getStructDataItemJson(href, option) {
  * @param options
  */
 async function getStructDataItem(href, options) {
-  const data = await getStructDataItemJson(href);
+  const data = await getStructDataItemJson(href, options);
   const { features, links = [] } = data || {};
   const nextInfo = links.find((l) => l.rel === 'next');
   if (nextInfo) {
@@ -552,7 +546,11 @@ function transformGeometryCoordinates(features, fromProjection, toProjection = '
  */
 async function getStructuredDataGeojsonByWebMap(data, options) {
   const allFeature = await getStructDataGeojson(data.dataId, options);
-  const resultRes = await FetchRequest.get(`${options.server}web/datas/${data.dataId}/structureddata.json`);
+  const resultRes = await FetchRequest.get(
+    `${options.server}web/datas/${data.dataId}/structureddata.json`,
+    null,
+    options
+  );
   const result = await resultRes.json();
   const projection = `EPSG:${result.epsgCode}`;
   if (projection !== 'EPSG:4326') {
@@ -1528,7 +1526,7 @@ function replaceSprite2X(url) {
  */
 function getPixelRatioSpriteUrl(url) {
   if (window.devicePixelRatio > 1 && !url.includes('/sprite@2x')) {
-      return replaceSprite2X(url);
+    return replaceSprite2X(url);
   }
   return url;
 }
@@ -1593,11 +1591,7 @@ async function addTextures({ layers, sprite, spriteJson, scene, options }) {
     const texture = (l.texture || {}).values;
     const iconInfo = spriteJson[texture];
     if (iconInfo) {
-      const image = await changeSpriteIconToImgData(
-        sprite,
-        { ...iconInfo, id: texture },
-        options
-      );
+      const image = await changeSpriteIconToImgData(sprite, { ...iconInfo, id: texture }, options);
       const style = l.style || {};
       const color = style.textureColor,
         rotate = style.textureRotate;
@@ -1956,7 +1950,12 @@ function getL7Layer(l) {
 export async function addL7Layers({ map, webMapInfo, l7Layers, spriteDatas, options }) {
   // 添加L7图层
   const { layers, sources, sprite } = webMapInfo;
-  const formateL7Layers = await restoreL7Layers({ layers: l7Layers, sources, map, options });
+  const formateL7Layers = await restoreL7Layers({
+    layers: l7Layers,
+    sources,
+    map,
+    options: Object.assign({ withoutFormatSuffix: true }, options)
+  });
   // 批量处理L7纹理
   const scene = await getScene(map);
   if (Object.keys(spriteDatas).length > 0) {

test/mapboxgl/mapping/utils/L7LayerUtilSpec.js

@@ -0,0 +1,216 @@
+import { addL7Layers, isL7Layer } from '../../../../src/mapboxgl/mapping/utils/L7LayerUtil';
+import * as mockL7 from '../../../tool/mock_l7';
+import { FetchRequest } from '@supermap/iclient-common/util/FetchRequest';
+
+describe('L7LayerUtil', () => {
+  const mapstudioWebMap_L7LayersRes = JSON.parse(mapstudioWebMap_L7Layers);
+
+  const map = {
+    getL7Scene: () => Promise.resolve(mockL7.Scene),
+    addLayer: () => {},
+    getZoom: () => 3
+  };
+
+  const options = {
+    withCredentials: true,
+    server: 'http://localhost:8190/iportal/'
+  };
+
+  const addOptions = {
+    map,
+    webMapInfo: { ...mapstudioWebMap_L7LayersRes },
+    l7Layers: mapstudioWebMap_L7LayersRes.layers.filter((layer) => isL7Layer(layer)),
+    spriteDatas: {},
+    options
+  };
+
+  beforeAll(() => {
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('map.json') > -1) {
+        return Promise.resolve(new Response(mapstudioWebMap_L7Layers));
+      }
+      if (url.indexOf('617580084.json') > -1) {
+        return Promise.resolve(new Response(msProjectINfo_L7Layers));
+      }
+      if (url.indexOf('/sprite') > -1) {
+        return Promise.resolve(new Response(msSpriteInfo));
+      }
+      if (url.indexOf('/web/datas/1554834293/structureddata/ogc-features/collections/all/items.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1052943054Items));
+      }
+      if (url.indexOf('/web/datas/1554834293/structureddata/ogc-features/collections/all/items.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1052943054Items));
+      }
+      if (url.indexOf('/web/datas/1554834293/structureddata.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1052943054));
+      }
+      if (url.indexOf('/web/datas/1767084124/structureddata/ogc-features/collections/all/items.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1767084124Items));
+      }
+      if (url.indexOf('/web/datas/1767084124/structureddata.json') > -1) {
+        return Promise.resolve(new Response(l7StructureData1767084124));
+      }
+      if (
+        url.indexOf('iserver/services/data-Building/rest/data/datasources/newBuilding/datasets/New_LINE/fields.json') >
+        -1
+      ) {
+        return Promise.resolve(new Response(RESTDATA_FIELDS_RES));
+      }
+      if (
+        url.indexOf('iserver/services/data-Building/rest/data/datasources/newBuilding/datasets/New_LINE/domain.json') >
+        -1
+      ) {
+        return Promise.resolve(new Response(RESTDATA_DOMAINS_RES));
+      }
+      console.log(url);
+      return Promise.resolve();
+    });
+    spyOn(FetchRequest, 'post').and.callFake((url) => {
+      if (url.indexOf('/iserver/services/data-Building/rest/data/featureResults.geojson') > -1) {
+        return Promise.resolve(new Response(RESTDATA_FEATURES_RES));
+      }
+      console.log(url);
+      return Promise.resolve();
+    });
+  });
+
+  it('add od layer', (done) => {
+    const layers = [
+      {
+        source: 'ms_1554834293_1716384530289_76',
+        'source-layer': '1554834293$msgeometry',
+        minzoom: 0,
+        maxzoom: 24,
+        metadata: {
+          MapStudio: {
+            title: '国内航班数据_100'
+          }
+        },
+        id: '国内航班数据_100',
+        type: 'line-curve',
+        paint: {
+          'line-curve-color': '#ff6b34',
+          'line-curve-opacity': 1,
+          'line-curve-width': 1,
+          'line-curve-pattern-opacity': 1,
+          'line-curve-dasharray': [1, 0]
+        },
+        layout: {
+          'line-curve-shape': 'greatcircle',
+          'line-curve-segment': 30,
+          visibility: 'visible'
+        }
+      },
+      {
+        source: 'ms_1554834293_1716384530289_76',
+        'source-layer': '1554834293$msgeometry',
+        minzoom: 0,
+        maxzoom: 24,
+        metadata: {
+          MapStudio: {
+            title: '国内航班数据_100'
+          }
+        },
+        id: 'ms_composite_国内航班数据_100',
+        type: 'line-curve',
+        paint: {
+          'line-curve-color': '#ff6b34',
+          'line-curve-opacity': 1,
+          'line-curve-width': 10,
+          'line-curve-pattern': 'circle',
+          'line-curve-pattern-color': 'rgba(89,89,89,1)',
+          'line-curve-pattern-opacity': 1
+        },
+        layout: {
+          'line-curve-shape': 'greatcircle',
+          'line-curve-pattern-rotate': 0,
+          'line-curve-pattern-interval': 20,
+          'line-curve-pattern-blend': 'replace',
+          'line-curve-segment': 30,
+          'line-curve-animate-duration': 4,
+          'line-curve-animate-interval': 0.4,
+          'line-curve-animate-trailLength': 0.2,
+          visibility: 'visible'
+        }
+      }
+    ];
+    const sources = {
+      ms_1554834293_1716384530289_76: {
+        type: 'geojson',
+        data: {
+          type: 'supermap-structured-data',
+          dataId: '1554834293'
+        },
+        od: true,
+        originX: '起飞机场x',
+        originY: '起飞机场y',
+        destinationX: '降落机场x',
+        destinationY: '降落机场y'
+      }
+    };
+    const nextOptions = {
+      ...addOptions,
+      webMapInfo: { ...mapstudioWebMap_L7LayersRes, layers, sources },
+      l7Layers: layers
+    };
+    const spy = spyOn(nextOptions.map, 'addLayer').and.callThrough();
+    addL7Layers(nextOptions).then(() => {
+      expect(nextOptions.map.addLayer.calls.count()).toEqual(2);
+      spy.calls.reset();
+      done();
+    });
+  });
+
+  it('animate line layer', (done) => {
+    const layers = [
+      {
+        layout: {
+          visibility: 'visible',
+          'line-extrusion-pattern-interval': 20,
+          'line-extrusion-animate-duration': 6,
+          'line-extrusion-pattern-blend': 'normal',
+          'line-extrusion-animate-trailLength': 1.5,
+          'line-extrusion-animate-interval': 0.6
+        },
+        metadata: {
+          MapStudio: {
+            title: 'New_LINE'
+          }
+        },
+        paint: {
+          'line-extrusion-base': 0,
+          'line-extrusion-opacity': 1,
+          'line-extrusion-width': 12,
+          'line-extrusion-base-fixed': false,
+          'line-extrusion-color': '#4CC8A3'
+        },
+        source: 'ms_New_LINE_ms_datasetId_1716864444834_6_1716864449917_10',
+        'source-layer': 'New_LINE@newBuilding',
+        id: 'ms_New_LINE_1716864449916_8',
+        type: 'line-extrusion'
+      }
+    ];
+    const sources = {
+      ms_New_LINE_ms_datasetId_1716864444834_6_1716864449917_10: {
+        data: {
+          datasetName: 'New_LINE',
+          type: 'supermap-rest-data',
+          url: 'http://localhost:8090/iserver/services/data-Building/rest/data/featureResults.geojson?returnContent=true&fromIndex=0&maxFeatures=2147483647',
+          dataSourceName: 'newBuilding'
+        },
+        type: 'geojson'
+      }
+    };
+    const nextOptions = {
+      ...addOptions,
+      webMapInfo: { ...mapstudioWebMap_L7LayersRes, layers, sources },
+      l7Layers: layers
+    };
+    const spy = spyOn(nextOptions.map, 'addLayer').and.callThrough();
+    addL7Layers(nextOptions).then(() => {
+      expect(nextOptions.map.addLayer.calls.count()).toEqual(1);
+      spy.calls.reset();
+      done();
+    });
+  });
+});