@supermapgis/vue-iclient-leaflet 11.2.1 → 11.3.0

package/src/common/web-map/WebMapBase.ts

@@ -1,1178 +0,0 @@
-import { Events } from 'vue-iclient/src/common/_types/event/Events';
-import municipalCenterData from './config/MunicipalCenter.json';
-import provincialCenterData from './config/ProvinceCenter.json';
-import 'vue-iclient/static/libs/geostats/geostats';
-import 'vue-iclient/static/libs/json-sql/jsonsql';
-import isNumber from 'lodash.isnumber';
-import Canvg from 'canvg';
-import WebMapService from '../_utils/WebMapService';
-import { getColorWithOpacity } from '../_utils/util';
-import { getProjection, registerProjection } from '../../common/_utils/epsg-define';
-import { coordEach } from '@turf/meta';
-import difference from 'lodash.difference';
-
-// 迁徙图最大支持要素数量
-const MAX_MIGRATION_ANIMATION_COUNT = 1000;
-export default abstract class WebMapBase extends Events {
-  map: any;
-
-  mapId: string | number | Object;
-
-  webMapInfo: any;
-
-  mapOptions: any;
-
-  serverUrl: string;
-
-  accessToken: string;
-
-  accessKey: string;
-
-  tiandituKey: string;
-
-  bingMapsKey: string;
-
-  googleMapsAPIKey: string;
-
-  googleMapsLanguage: string;
-
-  withCredentials: boolean;
-
-  proxy: string | boolean;
-
-  target: string;
-
-  excludePortalProxyUrl: boolean;
-
-  isSuperMapOnline: boolean;
-
-  zoom: number;
-
-  mapParams: { title?: string; description?: string };
-
-  baseProjection: string;
-
-  ignoreBaseProjection: boolean;
-
-  on: any;
-
-  echartslayer: any = [];
-
-  eventTypes: any;
-
-  triggerEvent: any;
-
-  protected webMapService: WebMapService;
-
-  protected _layers: any = [];
-
-  protected _svgDiv: HTMLElement;
-
-  protected _taskID: Date;
-
-  protected layerAdded: number;
-
-  protected expectLayerLen: number;
-
-  protected canvgsV: any = [];
-
-  constructor(id, options?, mapOptions?) {
-    super();
-    this.serverUrl = options.serverUrl || 'https://www.supermapol.com';
-    this.accessToken = options.accessToken;
-    this.accessKey = options.accessKey;
-    this.tiandituKey = options.tiandituKey || '';
-    this.googleMapsAPIKey = options.googleMapsAPIKey || '';
-    this.bingMapsKey = options.bingMapsKey || '';
-    this.googleMapsLanguage = options.googleMapsLanguage || 'zh-CN';
-    this.withCredentials = options.withCredentials || false;
-    this.proxy = options.proxy;
-    this.target = options.target || 'map';
-    this.excludePortalProxyUrl = options.excludePortalProxyUrl;
-    this.isSuperMapOnline = options.isSuperMapOnline;
-    this.ignoreBaseProjection = options.ignoreBaseProjection;
-    this.echartslayer = [];
-    this.webMapService = new WebMapService(id, options);
-    this.mapOptions = mapOptions;
-    this.eventTypes = [
-      'getmapinfofailed',
-      'crsnotsupport',
-      'getlayerdatasourcefailed',
-      'addlayerssucceeded',
-      'notsupportmvt',
-      'notsupportbaidumap',
-      'projectionIsNotMatch',
-      'beforeremovemap',
-      'mapinitialized'
-    ];
-    this.mapId = id;
-  }
-
-  abstract _initWebMap(): void;
-  abstract _getMapInfo(data, _taskID?);
-  abstract _createMap();
-  // TODO 重构子类 webmap layer 添加逻辑，只重写具体添加某个layer的方法，基类实现 initxxxx
-  abstract _initBaseLayer(mapInfo);
-  abstract _initOverlayLayer(layer, features?);
-
-  abstract _addLayerSucceeded();
-  abstract _unproject(point: [number, number]): [number, number];
-  abstract clean();
-
-  public echartsLayerResize(): void {
-    this.echartslayer.forEach(echartslayer => {
-      echartslayer.chart.resize();
-    });
-  }
-
-  public setMapId(mapId: string | number): void {
-    if (typeof mapId === 'string' || typeof mapId === 'number') {
-      this.mapId = mapId;
-      this.webMapInfo = null;
-    } else if (mapId !== null && typeof mapId === 'object') {
-      this.webMapInfo = mapId;
-    }
-    this.webMapService.setMapId(mapId);
-    if (!mapId) {
-      return;
-    }
-    setTimeout(() => {
-      this._initWebMap();
-    }, 0);
-  }
-
-  public setServerUrl(serverUrl: string): void {
-    this.serverUrl = serverUrl;
-    this.webMapService.setServerUrl(serverUrl);
-  }
-
-  public setWithCredentials(withCredentials) {
-    this.withCredentials = withCredentials;
-    this.webMapService.setWithCredentials(withCredentials);
-  }
-
-  public setProxy(proxy) {
-    this.proxy = proxy;
-    this.webMapService.setProxy(proxy);
-  }
-
-  public setZoom(zoom) {
-    if (this.map) {
-      this.mapOptions.zoom = zoom;
-      if (zoom !== +this.map.getZoom().toFixed(2)) {
-        (zoom || zoom === 0) && this.map.setZoom(zoom, { from: 'setZoom' });
-      }
-    }
-  }
-
-  public setMaxBounds(maxBounds): void {
-    if (this.map) {
-      this.mapOptions.maxBounds = maxBounds;
-      maxBounds && this.map.setMaxBounds(maxBounds);
-    }
-  }
-
-  public setMinZoom(minZoom): void {
-    if (this.map) {
-      this.mapOptions.minZoom = minZoom;
-      (minZoom || minZoom === 0) && this.map.setMinZoom(minZoom);
-    }
-  }
-
-  public setMaxZoom(maxZoom): void {
-    if (this.map) {
-      this.mapOptions.maxZoom = maxZoom;
-      (maxZoom || maxZoom === 0) && this.map.setMaxZoom(maxZoom);
-    }
-  }
-
-  protected initWebMap() {
-    this.clean();
-    this.serverUrl = this.serverUrl && this.webMapService.handleServerUrl(this.serverUrl);
-    if (this.webMapInfo) {
-      // 传入是webmap对象
-      const mapInfo = this.webMapInfo;
-      mapInfo.mapParams = {
-        title: this.webMapInfo.title,
-        description: this.webMapInfo.description
-      };
-      this.mapParams = mapInfo.mapParams;
-      this._getMapInfo(mapInfo);
-      return;
-    } else if (!this.mapId || !this.serverUrl) {
-      this._createMap();
-      return;
-    }
-    this._taskID = new Date();
-    this.getMapInfo(this._taskID);
-  }
-
-  protected getMapInfo(_taskID) {
-    this.serverUrl = this.serverUrl && this.webMapService.handleServerUrl(this.serverUrl);
-    this.webMapService
-      .getMapInfo()
-      .then(
-        (mapInfo: any) => {
-          if (this._taskID !== _taskID) {
-            return;
-          }
-          // 存储地图的名称以及描述等信息，返回给用户
-          this.mapParams = mapInfo.mapParams;
-          this._getMapInfo(mapInfo, _taskID);
-        },
-        error => {
-          throw error;
-        }
-      )
-      .catch(error => {
-        this.triggerEvent('getmapinfofailed', { error });
-        console.log(error);
-      });
-  }
-
-  protected getBaseLayerType(layerInfo) {
-    let layerType = layerInfo.layerType; // 底图和rest地图兼容
-
-    if (
-      layerType.indexOf('TIANDITU_VEC') > -1 ||
-      layerType.indexOf('TIANDITU_IMG') > -1 ||
-      layerType.indexOf('TIANDITU_TER') > -1
-    ) {
-      layerType = 'TIANDITU';
-    }
-
-    switch (layerType) {
-      case 'TILE':
-      case 'SUPERMAP_REST':
-        return 'TILE';
-      case 'CLOUD':
-      case 'CLOUD_BLACK':
-        return 'CLOUD';
-      case 'OSM':
-      case 'JAPAN_ORT':
-      case 'JAPAN_RELIEF':
-      case 'JAPAN_PALE':
-      case 'JAPAN_STD':
-      case 'GOOGLE_CN':
-      case 'GOOGLE':
-        return 'XYZ';
-      default:
-        return layerType;
-    }
-  }
-
-  protected getMapurls(mapurl: { CLOUD?: string; CLOUD_BLACK?: string; OSM?: string } = {}) {
-    const mapUrls = {
-      CLOUD: mapurl.CLOUD || 'http://t2.dituhui.com/FileService/image?map=quanguo&type=web&x={x}&y={y}&z={z}',
-      CLOUD_BLACK: mapurl.CLOUD_BLACK || 'http://t3.dituhui.com/MapService/getGdp?x={x}&y={y}&z={z}',
-      OSM: mapurl.OSM || 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-      GOOGLE:
-      'https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i540264686!3m12!2s{googleMapsLanguage}!3sUS!5e18!12m4!1e68!2m2!1sset!2sRoadmap!12m3!1e37!2m1!1ssmartmaps!4e0&key={googleMapsAPIKey}',
-      GOOGLE_CN: 'https://mt{0-3}.google.com/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',
-      JAPAN_STD: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
-      JAPAN_PALE: 'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
-      JAPAN_RELIEF: 'https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png',
-      JAPAN_ORT: 'https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg'
-    };
-
-    return mapUrls;
-  }
-
-  protected getLayerFeatures(layer, _taskID, type) {
-    const getLayerFunc = this.webMapService.getLayerFeatures(type, layer, this.baseProjection);
-    getLayerFunc &&
-      getLayerFunc
-        .then(
-          async result => {
-            if (this.mapId && this._taskID !== _taskID) {
-              return;
-            }
-            if (result && layer.projection) {
-              if (!getProjection(layer.projection)) {
-                const epsgWKT = await this.webMapService.getEpsgCodeInfo(
-                  layer.projection.split(':')[1],
-                  this.serverUrl
-                );
-                if (epsgWKT) {
-                  registerProjection(layer.projection, epsgWKT);
-                }
-              }
-            }
-
-            this._getLayerFeaturesSucceeded(result, layer);
-          },
-          error => {
-            throw new Error(error);
-          }
-        )
-        .catch(error => {
-          this._addLayerSucceeded();
-          this.triggerEvent('getlayerdatasourcefailed', { error, layer, map: this.map });
-          console.log(error);
-        });
-  }
-
-  protected setFeatureInfo(feature: any): any {
-    let featureInfo;
-    const info = feature.dv_v5_markerInfo;
-    if (info && info.dataViz_title) {
-      // 有featureInfo信息就不需要再添加
-      featureInfo = info;
-    } else {
-      // featureInfo = this.getDefaultAttribute();
-      return info;
-    }
-    const properties = feature.properties;
-    for (const key in featureInfo) {
-      if (properties[key]) {
-        featureInfo[key] = properties[key];
-        delete properties[key];
-      }
-    }
-    return featureInfo;
-  }
-
-  protected getRankStyleGroup(themeField, features, parameters) {
-    // 找出所有的单值
-    const values = [];
-    let segements = [];
-    const style = parameters.style;
-    const themeSetting = parameters.themeSetting;
-    const segmentMethod = themeSetting.segmentMethod;
-    const segmentCount = themeSetting.segmentCount;
-    const customSettings = themeSetting.customSettings;
-    const minR = parameters.themeSetting.minRadius;
-    const maxR = parameters.themeSetting.maxRadius;
-    const colors = themeSetting.colors;
-    const fillColor = style.fillColor;
-    features.forEach(feature => {
-      const properties = feature.properties;
-      const value = properties[themeField];
-      // 过滤掉空值和非数值
-      if (value == null || value === '' || !isNumber(+value)) {
-        return;
-      }
-      values.push(Number(value));
-    });
-    try {
-      segements = SuperMap.ArrayStatistic.getArraySegments(values, segmentMethod, segmentCount);
-    } catch (error) {
-      console.log(error);
-    }
-
-    // 处理自定义 分段
-    for (let i = 0; i < segmentCount; i++) {
-      if (i in customSettings) {
-        const startValue = customSettings[i].segment.start;
-        const endValue = customSettings[i].segment.end;
-        startValue != null && (segements[i] = startValue);
-        endValue != null && (segements[i + 1] = endValue);
-      }
-    }
-
-    // 生成styleGroup
-    const styleGroup = [];
-    if (segements && segements.length) {
-      const len = segements.length;
-      const incrementR = (maxR - minR) / (len - 1); // 半径增量
-      let start;
-      let end;
-      let radius = Number(((maxR + minR) / 2).toFixed(2));
-      let color = '';
-      const rangeColors = colors ? SuperMap.ColorsPickerUtil.getGradientColors(colors, len, 'RANGE') : [];
-      for (let i = 0; i < len - 1; i++) {
-        // 处理radius
-        start = Number(segements[i].toFixed(2));
-        end = Number(segements[i + 1].toFixed(2));
-        // 这里特殊处理以下分段值相同的情况（即所有字段值相同）
-        radius = start === end ? radius : minR + Math.round(incrementR * i);
-        // 最后一个分段时将end+0.01，避免取不到最大值
-        end = i === len - 2 ? end + 0.01 : end;
-        // 处理自定义 半径
-        radius = customSettings[i] && customSettings[i].radius ? customSettings[i].radius : radius;
-        style.radius = radius;
-        // 处理颜色
-        if (colors && colors.length > 0) {
-          color = customSettings[i] && customSettings[i].color ? customSettings[i].color : rangeColors[i] || fillColor;
-          style.fillColor = color;
-        }
-        styleGroup.push({ radius, color, start, end, style });
-      }
-      return styleGroup;
-    } else {
-      return false;
-    }
-  }
-
-  protected createRankStyleSource(parameters, features) {
-    const themeSetting = parameters.themeSetting;
-    const themeField = themeSetting.themeField;
-    const styleGroups = this.getRankStyleGroup(themeField, features, parameters);
-    // @ts-ignore
-    return styleGroups ? { parameters, styleGroups } : false;
-  }
-
-  protected isMatchAdministrativeName(featureName, fieldName) {
-    const isString = typeof fieldName === 'string' && fieldName.constructor === String;
-    if (isString) {
-      let shortName = featureName.substr(0, 2);
-      // 张家口市和张家界市 特殊处理
-      if (shortName === '张家') {
-        shortName = featureName.substr(0, 3);
-      }
-      return !!fieldName.match(new RegExp(shortName));
-    }
-    return false;
-  }
-
-  protected getRestMapLayerInfo(restMapInfo, layer) {
-    const { bounds, coordUnit, visibleScales, url } = restMapInfo;
-    layer.layerType = 'TILE';
-    layer.orginEpsgCode = this.baseProjection;
-    layer.units = coordUnit && coordUnit.toLowerCase();
-    layer.extent = [bounds.left, bounds.bottom, bounds.right, bounds.top];
-    layer.visibleScales = visibleScales;
-    layer.url = url;
-    layer.sourceType = 'TILE';
-    return layer;
-  }
-
-  protected handleLayerFeatures(features, layerInfo) {
-    const { layerType, style, themeSetting, filterCondition } = layerInfo;
-    if ((style || themeSetting) && filterCondition) {
-      // 将 feature 根据过滤条件进行过滤, 分段专题图和单值专题图因为要计算 styleGroup 所以暂时不过滤
-      if (layerType !== 'RANGE' && layerType !== 'UNIQUE' && layerType !== 'RANK_SYMBOL') {
-        features = this.getFilterFeatures(filterCondition, features);
-      }
-    }
-
-    return features;
-  }
-
-  protected mergeFeatures(layerId: string, features: any, mergeByField?: string): any {
-    if (!(features instanceof Array)) {
-      return features;
-    }
-    features = features.map((feature: any, index: any) => {
-      if (!Object.prototype.hasOwnProperty.call(feature.properties, 'index')) {
-        feature.properties.index = index;
-      }
-      return feature;
-    });
-    if (!features.length || !mergeByField && features[0].geometry) {
-      return features;
-    }
-    const source = this.map.getSource(layerId);
-    if ((!source || !source._data.features) && features[0].geometry) {
-      return features;
-    }
-    const prevFeatures = source && source._data && source._data.features;
-    const nextFeatures = [];
-    if (!mergeByField && prevFeatures) {
-      return prevFeatures;
-    }
-    features.forEach((feature: any) => {
-      const prevFeature = prevFeatures.find((item: any) => {
-        if (isNaN(+item.properties[mergeByField]) && isNaN(+feature.properties[mergeByField])) {
-          return (
-            JSON.stringify(item.properties[mergeByField] || '') ===
-            JSON.stringify(feature.properties[mergeByField] || '')
-          );
-        } else {
-          return +item.properties[mergeByField] === +feature.properties[mergeByField];
-        }
-      });
-      if (prevFeature) {
-        nextFeatures.push({
-          ...prevFeature,
-          ...feature
-        });
-      } else if (feature.geometry) {
-        nextFeatures.push(feature);
-      }
-    });
-    return nextFeatures;
-  }
-
-  protected getFilterFeatures(filterCondition: string, allFeatures): any {
-    if (!filterCondition) {
-      return allFeatures;
-    }
-    let condition = this.replaceFilterCharacter(filterCondition);
-    const filterFeatures = [];
-    for (let i = 0; i < allFeatures.length; i++) {
-      const feature = allFeatures[i];
-      let filterResult: any;
-      const properties = feature.properties;
-      try {
-        condition = this.parseCondition(condition, Object.keys(properties));
-        const filterFeature = this.parseConditionFeature(properties);
-        const sql = 'select * from json where (' + condition + ')';
-        filterResult = window.jsonsql.query(sql, { attributes: filterFeature });
-      } catch (err) {
-        // 必须把要过滤得内容封装成一个对象,主要是处理jsonsql(line : 62)中由于with语句遍历对象造成的问题
-        continue;
-      }
-      if (filterResult && filterResult.length > 0) {
-        // afterFilterFeatureIdx.push(i);
-        filterFeatures.push(feature);
-      }
-    }
-    return filterFeatures;
-  }
-
-  protected replaceFilterCharacter(filterString: string): string {
-    filterString = filterString
-      .replace(/=/g, '==')
-      .replace(/AND|and/g, '&&')
-      .replace(/or|OR/g, '||')
-      .replace(/<==/g, '<=')
-      .replace(/>==/g, '>=');
-    return filterString;
-  }
-
-  protected getParseSpecialCharacter() {
-    // 特殊字符字典
-    const directory = ['(', ')', '（', '）', ',', '，'];
-    const res = {};
-    directory.forEach((item, index) => {
-      res[item] = `$${index}`;
-    });
-    return res;
-  }
-
-  protected parseSpecialCharacter(str) {
-    const directory = this.getParseSpecialCharacter();
-    for (let key in directory) {
-      const replaceValue = directory[key];
-      const pattern = new RegExp(`\\${key}`, 'g');
-      // eslint-disable-next-line
-      while (pattern.test(str)) {
-        str = str.replace(pattern, replaceValue);
-      }
-    }
-    return str;
-  }
-
-  protected parseCondition(filterCondition, keys) {
-    const str = filterCondition.replace(/&|\||>|<|=|!/g, ' ');
-    const arr = str.split(' ').filter((item) => item);
-    let result = filterCondition;
-    arr.forEach((item) => {
-      const key = keys.find((val) => val === item);
-      if (this.startsWithNumber(item) && key) {
-        result = result.replace(key, '$' + key);
-      }
-      if (key) {
-        const res = this.parseSpecialCharacter(key);
-        result = result.replace(key, res);
-      }
-    });
-    return result;
-  }
-
-  // 处理jsonsqlfeature, 加前缀
-  protected parseConditionFeature(feature) {
-    let copyValue = {};
-    for (let key in feature) {
-      let copyKey = key;
-      if (this.startsWithNumber(key)) {
-        copyKey = '$' + key;
-      }
-      copyKey = this.parseSpecialCharacter(copyKey);
-      copyValue[copyKey] = feature[key];
-    }
-    return copyValue;
-  }
-
-  protected startsWithNumber(str) {
-    return /^\d/.test(str);
-  }
-
-  protected getEchartsLayerOptions(layerInfo, features, coordinateSystem) {
-    const properties = this.webMapService.getFeatureProperties(features);
-    const lineData = this._createLinesData(layerInfo, properties);
-    const pointData = this._createPointsData(lineData, layerInfo, properties);
-    const options = this._createOptions(layerInfo, lineData, pointData, coordinateSystem);
-    return options;
-  }
-
-  protected getDashStyle(str, strokeWidth = 1, type = 'array') {
-    if (!str) {
-      return type === 'array' ? [] : '';
-    }
-
-    const w = strokeWidth;
-    let dashArr;
-    switch (str) {
-      case 'solid':
-        dashArr = [];
-        break;
-      case 'dot':
-        dashArr = [1, 4 * w];
-        break;
-      case 'dash':
-        dashArr = [4 * w, 4 * w];
-        break;
-      case 'dashrailway':
-        dashArr = [8 * w, 12 * w];
-        break;
-      case 'dashdot':
-        dashArr = [4 * w, 4 * w, 1 * w, 4 * w];
-        break;
-      case 'longdash':
-        dashArr = [8 * w, 4 * w];
-        break;
-      case 'longdashdot':
-        dashArr = [8 * w, 4 * w, 1, 4 * w];
-        break;
-      default:
-        if (SuperMap.Util.isArray(str)) {
-          dashArr = str;
-        }
-        str = SuperMap.String.trim(str).replace(/\s+/g, ',');
-        dashArr = str.replace(/\[|\]/gi, '').split(',');
-        break;
-    }
-    dashArr = type === 'array' ? dashArr : dashArr.join(',');
-    return dashArr;
-  }
-
-  protected getCanvasFromSVG(svgUrl: string, divDom: HTMLElement, callBack: Function): void {
-    const canvas = document.createElement('canvas');
-    canvas.id = `dataviz-canvas-${new Date().getTime()}`;
-    canvas.style.display = 'none';
-    divDom.appendChild(canvas);
-    if (svgUrl) {
-      const canvgs = window.canvg?.default ? window.canvg.default : Canvg;
-      const ctx = canvas.getContext('2d');
-      canvgs.from(ctx, svgUrl, {
-        ignoreMouse: true,
-        ignoreAnimation: true,
-        forceRedraw: () => false
-      }).then(v => {
-        v.start();
-        this.canvgsV.push(v);
-        if (canvas.width > 300 || canvas.height > 300) {
-          return;
-        }
-        callBack(canvas);
-      });
-    } else {
-      callBack(canvas);
-    }
-  }
-
-  protected stopCanvg() {
-    this.canvgsV.forEach(v => v.stop());
-    this.canvgsV = [];
-  }
-
-  protected getRangeStyleGroup(layerInfo: any, features: any): Array<any> | void {
-    const { featureType, style, themeSetting } = layerInfo;
-    const { customSettings, themeField, segmentCount, segmentMethod, colors } = themeSetting;
-
-    // 找出分段值
-    const values = [];
-    let attributes;
-
-    features.forEach(feature => {
-      attributes = feature.properties;
-      if (attributes) {
-        // 过滤掉非数值的数据
-        const val = attributes[themeField];
-        (val || val === 0) && isNumber(+val) && values.push(parseFloat(val));
-      }
-    }, this);
-
-    let segements =
-      values && values.length && SuperMap.ArrayStatistic.getArraySegments(values, segmentMethod, segmentCount);
-    if (segements) {
-      let itemNum = segmentCount;
-      if (attributes && segements[0] === segements[attributes.length - 1]) {
-        itemNum = 1;
-        segements.length = 2;
-      }
-
-      // 保留两位有效数
-      for (let i = 0; i < segements.length; i++) {
-        let value = segements[i];
-        value = i === 0 ? Math.floor(value * 100) / 100 : Math.ceil(value * 100) / 100 + 0.1; // 加0.1 解决最大值没有样式问题
-        segements[i] = Number(value.toFixed(2));
-      }
-
-      // 获取一定量的颜色
-      let curentColors = colors;
-      curentColors = SuperMap.ColorsPickerUtil.getGradientColors(curentColors, itemNum, 'RANGE');
-      for (let index = 0; index < itemNum; index++) {
-        if (index in customSettings) {
-          if (customSettings[index].segment.start) {
-            segements[index] = customSettings[index].segment.start;
-          }
-          if (customSettings[index].segment.end) {
-            segements[index + 1] = customSettings[index].segment.end;
-          }
-        }
-      }
-      // 生成styleGroup
-      const styleGroups = [];
-      for (let i = 0; i < itemNum; i++) {
-        let color = curentColors[i];
-        if (i in customSettings) {
-          if (customSettings[i].color) {
-            color = customSettings[i].color;
-          }
-        }
-        if (featureType === 'LINE') {
-          style.strokeColor = color;
-        } else {
-          style.fillColor = color;
-        }
-
-        const start = segements[i];
-        const end = segements[i + 1];
-        const styleObj = JSON.parse(JSON.stringify(style));
-        styleGroups.push({
-          style: styleObj,
-          color: color,
-          start: start,
-          end: end
-        });
-      }
-      return styleGroups;
-    }
-  }
-
-  protected 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;
-  }
-
-  protected getUniqueStyleGroup(parameters: any, features: any) {
-    const { featureType, style, themeSetting } = parameters;
-    const { colors, customSettings } = themeSetting;
-    let themeField = themeSetting.themeField;
-    // 找出所有的单值
-    const featurePropertie = (features && features[0] && features[0].properties) || {};
-    Object.keys(featurePropertie).forEach(key => {
-      key.toLocaleUpperCase() === themeField.toLocaleUpperCase() && (themeField = key);
-    });
-    const names = [];
-    for (const i in features) {
-      const properties = features[i].properties;
-      const name = properties[themeField];
-      let isSaved = false;
-      for (const j in names) {
-        if (names[j] === name) {
-          isSaved = true;
-          break;
-        }
-      }
-      if (!isSaved) {
-        names.push(name);
-      }
-    }
-
-    // 获取一定量的颜色
-    let curentColors = colors;
-    curentColors = SuperMap.ColorsPickerUtil.getGradientColors(curentColors, names.length);
-    const usedColors = this.getCustomSettingColors(customSettings, featureType).map(item => item && item.toLowerCase());
-    const allColors = SuperMap.ColorsPickerUtil.getGradientColors(colors, names.length + Object.keys(customSettings).length).map(item => item.toLowerCase());
-    const newColors = difference(allColors, usedColors);
-    const styleGroup = [];
-    names.forEach((name, index) => {
-      let color = curentColors[index];
-      let itemStyle = { ...style };
-      const customStyle = customSettings[name];
-      if (typeof customStyle === 'object') {
-        itemStyle = Object.assign(itemStyle, customStyle);
-        color = itemStyle.fillColor || itemStyle.strokeColor;
-      } else {
-        if (typeof customStyle === 'string') {
-          color = customSettings[name];
-        }
-        if (!customStyle) {
-          color = newColors.shift();
-        }
-        if (featureType === 'LINE') {
-          itemStyle.strokeColor = color;
-        } else {
-          itemStyle.fillColor = color;
-        }
-      }
-
-      styleGroup.push({
-        color: color,
-        style: itemStyle,
-        value: name,
-        themeField: themeField
-      });
-    }, this);
-
-    return styleGroup;
-  }
-
-  protected transformFeatures(features) {
-    features &&
-      features.forEach((feature, index) => {
-        let coordinates = feature.geometry && feature.geometry.coordinates;
-        if (!coordinates || coordinates.length === 0) {
-          return;
-        }
-        coordEach(feature, (coordinates) => {
-          // @ts-ignore
-          let transCoordinates = this._unproject(coordinates);
-          coordinates[0] = transCoordinates[0];
-          coordinates[1] = transCoordinates[1];
-        });
-        features[index] = feature;
-      });
-
-    return features;
-  }
-
-  private _drawTextRectAndGetSize({ context, style, textArray, lineHeight, doublePadding, canvas }) {
-    let backgroundFill = style.backgroundFill;
-    const maxWidth = style.maxWidth - doublePadding;
-    let width = 0;
-    let height = 0;
-    let lineCount = 0;
-    let lineWidths = [];
-    // 100的宽度，去掉左右两边3padding
-    textArray.forEach((arrText: string) => {
-      let line = '';
-      let isOverMax = false;
-      lineCount++;
-      for (let n = 0; n < arrText.length; n++) {
-        let textLine = line + arrText[n];
-        let metrics = context.measureText(textLine);
-        let textWidth = metrics.width;
-        if ((textWidth > maxWidth && n > 0) || arrText[n] === '\n') {
-          line = arrText[n];
-          lineCount++;
-          // 有换行，记录当前换行的width
-          isOverMax = true;
-        } else {
-          line = textLine;
-          width = textWidth;
-        }
-      }
-      if(isOverMax) {
-        lineWidths.push(maxWidth);
-      } else {
-        lineWidths.push(width);
-      }
-    }, this);
-    for (let i = 0; i < lineWidths.length; i++) {
-      let lineW = lineWidths[i];
-      if(lineW >= maxWidth) {
-        // 有任何一行超过最大高度，就用最大高度
-        width = maxWidth;
-        break;
-      } else if(lineW > width) {
-        // 自己换行，就要比较每行的最大宽度
-        width = lineW;
-      }
-    }
-    width += doublePadding;
-    // -6 是为了去掉canvas下方多余空白，让文本垂直居中
-    height = lineCount * lineHeight + doublePadding - 6;
-    canvas.width = width;
-    canvas.height = height;
-    context.fillStyle = backgroundFill;
-    context.fillRect(0, 0, width, height);
-    context.lineWidth = style.borderWidth;
-    context.strokeStyle = style.borderColor;
-    context.strokeRect(0, 0, width, height);
-    return {
-      width: width,
-      height: height
-    };
-  }
-
-  private _drawTextWithCanvas({ context, canvas, style }) {
-    const padding = 8;
-    const doublePadding = padding * 2;
-    const lineHeight = Number(style.font.replace(/[^0-9]/ig, '')) + 3;
-    const textArray = style.text.split('\r\n');
-    context.font = style.font;
-    const size = this._drawTextRectAndGetSize({ context, style, textArray, lineHeight, doublePadding, canvas });
-    let positionY = padding;
-    textArray.forEach((text: string, i: number) => {
-      if(i !== 0) {
-        positionY = positionY + lineHeight;
-      }
-      context.font = style.font;
-      let textAlign = style.textAlign;
-      let x: number;
-      const width = size.width - doublePadding; // 减去padding
-      switch (textAlign) {
-        case 'center':
-          x = width / 2;
-          break;
-        case 'right':
-          x = width;
-          break;
-        default:
-          x = 8;
-          break;
-      }
-      // 字符分隔为数组
-      const arrText = text.split('');
-      let line = '';
-      const fillColor = style.fillColor;
-      // 每一行限制的高度
-      let maxWidth = style.maxWidth - doublePadding;
-      for (let n = 0; n < arrText.length; n++) {
-        let testLine = line + arrText[n];
-        let metrics = context.measureText(testLine);
-        let testWidth = metrics.width;
-        if ((testWidth > maxWidth && n > 0) || arrText[n] === '\n') {
-          context.fillStyle = fillColor;
-          context.textAlign = textAlign;
-          context.textBaseline = 'top';
-          context.fillText(line, x, positionY);
-          line = arrText[n];
-          positionY += lineHeight;
-        } else {
-          line = testLine;
-        }
-      }
-      context.fillStyle = fillColor;
-      context.textAlign = textAlign;
-      context.textBaseline = 'top';
-      context.fillText(line, x, positionY);
-    }, this);
-  }
-
-  protected handleSvgColor(style, canvas) {
-    const { fillColor, fillOpacity, strokeColor, strokeOpacity, strokeWidth } = style;
-    const context = canvas.getContext('2d');
-    if (style.text) {
-      this._drawTextWithCanvas({ context, canvas, style });
-      return;
-    }
-    if (fillColor) {
-      context.fillStyle = getColorWithOpacity(fillColor, fillOpacity);
-      context.fill();
-    }
-
-    if (strokeColor || strokeWidth) {
-      context.strokeStyle = getColorWithOpacity(strokeColor, strokeOpacity);
-      context.lineWidth = strokeWidth;
-      context.stroke();
-    }
-  }
-
-  private _createLinesData(layerInfo, properties) {
-    const data = [];
-    if (properties && properties.length) {
-      // 重新获取数据
-      const from = layerInfo.from;
-      const to = layerInfo.to;
-      let fromCoord;
-      let toCoord;
-      if (from.type === 'XY_FIELD' && from.xField && from.yField && to.xField && to.yField) {
-        properties.forEach(property => {
-          const fromX = property[from.xField];
-          const fromY = property[from.yField];
-          const toX = property[to.xField];
-          const toY = property[to.yField];
-          if (!fromX || !fromY || !toX || !toY) {
-            return;
-          }
-
-          fromCoord = [property[from.xField], property[from.yField]];
-          toCoord = [property[to.xField], property[to.yField]];
-          data.push({
-            coords: [fromCoord, toCoord]
-          });
-        });
-      } else if (from.type === 'PLACE_FIELD' && from.field && to.field) {
-        const centerDatas = provincialCenterData.concat(municipalCenterData);
-
-        properties.forEach(property => {
-          const fromField = property[from.field];
-          const toField = property[to.field];
-          fromCoord = centerDatas.find(item => {
-            return this.isMatchAdministrativeName(item.name, fromField);
-          });
-          toCoord = centerDatas.find(item => {
-            return this.isMatchAdministrativeName(item.name, toField);
-          });
-          if (!fromCoord || !toCoord) {
-            return;
-          }
-          data.push({
-            coords: [fromCoord.coord, toCoord.coord]
-          });
-        });
-      }
-    }
-    return data;
-  }
-
-  private _createPointsData(lineData, layerInfo, properties) {
-    let data = [];
-    const labelSetting = layerInfo.labelSetting;
-    // 标签隐藏则直接返回
-    if (!labelSetting.show || !lineData.length) {
-      return data;
-    }
-    const fromData = [];
-    const toData = [];
-    lineData.forEach((item, idx) => {
-      const coords = item.coords;
-      const fromCoord = coords[0];
-      const toCoord = coords[1];
-      const fromProperty = properties[idx][labelSetting.from];
-      const toProperty = properties[idx][labelSetting.to];
-      // 起始字段去重
-      const f = fromData.find(d => {
-        return d.value[0] === fromCoord[0] && d.value[1] === fromCoord[1];
-      });
-      !f &&
-        fromData.push({
-          name: fromProperty,
-          value: fromCoord
-        });
-      // 终点字段去重
-      const t = toData.find(d => {
-        return d.value[0] === toCoord[0] && d.value[1] === toCoord[1];
-      });
-      !t &&
-        toData.push({
-          name: toProperty,
-          value: toCoord
-        });
-    });
-    data = fromData.concat(toData);
-    return data;
-  }
-
-  private _createOptions(layerInfo, lineData, pointData, coordinateSystem) {
-    let series;
-    const lineSeries = this._createLineSeries(layerInfo, lineData, coordinateSystem);
-    if (pointData && pointData.length) {
-      const pointSeries: any = this._createPointSeries(layerInfo, pointData, coordinateSystem);
-      series = lineSeries.concat(pointSeries);
-    } else {
-      series = lineSeries.slice();
-    }
-    return { series };
-  }
-
-  private _createPointSeries(layerInfo, pointData, coordinateSystem) {
-    const lineSetting = layerInfo.lineSetting;
-    const animationSetting = layerInfo.animationSetting;
-    const labelSetting = layerInfo.labelSetting;
-    const pointSeries = [
-      {
-        name: 'point-series',
-        coordinateSystem: coordinateSystem,
-        zlevel: 2,
-        label: {
-          normal: {
-            show: labelSetting.show,
-            position: 'right',
-            formatter: '{b}',
-            color: labelSetting.color,
-            fontFamily: labelSetting.fontFamily
-          }
-        },
-        itemStyle: {
-          normal: {
-            color: lineSetting.color || labelSetting.color
-          }
-        },
-        data: pointData
-      }
-    ];
-
-    if (animationSetting.show) {
-      // 开启动画
-      // @ts-ignore
-      pointSeries[0].type = 'effectScatter';
-      // @ts-ignore
-      pointSeries[0].rippleEffect = {
-        brushType: 'stroke'
-      };
-    } else {
-      // 关闭动画
-      // @ts-ignore
-      pointSeries[0].type = 'scatter';
-    }
-
-    return pointSeries;
-  }
-
-  private _createLineSeries(layerInfo, lineData, coordinateSystem) {
-    const lineSetting = layerInfo.lineSetting;
-    const animationSetting = layerInfo.animationSetting;
-    const linesSeries = [
-      // 轨迹线样式
-      {
-        name: 'line-series',
-        coordinateSystem: coordinateSystem,
-        type: 'lines',
-        zlevel: 1,
-        effect: {
-          show: animationSetting.show,
-          constantSpeed: animationSetting.constantSpeed,
-          trailLength: 0,
-          symbol: animationSetting.symbol,
-          symbolSize: animationSetting.symbolSize
-        },
-        lineStyle: {
-          normal: {
-            color: lineSetting.color,
-            type: lineSetting.type,
-            width: lineSetting.width,
-            opacity: lineSetting.opacity,
-            curveness: lineSetting.curveness
-          }
-        },
-        data: lineData
-      }
-    ];
-
-    if (lineData.length >= MAX_MIGRATION_ANIMATION_COUNT) {
-      // @ts-ignore
-      linesSeries[0].large = true;
-      // @ts-ignore
-      linesSeries[0].largeThreshold = 100;
-      // @ts-ignore
-      linesSeries[0].blendMode = 'lighter';
-    }
-
-    return linesSeries;
-  }
-
-  private _getLayerFeaturesSucceeded(result, layer) {
-    switch (result.type) {
-      case 'feature':
-        this._initOverlayLayer(layer, result.features);
-        break;
-      case 'restMap':
-        layer.layerType = 'restMap';
-        this._initOverlayLayer(layer, result.restMaps);
-        break;
-      case 'mvt':
-        layer.layerType = 'mvt';
-        this._initOverlayLayer(layer, result);
-        break;
-      case 'dataflow':
-      case 'noServerId':
-        this._initOverlayLayer(layer);
-        break;
-    }
-  }
-}