[fix]xml elasticsearch webpack5报错 review by qiw

Author: luoxiao-supermap

build/webpack.config.mapboxgl.js

@@ -20,16 +20,24 @@ module.exports = {
   //其它解决方案配置
   resolve: configBase.resolve,
 
-  externals: Object.assign({}, configBase.externals, {
-    'mapbox-gl': 'mapboxgl',
-    three: 'function(){try{return THREE}catch(e){return {}}}()',
-    'deck.gl': '(function(){try{return DeckGL}catch(e){return {}}})()',
-    'luma.gl': '(function(){try{return luma}catch(e){return {}}})()',
-    'webgl-debug': '(function(){try{return webgl-debug}catch(e){return {}}})()',
-    xlsx: 'function(){try{return XLSX}catch(e){return {}}}()',
-    canvg: 'function(){try{return canvg}catch(e){return {}}}()',
-    jsonsql: 'function(){try{return jsonsql}catch(e){return {}}}()'
-  }),
+  externals: [
+    Object.assign({}, configBase.externals, {
+      'mapbox-gl': 'mapboxgl',
+      three: 'function(){try{return THREE}catch(e){return {}}}()',
+      'deck.gl': '(function(){try{return DeckGL}catch(e){return {}}})()',
+      'luma.gl': '(function(){try{return luma}catch(e){return {}}})()',
+      'webgl-debug': '(function(){try{return webgl-debug}catch(e){return {}}})()',
+      xlsx: 'function(){try{return XLSX}catch(e){return {}}}()',
+      canvg: 'function(){try{return canvg}catch(e){return {}}}()',
+      jsonsql: 'function(){try{return jsonsql}catch(e){return {}}}()'
+    }),
+    function ({context, request}, callback) {
+      if (/xml-js\/lib\/xml2json/.test(request)) {
+        return callback(null, 'function(){try{return xml2json}catch(e){return {}}}()');
+      }
+      callback();
+    }
+  ],
 
   module: {
     noParse: /[\/\\]node_modules[\/\\]mapbox-gl[\/\\]dist[\/\\]mapbox-gl\.js$/,

src/common/thirdparty/elasticsearch/ElasticSearch.js

@@ -17,9 +17,9 @@ import {Util} from "../../commontypes/Util";
  * @param {function} [options.outOfGeoFence] - 数据超出地理围栏后执行的函数。
  * @param {Object} [options.geoFence] - 地理围栏。
  * @description
- * <h3 style="font-size: 20px;margin-top: 20px;margin-bottom: 10px;">11.1.0</h3>
+ * <h3 style="font-size: 20px;margin-top: 20px;margin-bottom: 10px;">Tips</h3>
  * 该功能依赖<a href="https://github.com/elastic/elasticsearch">@elastic/elasticsearch</a>, webpack5或其他不包含Node.js Polyfills的打包工具，需要加入相关配置，以webpack为例：<br/>
-  <p style="margin-top:10px;">首先安装相关Polyfills</p><pre><code>npm i stream-http  https-browserify stream-browserify tty-browserify browserify-zlib os-browserify buffer url assert process -D</code></pre>
+  <p style="margin-top:10px;">首先安装相关Polyfills</p><pre><code>npm i stream-http  https-browserify stream-browserify tty-browserify browserify-zlib os-browserify buffer url assert process events util -D</code></pre>
   然后配置webpack<pre><code>module.exports: {
     resolve: {
       alias: {
@@ -33,7 +33,10 @@ import {Util} from "../../commontypes/Util";
         os: require.resolve('os-browserify/browser'),
         stream: require.resolve('stream-browserify'),
         tty: require.resolve('tty-browserify'),
-        zlib: require.resolve('browserify-zlib')
+        zlib: require.resolve('browserify-zlib'),
+        assert: require.resolve('assert'),
+        util: require.resolve('util'),
+        events: require.resolve('events')
       }
     }
     plugins: [

src/mapboxgl/mapping/WebMap.js

@@ -16,7 +16,6 @@ import { Lang } from '@supermap/iclient-common/lang/Lang';
 import { parseCondition, parseConditionFeature } from '@supermap/iclient-common/util/FilterCondition';
 import { Util } from '../core/Util';
 import { QueryService } from '../services/QueryService';
-import convert from 'xml-js/dist/xml-js.min';
 import Canvg from 'canvg';
 
 
@@ -89,6 +88,19 @@ const DEFAULT_WELLKNOWNSCALESET = ['GoogleCRS84Quad', 'GoogleMapsCompatible'];
  * @fires WebMap#getfeaturesfailed
  * @fires WebMap#addlayerssucceeded
  * @extends {mapboxgl.Evented}
+ * @description
+ * <h3 style="font-size: 20px;margin-top: 20px;margin-bottom: 10px;">Tips</h3>
+ * 该功能的WMTS地图依赖<a href="https://github.com/nashwaan/xml-js">xml-js</a>, webpack5或其他不包含Node.js Polyfills的打包工具，需要加入相关配置，以webpack为例：<br/>
+  <p style="margin-top:10px;">首先安装相关Polyfills</p><pre><code>npm i stream-browserify -D</code></pre>
+  然后配置webpack<pre><code>module.exports: {
+    resolve: {
+      mainFields: ['browser', 'main'],
+      fallback: {
+        fs: false,
+        stream: require.resolve('stream-browserify')
+      }
+    }
+}</code></pre>
  * @usage
  */
 export class WebMap extends mapboxgl.Evented {
@@ -456,8 +468,8 @@ export class WebMap extends mapboxgl.Evented {
 				return response.text();
 			})
 			.then(capabilitiesText => {
-				let converts = convert ? convert : window.convert;
-                let tileMatrixSet = JSON.parse(converts.xml2json(capabilitiesText, { compact: true, spaces: 4 }))
+        const xml2json = require('xml-js/lib/xml2json');
+                let tileMatrixSet = JSON.parse(xml2json(capabilitiesText, { compact: true, spaces: 4 }))
                     .Capabilities.Contents.TileMatrixSet;
                 if (!Array.isArray(tileMatrixSet)) {
                     tileMatrixSet = [tileMatrixSet];