【feature】增加react范例动效标记图层和动效文本标记图层；修改可视化顺序 review by xiognjj

Author: luoxiao-supermap

dist/mapboxgl/iclient-mapboxgl-react.css

@@ -98,8 +98,8 @@
 .sm-component-animate-marker__dot-point {
   background: #009fd9;
   position: absolute;
-  left: -5px;
-  top: -5px;
+  left: -3px;
+  top: -3px;
   width: 10px;
   height: 10px;
   border-radius: 50%;

dist/mapboxgl/iclient-mapboxgl-react.js

@@ -34523,7 +34523,7 @@ var FluorescenceMarker_FluorescenceMarker=/*#__PURE__*/function(_Marker){_inheri
 this._setFluorescenceWidth(markerContainer[i].style);}}},{key:"setMarkersColors",value:function setMarkersColors(colors){this.options.colors=colors;if(colors&&colors.length&&colors.length>0){var markerContainer=document.getElementsByClassName('sm-component-animate-marker--fluorescence');for(var i=0;i<markerContainer.length;i++){// @ts-ignore
 this._setFluorescenceColor(markerContainer[i].style);}}}},{key:"_createMarker",value:function _createMarker(){var _this2=this;this.features.features.forEach(function(point){var markerContainer=document.createElement('div');markerContainer.className='sm-component-animate-marker--fluorescence';var marker=document.createElement('div');marker.className='sm-component-animate-marker__fluorescence';markerContainer.appendChild(marker);var nameContainer=_this2._getTextContainer(point,'fluorescence-name');markerContainer.appendChild(nameContainer);_this2._setFluorescenceWidth(markerContainer.style);_this2._setFluorescenceColor(markerContainer.style);_this2.markersElement.push(markerContainer);});}},{key:"_setFluorescenceWidth",value:function _setFluorescenceWidth(style){if(this.options.width){style.setProperty('--container-width',this.options.width/3+'px');style.setProperty('--box-shadow-width',this.options.width+'px');}}},{key:"_setFluorescenceColor",value:function _setFluorescenceColor(style){if(this.options.colors&&this.options.colors.length>0){style.setProperty('--box-shadow-color',this.options.colors[0]);style.setProperty('--light-color',this.options.colors[1]);}}}]);return FluorescenceMarker;}(Marker_Marker);
 // CONCATENATED MODULE: ./src/mapboxgl/web-map/layer/animate-marker/AnimateMarkerLayer.tsx
-var AnimateMarkerLayer_class,AnimateMarkerLayer_class2,AnimateMarkerLayer_temp;var initialState={marker:null,_markersElement:[]};var AnimateMarkerLayer_AnimateMarkerLayer=mapGetter(AnimateMarkerLayer_class=(AnimateMarkerLayer_temp=AnimateMarkerLayer_class2=/*#__PURE__*/function(_Component){_inherits(AnimateMarkerLayer,_Component);function AnimateMarkerLayer(){var _getPrototypeOf2;var _this;_classCallCheck(this,AnimateMarkerLayer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(AnimateMarkerLayer)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.viewModel=void 0;_this.map=void 0;_this.marker=void 0;_this._markersElement=void 0;_this.state=initialState;return _this;}_createClass(AnimateMarkerLayer,[{key:"componentDidMount",value:function componentDidMount(){this.setState({_markersElement:[]});}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.viewModel&&!lodash_isequal_default()(prevProps.features,this.props.features)){this.setState({_markersElement:[]});this._getMarkerElement();this.props.features&&this.viewModel.setFeatures(this.props.features,this.state._markersElement);}if(this.viewModel&&!lodash_isequal_default()(prevProps.type,this.props.type)){this.setState({_markersElement:[]});this._getMarkerElement();this.viewModel.setType(this.state._markersElement);}if(this.viewModel&&this.props.width&&prevProps.width!==this.props.width){this.state.marker&&this.state.marker.setMarkersWidth(this.props.width);}if(this.viewModel&&this.props.height&&prevProps.height!==this.props.height){this.state.marker&&this.state.marker.setMarkersHeight&&this.state.marker.setMarkersHeight(this.props.height);}if(this.viewModel&&this.props.textColor&&prevProps.textColor!==this.props.textColor){this.state.marker&&this.state.marker.setMarkersTextColor(this.props.textColor);}if(this.viewModel&&this.props.textFontSize&&prevProps.textFontSize!==this.props.textFontSize){this.state.marker&&this.state.marker.setMarkersTextFontSize(this.props.textFontSize);}if(this.viewModel&&this.props.colors&&this.props.colors.length&&this.props.colors.length>0&&!lodash_isequal_default()(prevProps.colors,this.props.colors)){this.state.marker&&this.state.marker.setMarkersTextFontSize(this.props.textFontSize);}if(this.viewModel&&this.props.textField&&prevProps.textField!==this.props.textField){this.state.marker&&this.state.marker.setMarkersTextField(this.props.textField);}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.viewModel&&this.viewModel.clearMarkerLayer();}},{key:"loaded",value:function loaded(map){this.props.features&&this._getMarkerElement();this.viewModel=new AnimateMarkerLayerViewModel_AnimateMarkerLayerViewModel(map,this.props.features,this.state._markersElement,this.props.fitBounds);}},{key:"_getMarkerElement",value:function _getMarkerElement(){this.setState({marker:null});var _this$props=this.props,features=_this$props.features,width=_this$props.width,height=_this$props.height,colors=_this$props.colors,textFontSize=_this$props.textFontSize,textColor=_this$props.textColor,textField=_this$props.textField,type=_this$props.type;if(!features||JSON.stringify(features)==='{}'||!features.features){this.viewModel&&this.viewModel.clearMarkerLayer();return;}switch(type){case'rotatingAperture':this.setState({marker:new RotatingApertureMarker_RotatingApertureMarker(features,{width:width,colors:colors,textField:textField,textColor:textColor,textFontSize:textFontSize})});break;case'haloRing':this.setState({marker:new HaloRingMarker_HaloRingMarker(features,{width:width,colors:colors,textField:textField,textColor:textColor,textFontSize:textFontSize})});break;case'breathingAperture':this.setState({marker:new BreathingApertureMarker_BreathingApertureMarker(features,{width:width,colors:colors,textField:textField,textColor:textColor,textFontSize:textFontSize})});break;case'diffusedAperture':this.setState({marker:new DiffusedApertureMarker_DiffusedApertureMarker(features,{width:width,colors:colors,textField:textField,textColor:textColor,textFontSize:textFontSize})});break;case'rotatingTextBorder':this.setState({marker:new RotatingTextBorderMarker_RotatingTextBorderMarker(features,{width:width,height:height,colors:colors,textField:textField,textColor:textColor,textFontSize:textFontSize})});break;case'fluorescence':this.setState({marker:new FluorescenceMarker_FluorescenceMarker(features,{width:width,colors:colors,textField:textField,textColor:textColor,textFontSize:textFontSize})});break;}if(this.state.marker){this.setState({_markersElement:this.state.marker.getMarkersElement()});}}},{key:"render",value:function render(){return null;}}]);return AnimateMarkerLayer;}(external_root_React_commonjs_React_commonjs2_React_amd_React_["Component"]),AnimateMarkerLayer_class2.defaultProps={type:'breathingAperture',textFontSize:14},AnimateMarkerLayer_temp))||AnimateMarkerLayer_class;
+var AnimateMarkerLayer_class,AnimateMarkerLayer_class2,AnimateMarkerLayer_temp;var AnimateMarkerLayer_AnimateMarkerLayer=mapGetter(AnimateMarkerLayer_class=(AnimateMarkerLayer_temp=AnimateMarkerLayer_class2=/*#__PURE__*/function(_Component){_inherits(AnimateMarkerLayer,_Component);function AnimateMarkerLayer(){var _getPrototypeOf2;var _this;_classCallCheck(this,AnimateMarkerLayer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(AnimateMarkerLayer)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.viewModel=void 0;_this.map=void 0;_this.marker=void 0;_this._markersElement=void 0;return _this;}_createClass(AnimateMarkerLayer,[{key:"componentDidMount",value:function componentDidMount(){this._markersElement=[];}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.viewModel&&!lodash_isequal_default()(prevProps.features,this.props.features)){this._markersElement=[];this._getMarkerElement();this.props.features&&this.viewModel.setFeatures(this.props.features,this._markersElement);}if(this.viewModel&&!lodash_isequal_default()(prevProps.type,this.props.type)){this._markersElement=[];this._getMarkerElement();this.viewModel.setType(this._markersElement);}if(this.viewModel&&this.props.width&&prevProps.width!==this.props.width){this.marker&&this.marker.setMarkersWidth(this.props.width);}if(this.viewModel&&this.props.height&&prevProps.height!==this.props.height){this.marker&&this.marker.setMarkersHeight&&this.marker.setMarkersHeight(this.props.height);}if(this.viewModel&&this.props.textColor&&prevProps.textColor!==this.props.textColor){this.marker&&this.marker.setMarkersTextColor(this.props.textColor);}if(this.viewModel&&this.props.textFontSize&&prevProps.textFontSize!==this.props.textFontSize){this.marker&&this.marker.setMarkersTextFontSize(this.props.textFontSize);}if(this.viewModel&&this.props.colors&&this.props.colors.length&&this.props.colors.length>0&&!lodash_isequal_default()(prevProps.colors,this.props.colors)){this.marker&&this.marker.setMarkersTextFontSize(this.props.textFontSize);}if(this.viewModel&&this.props.textField&&prevProps.textField!==this.props.textField){this.marker&&this.marker.setMarkersTextField(this.props.textField);}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.viewModel&&this.viewModel.clearMarkerLayer();}},{key:"loaded",value:function loaded(map){this.props.features&&this._getMarkerElement();this.viewModel=new AnimateMarkerLayerViewModel_AnimateMarkerLayerViewModel(map,this.props.features,this._markersElement,this.props.fitBounds);}},{key:"_getMarkerElement",value:function _getMarkerElement(){this.setState({marker:null});var _this$props=this.props,features=_this$props.features,width=_this$props.width,height=_this$props.height,colors=_this$props.colors,textFontSize=_this$props.textFontSize,textColor=_this$props.textColor,textField=_this$props.textField,type=_this$props.type;if(!features||JSON.stringify(features)==='{}'||!features.features){this.viewModel&&this.viewModel.clearMarkerLayer();return;}switch(type){case'rotatingAperture':this.marker=new RotatingApertureMarker_RotatingApertureMarker(features,{width:width,colors:colors,textField:textField,textColor:textColor,textFontSize:textFontSize});break;case'haloRing':this.marker=new HaloRingMarker_HaloRingMarker(features,{width:width,colors:colors,textField:textField,textColor:textColor,textFontSize:textFontSize});break;case'breathingAperture':this.marker=new BreathingApertureMarker_BreathingApertureMarker(features,{width:width,colors:colors,textField:textField,textColor:textColor,textFontSize:textFontSize});break;case'diffusedAperture':this.marker=new DiffusedApertureMarker_DiffusedApertureMarker(features,{width:width,colors:colors,textField:textField,textColor:textColor,textFontSize:textFontSize});break;case'rotatingTextBorder':this.marker=new RotatingTextBorderMarker_RotatingTextBorderMarker(features,{width:width,height:height,colors:colors,textField:textField,textColor:textColor,textFontSize:textFontSize});break;case'fluorescence':this.marker=new FluorescenceMarker_FluorescenceMarker(features,{width:width,colors:colors,textField:textField,textColor:textColor,textFontSize:textFontSize});break;}this.marker&&(this._markersElement=this.marker.getMarkersElement());}},{key:"render",value:function render(){return null;}}]);return AnimateMarkerLayer;}(external_root_React_commonjs_React_commonjs2_React_amd_React_["Component"]),AnimateMarkerLayer_class2.defaultProps={type:'breathingAperture',textFontSize:14},AnimateMarkerLayer_temp))||AnimateMarkerLayer_class;
 // CONCATENATED MODULE: ./src/mapboxgl/components.tsx
 // layers
 

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

@@ -98,8 +98,8 @@
 .sm-component-animate-marker__dot-point {
   background: #009fd9;
   position: absolute;
-  left: -5px;
-  top: -5px;
+  left: -3px;
+  top: -3px;
   width: 10px;
   height: 10px;
   border-radius: 50%;