【feature】webmap 注册 wkt 优化

Author: xiongjiaojiao

src/common/mapping/WebMapBase.js

@@ -2,7 +2,7 @@ import Canvg from 'canvg';
 import { coordEach } from '@turf/meta';
 import difference from 'lodash.difference';
 import { WebMapService } from './WebMapService';
-import { epsgDefine } from './utils/epsg-define';
+import { getEpsgCodeInfo, getProjection, registerProjection } from './utils/epsg-define';
 import { ArrayStatistic } from '../util/ArrayStatistic';
 import { ColorsPickerUtil } from '../util/ColorsPickerUtil';
 import { Util } from '../commontypes/Util';
@@ -30,6 +30,7 @@ export function createWebMapBaseExtending(SuperClass = Events, fireField = 'trig
       this.excludePortalProxyUrl = options.excludePortalProxyUrl;
       this.isSuperMapOnline = options.isSuperMapOnline;
       this.ignoreBaseProjection = options.ignoreBaseProjection;
+      this.specifiedProj4 = options.proj4;
       this.echartslayer = [];
       this.canvgsV = [];
       this.webMapService = new WebMapService(id, options);
@@ -244,13 +245,13 @@ export function createWebMapBaseExtending(SuperClass = Events, fireField = 'trig
                 return;
               }
               if (result && layer.projection) {
-                if (!epsgDefine.getProjection(layer.projection)) {
-                  const epsgWKT = await this.webMapService.getEpsgCodeInfo(
+                if (!getProjection(layer.projection, this.specifiedProj4)) {
+                  const epsgWKT = await getEpsgCodeInfo(
                     layer.projection.split(':')[1],
                     this.serverUrl
                   );
                   if (epsgWKT) {
-                      epsgDefine.registerProjection(layer.projection, epsgWKT);
+                      registerProjection(layer.projection, epsgWKT, this.specifiedProj4);
                   }
                 }
               }

src/common/mapping/WebMapService.js

@@ -390,6 +390,10 @@ export class WebMapService {
         dataSource.url,
         [decodeURIComponent(dataSource.dataSourceName) || layer.name],
         result => {
+          if (!result.result.features) {
+            reject('features must be valid');
+            return;
+          }
           features = this.parseGeoJsonData2Feature({
             allDatas: {
               features: result.result.features.features
@@ -1241,23 +1245,6 @@ export class WebMapService {
     getFeatureBySQLService.processAsync(getFeatureBySQLParams);
   }
 
-  async getEpsgCodeInfo(epsgCode, iPortalUrl) {
-    const url = iPortalUrl.slice(-1) === '/' ? iPortalUrl : `${iPortalUrl}/`;
-    let codeUrl = `${url}epsgcodes/${epsgCode}.json`;
-    const wkt = await FetchRequest.get(codeUrl, null)
-      .then(response => {
-        return response.json();
-      })
-      .then(epsgcodeInfo => {
-        return epsgcodeInfo.wkt;
-      })
-      .catch(err => {
-        console.error(err);
-        return undefined;
-      });
-    return wkt;
-  }
-
   statisticsFeatures(features, fields, fieldCaptions, fieldTypes) {
     const data = {
       features,

src/common/mapping/WebMapV2.js

@@ -2,8 +2,7 @@
  * This program are made available under the terms of the Apache License, Version 2.0
  * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html. */
 import cloneDeep from 'lodash.clonedeep';
-import proj4 from 'proj4';
-import { epsgDefine, toEpsgCode } from './utils/epsg-define';
+import { getProjection, registerProjection, toEpsgCode, transformCoodinates } from './utils/epsg-define';
 import { ColorsPickerUtil } from '../util/ColorsPickerUtil';
 import { Util } from '../commontypes/Util';
 import { ArrayStatistic } from '../util/ArrayStatistic';
@@ -110,7 +109,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
       const { projection } = mapInfo;
       let bounds, wkt;
       this.baseProjection = toEpsgCode(projection);
-      let defaultWktValue = epsgDefine.getProjection(this.baseProjection);
+      let defaultWktValue = getProjection(this.baseProjection, this.specifiedProj4);
 
       if (defaultWktValue) {
         wkt = defaultWktValue;
@@ -463,7 +462,6 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
       if (features && features[0] && features[0].geometry && features[0].geometry.type === 'Polygon') {
         features = this._handleMultyPolygon(features);
       }
-  
       if (
         features &&
         projection &&
@@ -2607,8 +2605,8 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
       if (sourceProjection === 'EPSG:4326') {
         return point;
       }
-      const coor = proj4(sourceProjection, 'EPSG:4326', point);
-      const proj = proj4.defs(sourceProjection);
+      const coor = transformCoodinates({ coordinates: point, sourceProjection, proj4: this.specifiedProj4 });
+      const proj = getProjection(sourceProjection, this.specifiedProj4);
       if (isReverse && proj.axis && proj.axis.indexOf('ne') === 0) {
         coor.reverse();
       }
@@ -2699,25 +2697,13 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
     }
 
     _defineProj4(projection, defaultEpsgCode) {
-      let epsgCode = projection;
-      let epsgValue;
-      if (!projection.split(':')[1]) {
-        if (defaultEpsgCode && defaultEpsgCode.split(':')[1]) {
-          epsgCode = defaultEpsgCode;
-        } else {
-          epsgCode = toEpsgCode(projection);
-        }
-        epsgValue = projection;
-      }
-      const defaultValue = epsgDefine.getProjection(epsgCode);
-      const defValue = epsgValue || defaultValue;
-  
-      if (!defValue) {
-        console.error(`${epsgCode} not define`);
-      } else {
-        !proj4.defs(epsgCode) && proj4.defs(epsgCode, defValue);
-        !defaultValue && epsgDefine.registerProjection(epsgCode, defValue);
+      let epsgCode = toEpsgCode(projection);
+      const reg = /^EPSG:/;
+      const defValue = epsgCode && projection.match(reg) ? getProjection(epsgCode, this.specifiedProj4) : projection;
+      if (!epsgCode && defaultEpsgCode && defaultEpsgCode.match(reg)) {
+        epsgCode = defaultEpsgCode;
       }
+      registerProjection(epsgCode, defValue, this.specifiedProj4);
       return epsgCode;
     }
 

src/common/mapping/utils/L7LayerUtil.js

@@ -1,10 +1,10 @@
 import { FetchRequest } from '../../util/FetchRequest';
-import proj4 from 'proj4';
 import center from '@turf/center';
 import * as G2 from '@antv/g2';
 import { isNumber } from './util';
 import Color from './Color';
 import debounce from 'lodash.debounce';
+import { getEpsgCodeInfo, getProjection, registerProjection, transformCoodinates } from './epsg-define';
 
 const SelectStyleTypes = {
   basic: 'base',
@@ -186,8 +186,41 @@ export function isL7Layer(layer) {
   );
 }
 
+export function getL7Filter(filter, featureFilter) {
+  if (!filter) {
+    return;
+  }
+  const [condition, ...expressions] = filter;
+  const newExpressions = expressions.filter((exp) => {
+    const [, f] = exp;
+    if (['$type', '$id'].includes(f)) {
+      return false;
+    }
+    return true;
+  });
+  const field = Array.from(new Set(getFilterFields(newExpressions)));
+  const fFilter = featureFilter([condition, ...newExpressions]);
+  const filterFunc = fFilter.filter.bind(fFilter);
+  return {
+    field,
+    values: (...args) => {
+      const properties = {};
+      field.forEach((f, idx) => {
+        properties[f] = args[idx];
+      });
+      const result = filterFunc(
+        {},
+        {
+          properties
+        }
+      );
+      return result;
+    }
+  };
+}
+
 export function L7LayerUtil(config) {
-  const { featureFilter, expression, spec, L7Layer, L7 } = config;
+  const { featureFilter, expression, spec, L7Layer, L7, proj4 } = config;
 
   /**
  * @param {string} url
@@ -487,11 +520,21 @@ export function L7LayerUtil(config) {
     }
     // proj4缺陷，EPSG:4214的坐标x为180，转换后变成-179.
     if (fromProjection === 'EPSG:4214' && toProjection === 'EPSG:4326' && coordinates[0] === 180) {
-      const newCoordinate = proj4(fromProjection, toProjection, coordinates);
+      const newCoordinate = transformCoodinates({
+        coordinates,
+        sourceProjection: fromProjection,
+        destProjection: toProjection,
+        proj4
+      });
       newCoordinate[0] = 180;
       return newCoordinate;
     }
-    return proj4(fromProjection, toProjection, coordinates);
+    return transformCoodinates({
+      coordinates,
+      sourceProjection: fromProjection,
+      destProjection: toProjection,
+      proj4
+    });
   }
 
   /**
@@ -581,6 +624,10 @@ export function L7LayerUtil(config) {
     const result = await resultRes.json();
     const projection = `EPSG:${result.epsgCode}`;
     if (projection !== 'EPSG:4326') {
+      if (!getProjection(projection, proj4)) {
+        const epsgWKT = await getEpsgCodeInfo(projection, options.server);
+        registerProjection(projection, epsgWKT, proj4);
+      }
       const newFeatures = transformGeometryCoordinates(allFeature.features, projection);
       newFeatures && (allFeature.features = newFeatures);
     }
@@ -679,23 +726,6 @@ export function L7LayerUtil(config) {
     return rules[type] && rules[type](source, sourceLayer, options);
   }
 
-  function getFilterFields(filter) {
-    const result = [];
-    for (const exp of filter) {
-      if (exp instanceof Array && exp[1] && typeof exp[1] === 'string') {
-        result.push(exp[1]);
-        continue;
-      }
-      if (exp instanceof Array) {
-        const subResult = getFilterFields(exp);
-        if (subResult && subResult.length > 0) {
-          result.push(...subResult);
-        }
-      }
-    }
-    return result;
-  }
-
   /**
    * 获取L7图层所需要的共有的图层信息
    * @param layer
@@ -716,7 +746,7 @@ export function L7LayerUtil(config) {
         maxZoom: maxzoom,
         visible: layout.visibility === 'none' ? false : true
       },
-      filter: getL7Filter(filter)
+      filter: getL7Filter(filter, featureFilter)
     };
   }
 
@@ -1997,41 +2027,7 @@ export function L7LayerUtil(config) {
     return layer;
   }
 
-  function getL7Filter(filter) {
-    if (!filter) {
-      return;
-    }
-    const [condition, ...expressions] = filter;
-    const newExpressions = expressions.filter((exp) => {
-      const [, f] = exp;
-      if (['$type', '$id'].includes(f)) {
-        return false;
-      }
-      return true;
-    });
-    const field = Array.from(new Set(getFilterFields(newExpressions)));
-    const fFilter = featureFilter([condition, ...newExpressions]);
-    const filterFunc = fFilter.filter.bind(fFilter);
-    return {
-      field,
-      values: (...args) => {
-        const properties = {};
-        field.forEach((f, idx) => {
-          properties[f] = args[idx];
-        });
-        const result = filterFunc(
-          {},
-          {
-            properties
-          }
-        );
-        return result;
-      }
-    };
-  }
-
   return {
-    getL7Filter,
     async addL7Layers({ map, webMapInfo, l7Layers, spriteDatas, options }) {
       // 添加L7图层
       const { layers, sources, sprite } = webMapInfo;
@@ -2081,3 +2077,20 @@ export function L7LayerUtil(config) {
 }
 
 
+function getFilterFields(filter) {
+  const result = [];
+  for (const exp of filter) {
+    if (exp instanceof Array && exp[1] && typeof exp[1] === 'string') {
+      result.push(exp[1]);
+      continue;
+    }
+    if (exp instanceof Array) {
+      const subResult = getFilterFields(exp);
+      if (subResult && subResult.length > 0) {
+        result.push(...subResult);
+      }
+    }
+  }
+  return result;
+}
+