update 等级和标签图层优化, review by qiwei

Author: xiongjiaojiao

dist/mapboxgl/iclient-mapboxgl-react.js

@@ -18198,7 +18198,7 @@ if (true) {
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/** @license React v16.11.0
+/** @license React v16.10.2
  * react-is.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -21615,7 +21615,7 @@ var UniqueThemeLayer_dec,UniqueThemeLayer_class,UniqueThemeLayer_class2,UniqueTh
 // CONCATENATED MODULE: ./src/mapboxgl/web-map/layer/ranksymbol-theme/RanksymbolThemeLayerViewModel.js
 var RanksymbolThemeLayerViewModel_RanksymbolThemeLayerViewModel=/*#__PURE__*/function(_mapboxgl$Evented){_inherits(RanksymbolThemeLayerViewModel,_mapboxgl$Evented);function RanksymbolThemeLayerViewModel(map,themeProps){var _this;_classCallCheck(this,RanksymbolThemeLayerViewModel);_this=_possibleConstructorReturn(this,_getPrototypeOf(RanksymbolThemeLayerViewModel).call(this));_this.map=map;var layerName=themeProps.layerName,options=themeProps.options,symbolType=themeProps.symbolType,layerId=themeProps.layerId,data=themeProps.data;_this.layerName=layerName||layerId;_this.symbolType=symbolType||'Circle';options.id=options.id||layerId;_this.options=options;_this.layerId=layerId;_this.data=data||[];_this._init();return _this;}_createClass(RanksymbolThemeLayerViewModel,[{key:"_init",value:function _init(){this.themeLayer=new mapbox_gl_enhance_js_default.a.supermap.RankSymbolThemeLayer(this.layerName,this.symbolType,this.options);this.map.addLayer(this.themeLayer);this.themeLayer.addFeatures(this.data);}}]);return RanksymbolThemeLayerViewModel;}(mapbox_gl_enhance_js_default.a.Evented);
 // CONCATENATED MODULE: ./src/mapboxgl/web-map/layer/ranksymbol-theme/RanksymbolThemeLayer.tsx
-var RanksymbolThemeLayer_dec,RanksymbolThemeLayer_class,RanksymbolThemeLayer_temp;var RanksymbolThemeLayer_RanksymbolThemeLayer=(RanksymbolThemeLayer_dec=compose_default()(mapGetter,withLayer),RanksymbolThemeLayer_dec(RanksymbolThemeLayer_class=(RanksymbolThemeLayer_temp=/*#__PURE__*/function(_Component){_inherits(RanksymbolThemeLayer,_Component);function RanksymbolThemeLayer(){var _getPrototypeOf2;var _this;_classCallCheck(this,RanksymbolThemeLayer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(RanksymbolThemeLayer)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.viewModel=void 0;return _this;}_createClass(RanksymbolThemeLayer,[{key:"loaded",value:function loaded(map){this.viewModel=new RanksymbolThemeLayerViewModel_RanksymbolThemeLayerViewModel(map,this.props);this.props.onLoad(this.viewModel.themeLayer,map);}},{key:"render",value:function render(){return null;}}]);return RanksymbolThemeLayer;}(external_root_React_commonjs_React_commonjs2_React_amd_React_["Component"]),RanksymbolThemeLayer_temp))||RanksymbolThemeLayer_class);
+var RanksymbolThemeLayer_dec,RanksymbolThemeLayer_class,RanksymbolThemeLayer_temp;var RanksymbolThemeLayer_RanksymbolThemeLayer=(RanksymbolThemeLayer_dec=compose_default()(mapGetter,withLayer),RanksymbolThemeLayer_dec(RanksymbolThemeLayer_class=(RanksymbolThemeLayer_temp=/*#__PURE__*/function(_Component){_inherits(RanksymbolThemeLayer,_Component);function RanksymbolThemeLayer(){var _getPrototypeOf2;var _this;_classCallCheck(this,RanksymbolThemeLayer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(RanksymbolThemeLayer)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.viewModel=void 0;return _this;}_createClass(RanksymbolThemeLayer,[{key:"loaded",value:function loaded(map){var onLoad=this.props.onLoad;this.viewModel=new RanksymbolThemeLayerViewModel_RanksymbolThemeLayerViewModel(map,this.props);isFunction(onLoad)&&onLoad(this.viewModel.themeLayer,map);}},{key:"render",value:function render(){return null;}}]);return RanksymbolThemeLayer;}(external_root_React_commonjs_React_commonjs2_React_amd_React_["Component"]),RanksymbolThemeLayer_temp))||RanksymbolThemeLayer_class);
 // CONCATENATED MODULE: ./src/mapboxgl/web-map/layer/range-theme/RangeThemeLayerViewModel.js
 var RangeThemeLayerViewModel_RangeThemeLayerViewModel=/*#__PURE__*/function(_mapboxgl$Evented){_inherits(RangeThemeLayerViewModel,_mapboxgl$Evented);function RangeThemeLayerViewModel(map,themeProps){var _this;_classCallCheck(this,RangeThemeLayerViewModel);_this=_possibleConstructorReturn(this,_getPrototypeOf(RangeThemeLayerViewModel).call(this));var layerName=themeProps.layerName,options=themeProps.options,layerId=themeProps.layerId,data=themeProps.data;_this.map=map;_this.layerName=layerName||layerId;options.id=options.id||layerId;_this.options=options;_this.layerId=layerId;_this.data=data||[];_this._init();return _this;}_createClass(RangeThemeLayerViewModel,[{key:"_init",value:function _init(){this.themeLayer=new mapbox_gl_enhance_js_default.a.supermap.RangeThemeLayer(this.layerName,this.options);this.map.addLayer(this.themeLayer);if(this.data&&this.data.length){this.setData(this.data);}}},{key:"setData",value:function setData(data){this.themeLayer.addFeatures(data);}}]);return RangeThemeLayerViewModel;}(mapbox_gl_enhance_js_default.a.Evented);
 // CONCATENATED MODULE: ./src/mapboxgl/web-map/layer/range-theme/RangeThemeLayer.tsx
@@ -21661,9 +21661,9 @@ var DeckglLayerViewModel_DeckglLayerViewModel=/*#__PURE__*/function(_mapboxgl$Ev
 // CONCATENATED MODULE: ./src/mapboxgl/web-map/layer/deckgl/DeckglLayer.tsx
 var DeckglLayer_dec,DeckglLayer_class,DeckglLayer_temp;var LAYER_TYPE_ID_LIST=['scatter-plot','path-layer','polygon-layer','arc-layer','hexagon-layer','screen-grid-layer'];var DeckglLayer_DeckglLayer=(DeckglLayer_dec=compose_default()(mapGetter,withLayer),DeckglLayer_dec(DeckglLayer_class=(DeckglLayer_temp=/*#__PURE__*/function(_Component){_inherits(DeckglLayer,_Component);function DeckglLayer(){var _getPrototypeOf2;var _this;_classCallCheck(this,DeckglLayer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(DeckglLayer)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.viewModel=void 0;return _this;}_createClass(DeckglLayer,[{key:"loaded",value:function loaded(map){var _this2=this;var matchIndex=LAYER_TYPE_ID_LIST.findIndex(function(item){return item===_this2.props.layerType;});if(matchIndex>-1){this.viewModel=new DeckglLayerViewModel_DeckglLayerViewModel(map,this.props);}}},{key:"render",value:function render(){return null;}}]);return DeckglLayer;}(external_root_React_commonjs_React_commonjs2_React_amd_React_["Component"]),DeckglLayer_temp))||DeckglLayer_class);
 // CONCATENATED MODULE: ./src/mapboxgl/web-map/layer/label-theme/LabelThemeLayerViewModel.js
-var LabelThemeLayerViewModel_LabelThemeLayerViewModel=/*#__PURE__*/function(_mapboxgl$Evented){_inherits(LabelThemeLayerViewModel,_mapboxgl$Evented);function LabelThemeLayerViewModel(map,themeProps){var _this;_classCallCheck(this,LabelThemeLayerViewModel);_this=_possibleConstructorReturn(this,_getPrototypeOf(LabelThemeLayerViewModel).call(this));var layerName=themeProps.layerName,options=themeProps.options,layerId=themeProps.layerId,data=themeProps.data;_this.map=map;_this.layerName=layerName||layerId;_this.options=options;_this.layerId=layerId;_this.data=data||[];_this._init();return _this;}_createClass(LabelThemeLayerViewModel,[{key:"_init",value:function _init(){this.themeLayer=new mapbox_gl_enhance_js_default.a.supermap.LabelThemeLayer(this.layerName,this.options);this.map.addLayer(this.themeLayer);this.themeLayer.addFeatures(this.data);}}]);return LabelThemeLayerViewModel;}(mapbox_gl_enhance_js_default.a.Evented);
+var LabelThemeLayerViewModel_LabelThemeLayerViewModel=/*#__PURE__*/function(_mapboxgl$Evented){_inherits(LabelThemeLayerViewModel,_mapboxgl$Evented);function LabelThemeLayerViewModel(map,themeProps){var _this;_classCallCheck(this,LabelThemeLayerViewModel);_this=_possibleConstructorReturn(this,_getPrototypeOf(LabelThemeLayerViewModel).call(this));var layerName=themeProps.layerName,options=themeProps.options,layerId=themeProps.layerId,data=themeProps.data;_this.map=map;_this.layerName=layerName||layerId;options.id=options.id||layerId;_this.options=options;_this.layerId=layerId;_this.data=data||[];_this._init();return _this;}_createClass(LabelThemeLayerViewModel,[{key:"_init",value:function _init(){this.themeLayer=new mapbox_gl_enhance_js_default.a.supermap.LabelThemeLayer(this.layerName,this.options);this.map.addLayer(this.themeLayer);this.themeLayer.addFeatures(this.data);}}]);return LabelThemeLayerViewModel;}(mapbox_gl_enhance_js_default.a.Evented);
 // CONCATENATED MODULE: ./src/mapboxgl/web-map/layer/label-theme/LabelThemeLayer.tsx
-var LabelThemeLayer_dec,LabelThemeLayer_class,LabelThemeLayer_class2,LabelThemeLayer_temp;var LabelThemeLayer_LabelThemeLayer=(LabelThemeLayer_dec=compose_default()(mapGetter,withLayer),LabelThemeLayer_dec(LabelThemeLayer_class=(LabelThemeLayer_temp=LabelThemeLayer_class2=/*#__PURE__*/function(_Component){_inherits(LabelThemeLayer,_Component);function LabelThemeLayer(){var _getPrototypeOf2;var _this;_classCallCheck(this,LabelThemeLayer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(LabelThemeLayer)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.viewModel=void 0;return _this;}_createClass(LabelThemeLayer,[{key:"loaded",value:function loaded(map){this.viewModel=new LabelThemeLayerViewModel_LabelThemeLayerViewModel(map,this.props);this.props.onLoad&&this.props.onLoad(this.viewModel.themeLayer,map);}},{key:"render",value:function render(){return null;}}]);return LabelThemeLayer;}(external_root_React_commonjs_React_commonjs2_React_amd_React_["Component"]),LabelThemeLayer_class2.defaultProps={options:{}},LabelThemeLayer_temp))||LabelThemeLayer_class);
+var LabelThemeLayer_dec,LabelThemeLayer_class,LabelThemeLayer_class2,LabelThemeLayer_temp;var LabelThemeLayer_LabelThemeLayer=(LabelThemeLayer_dec=compose_default()(mapGetter,withLayer),LabelThemeLayer_dec(LabelThemeLayer_class=(LabelThemeLayer_temp=LabelThemeLayer_class2=/*#__PURE__*/function(_Component){_inherits(LabelThemeLayer,_Component);function LabelThemeLayer(){var _getPrototypeOf2;var _this;_classCallCheck(this,LabelThemeLayer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(LabelThemeLayer)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.viewModel=void 0;return _this;}_createClass(LabelThemeLayer,[{key:"loaded",value:function loaded(map){var onLoad=this.props.onLoad;this.viewModel=new LabelThemeLayerViewModel_LabelThemeLayerViewModel(map,this.props);isFunction(onLoad)&&onLoad(this.viewModel.themeLayer,map);}},{key:"render",value:function render(){return null;}}]);return LabelThemeLayer;}(external_root_React_commonjs_React_commonjs2_React_amd_React_["Component"]),LabelThemeLayer_class2.defaultProps={options:{}},LabelThemeLayer_temp))||LabelThemeLayer_class);
 // CONCATENATED MODULE: ./src/mapboxgl/web-map/layer/heatmap/HeatmapLayerViewModel.js
 /**
  * @class HeatMapLayerViewModel

dist/mapboxgl/iclient-mapboxgl-react.min.js

@@ -58,9 +58,7 @@
       };
 
       widgets.loader.showLoader('data loading...');
-      var _this = this,
-        popup,
-        map;
+      var popup, map;
 
       function mapIsLoaded(e) {
         map = e.map;

examples/component/components_deckgl_react.html

@@ -129,10 +129,6 @@
           }
         ]
       };
-
-      function mapIsLoaded(e) {
-        map = e.map;
-      }
       function updateInfoView(feature, themeLayer) {
         if (!feature && popup) {
           removePopup();
@@ -293,15 +289,10 @@
         var latLng = latLng.split(',');
         return [parseFloat(latLng[0]), parseFloat(latLng[1])];
       }
-      function layerLoaded(themeLayer) {
-        themeLayer.on(
-          'mousemove',
-          function(e) {
-            handleMouseOver(themeLayer, e);
-          }.bind(this)
-        );
-      }
-      function handleMouseOver(themeLayer, e) {
+      function handleMouseOver(params) {
+        var e = params.mapboxEvent;
+        map = params.map;
+        var themeLayer = map.getLayer(params.layerId);
         if (e.target && e.target.refDataID) {
           var fid = e.target.refDataID;
           var fea = themeLayer.getFeatureById(fid);
@@ -317,12 +308,12 @@
       }
 
       ReactDOM.render(
-        <SmWebMap mapOptions={mapOptions} onLoad={mapIsLoaded}>
+        <SmWebMap mapOptions={mapOptions}>
           <SmLabelThemeLayer
             options={themeOptions}
             layerName={'LabelThemeLayer'}
             data={features}
-            onLoad={layerLoaded}
+            onMousemove={handleMouseOver}
           />
         </SmWebMap>,
         document.getElementById('main')

examples/component/components_labeltheme_react.html

@@ -41,9 +41,7 @@
       var SmWebMap = window.SuperMap.Components.SmWebMap;
       var SmRanksymbolThemeLayer = window.SuperMap.Components.SmRanksymbolThemeLayer;
 
-      var features = [],
-        popup,
-        map;
+      var features = [], popup, map;
       for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
         // 省居民消费水平（单位：元）信息
         var provinceInfo = chinaConsumptionLevel[i];
@@ -99,19 +97,10 @@
           circleHoverStyle: { fillOpacity: 1 }
         }
       };
-
-      function mapIsLoaded(e) {
-        map = e.map;
-      }
-      function layerLoaded(themeLayer) {
-        themeLayer.on(
-          'mousemove',
-          function(e) {
-            return showInfoWin(themeLayer, e);
-          }.bind(this)
-        );
-      }
-      function showInfoWin(themeLayer, e) {
+      function showInfoWin(params) {
+        var e = params.mapboxEvent;
+        map = params.map;
+        var themeLayer = map.getLayer(params.layerId);
         // e.target 是图形对象，即数据的可视化对象。
         // 图形对象的 refDataID 属性是数据（feature）的 id 属性，它指明图形对象是由那个数据制作而来;
         // 图形对象的 dataInfo 属性是图形对象表示的具体数据，他有两个属性，field、R 和 value;
@@ -156,13 +145,13 @@
       }
 
       ReactDOM.render(
-        <SmWebMap mapOptions={mapOptions} onLoad={mapIsLoaded}>
+        <SmWebMap mapOptions={mapOptions}>
           <SmRanksymbolThemeLayer
             options={themeOptions}
             layerName={'RankSymbolThemeLayer'}
             data={features}
             chartsType={'Circle'}
-            onLoad={layerLoaded}
+            onMousemove={showInfoWin}
           />
         </SmWebMap>,
         document.getElementById('main')