[fix]isvj-5215 单值专题图修改geojson数据 web添加 review by qiw

Author: luoxiao-supermap

package.json

@@ -132,6 +132,7 @@
     "fetch-jsonp": "1.1.3",
     "jsonsql": "0.2.5",
     "leaflet": "1.7.1",
+    "lodash.difference": "^4.5.0",
     "lodash.remove": "^4.7.0",
     "lodash.topairs": "4.3.0",
     "mapbox-gl": "1.13.2",

src/openlayers/mapping/WebMap.js

@@ -51,6 +51,7 @@ import StrokeStyle from 'ol/style/Stroke';
 import Text from 'ol/style/Text';
 import Collection from 'ol/Collection';
 import {containsCoordinate, getCenter} from "ol/extent";
+import difference from 'lodash.difference';
 
 window.proj4 = proj4;
 window.Proj4js = proj4;
@@ -3166,6 +3167,9 @@ export class WebMap extends Observable {
 
         //生成styleGroup
         let styleGroup = [];
+        const usedColors = this.getCustomSettingColors(customSettings, names, featureType).map(item => item.toLowerCase());
+        const curentColors = this.getUniqueColors(themeSetting.colors || this.defaultParameters.themeSetting.colors, names.length + Object.keys(customSettings).length).map(item => item.toLowerCase());
+        const newColors = difference(curentColors, usedColors);
         for(let index = 0; index < names.length; index++) {
           const name = names[index];
           //兼容之前自定义是用key，现在因为数据支持编辑，需要用属性值。
@@ -3176,6 +3180,9 @@ export class WebMap extends Observable {
               custom = this.getCustomSetting(style, custom, featureType);
               customSettings[key] = custom;
           }
+          if (!custom) {
+            custom = this.getCustomSetting(style, newColors.shift(), featureType);
+          }
 
           // 转化成 ol 样式
           let olStyle, type = custom.type;
@@ -3214,6 +3221,23 @@ export class WebMap extends Observable {
         return customSetting;
     }
 
+    getCustomSettingColors(customSettings, featureType) {
+      const keys = Object.keys(customSettings);
+      const colors = [];
+      keys.forEach(key => {
+        if (featureType === "LINE") {
+          colors.push(customSettings[key].strokeColor);
+        } else {
+          colors.push(customSettings[key].fillColor);
+        }
+      });
+      return colors;
+    }
+
+    getUniqueColors(colors, valuesLen) {
+      return ColorsPickerUtil.getGradientColors(colors, valuesLen);
+    }
+
     /**
      * @private
      * @function WebMap.prototype.createRangeLayer

src/openlayers/package.json

@@ -22,6 +22,7 @@
     "@supermap/iclient-common": "11.1.0-dev",
     "proj4": "2.8.0",
     "canvg": "3.0.10",
-    "lodash.remove": "^4.7.0"
+    "lodash.remove": "^4.7.0",
+    "lodash.difference": "^4.5.0"
   }
 }

test/openlayers/mapping/WebMapSpec.js

@@ -202,6 +202,146 @@ describe('openlayers_WebMap', () => {
         done();
       }
     });
+    it('isvj-5215', (done) => {
+      let options = {
+          server: server,
+          successCallback,
+          errorCallback: function () {}
+      };
+      spyOn(FetchRequest, 'get').and.callFake((url) => {
+          if (url.indexOf('map.json') > -1) {
+              var mapJson = datavizWebMap_BAIDU;
+              return Promise.resolve(new Response(mapJson));
+          }
+          return Promise.resolve();
+      });
+      var datavizWebmap = new WebMap(id, options);
+
+      async function successCallback() {
+        const parameters = {
+          "layerType": "UNIQUE",
+          "visible": true,
+          "themeSetting": {
+              "themeField": "UserID",
+              "customSettings": {
+                  "0": {
+                      "fillColor": "#D53E4F",
+                      "strokeWidth": 1,
+                      "offsetX": 0,
+                      "offsetY": 0,
+                      "fillOpacity": 0.9,
+                      "type": "BASIC_POINT",
+                      "radius": 15,
+                      "strokeColor": "#ffffff",
+                      "strokeOpacity": 1
+                  },
+                  "1": {
+                      "fillColor": "#3288BD",
+                      "strokeWidth": 1,
+                      "offsetX": 0,
+                      "offsetY": 0,
+                      "fillOpacity": 0.9,
+                      "type": "BASIC_POINT",
+                      "radius": 15,
+                      "strokeColor": "#ffffff",
+                      "strokeOpacity": 1
+                  },
+                  "2": {
+                      "fillColor": "#FC8D59",
+                      "strokeWidth": 1,
+                      "offsetX": 0,
+                      "offsetY": 0,
+                      "fillOpacity": 0.9,
+                      "type": "BASIC_POINT",
+                      "radius": 15,
+                      "strokeColor": "#ffffff",
+                      "strokeOpacity": 1
+                  },
+                  "3": {
+                      "fillColor": "#99D594",
+                      "strokeWidth": 1,
+                      "offsetX": 0,
+                      "offsetY": 0,
+                      "fillOpacity": 0.9,
+                      "type": "BASIC_POINT",
+                      "radius": 15,
+                      "strokeColor": "#ffffff",
+                      "strokeOpacity": 1
+                  },
+                  "5": {
+                      "fillColor": "#FEE08B",
+                      "strokeWidth": 1,
+                      "offsetX": 0,
+                      "offsetY": 0,
+                      "fillOpacity": 0.9,
+                      "type": "BASIC_POINT",
+                      "radius": 15,
+                      "strokeColor": "#ffffff",
+                      "strokeOpacity": 1
+                  },
+                  "8": {
+                      "fillColor": "#E6F598",
+                      "strokeWidth": 1,
+                      "offsetX": 0,
+                      "offsetY": 0,
+                      "fillOpacity": 0.9,
+                      "type": "BASIC_POINT",
+                      "radius": 15,
+                      "strokeColor": "#ffffff",
+                      "strokeOpacity": 1
+                  }
+              },
+              "colors": [
+                  "#D53E4F",
+                  "#FC8D59",
+                  "#FEE08B",
+                  "#FFFFBF",
+                  "#E6F598",
+                  "#99D594",
+                  "#3288BD"
+              ]
+          },
+          "name": "isvj-5215",
+          "featureType": "POINT",
+          "labelStyle": {
+              "offsetX": 0,
+              "textBaseline": "bottom",
+              "fontFamily": "黑体",
+              "offsetY": -19,
+              "outlineWidth": 0,
+              "textAlign": "center",
+              "outlineColor": "#000000",
+              "fontSize": "14px",
+              "fill": "#333",
+              "backgroundFill": [
+                  255,
+                  255,
+                  255,
+                  0.8
+              ],
+              "labelField": "UserID"
+          },
+          "style": {
+              "strokeWidth": 1,
+              "offsetX": 0,
+              "fillColor": "#E6F598",
+              "offsetY": 0,
+              "fillOpacity": 0.9,
+              "radius": 15,
+              "strokeColor": "#ffffff",
+              "type": "BASIC_POINT",
+              "strokeOpacity": 1
+          },
+          "projection": "EPSG:4326",
+          "enableFields": [
+              "UserID"
+          ]
+        }
+        const res = await datavizWebmap.getUniqueStyleGroup(parameters, [{ get: () => ({ 'UserID': 30, 'UserID': 0 }) }]);
+        expect(res.length).toBe(2);
+        done();
+      }
+    });
     it('initialize_OPENSTREET', (done) => {
         let options = {
             server: server,