ry-vue-map 0.2.0 → 0.2.2

package/src/utils/lMapServices.js

@@ -1,944 +1,967 @@
-
 import 'ol/ol.css';
 import {
-  AM,
-  BingMapsServices,
-  BingMapsServiceNew,
-  CheckPoint,
-  DraftingEvent,
-  SvgModel,
-  geo2svg,
-  GPS,
-  GrahamScan,
-  LMap,
-  MapConfig,
-  formatArea,
-  formatLength,
-  createSpan,
-  getVector,
-  addInteraction,
-  addInteraction1,
-  getCoordinates,
-  createGeoJson,
-  getLngAndLatMaxMin,
-  rayCasting,
-  createPolygonGeojson,
-  zoomIn,
-  zoomOut,
-  getCenterPoint,
-  createGPSPoints,
-  createPolylinePoints,
-  fitNew,
-  createRectangle,
-  getColorStyle,
-  createFill,
-  polygonStyle,
-  getLayer,
-  getLayerNew,
-  flyTo,
-  tour,
-  PolygonModel,
-  createPolygonBoundary,
-  caculateLL,
-  LMarker,
-  LModifyEvent,
-  LOverlay,
-  Polyline,
-  addPolylinePoint,
-  addPolylinePointNew,
-  getDeepColorNew,
-  LPolygonNew,
-  Circular,
-  LCluster,
-  HelpTooltip,
-  pathToLines,
-  isTruePolygon,
-  CrossHair,
-  LDraw,
-  FeaturePolygon,
-  FeaturePolygonModel,
-  LMarkerFont,
-  LMessage,
-  LPolygon,
-  calculateCenter,
-  MeasureTooltip,
-  staticImage,
-  TMapOptions,
-  LCircle,
-  ViewOptions,
-  MapTypeEnum,
-  MapLayersEnum,
-  BingLayers,
-  BDLayers,
-  LRectangle,
-  VectorMap
+	AM,
+	BingMapsServices,
+	BingMapsServiceNew,
+	CheckPoint,
+	DraftingEvent,
+	SvgModel,
+	geo2svg,
+	GPS,
+	GrahamScan,
+	LMap,
+	MapConfig,
+	formatArea,
+	formatLength,
+	createSpan,
+	getVector,
+	addInteraction,
+	addInteraction1,
+	getCoordinates,
+	createGeoJson,
+	getLngAndLatMaxMin,
+	rayCasting,
+	createPolygonGeojson,
+	zoomIn,
+	zoomOut,
+	getCenterPoint,
+	createGPSPoints,
+	createPolylinePoints,
+	fitNew,
+	createRectangle,
+	getColorStyle,
+	createFill,
+	polygonStyle,
+	getLayer,
+	getLayerNew,
+	flyTo,
+	tour,
+	PolygonModel,
+	createPolygonBoundary,
+	caculateLL,
+	LMarker,
+	LModifyEvent,
+	LOverlay,
+	Polyline,
+	addPolylinePoint,
+	addPolylinePointNew,
+	getDeepColorNew,
+	LPolygonNew,
+	Circular,
+	LCluster,
+	HelpTooltip,
+	pathToLines,
+	isTruePolygon,
+	CrossHair,
+	LDraw,
+	FeaturePolygon,
+	FeaturePolygonModel,
+	LMarkerFont,
+	LMessage,
+	LPolygon,
+	calculateCenter,
+	MeasureTooltip,
+	staticImage,
+	TMapOptions,
+	LCircle,
+	ViewOptions,
+	MapTypeEnum,
+	MapLayersEnum,
+	BingLayers,
+	BDLayers,
+	LRectangle,
+	VectorMap
 } from 'ry-map';
 
+import {
+	defaults as interactionDefaults
+} from 'ol/interaction';
+
 export default class LMapServices {
-  constructor() {
-    this.map = null;
-    this._lPolygon = null;
-    this._measureTooltip = null;
-    this.currentLayer = [false, false, true];
-    this.polygonGeojsonArr = [];
-    this.polygonGeojson = null;
-    this.lModifyEventArr = [];
-    this.lmap = null;
-    this.lMEvent = null;
-    this.am = new AM();
-    this.type = 2;
-    this.lPolygonNewArr = new Array();
-    this.polygonGeojsonMap = new Map();
-    this.drawPolygonArr = new Set();
-    this.drawLineArr = new Set();
-	this._lRectangle=null;
-	this.layers=null;
-  }
-  init(optins) {
-    const {
-      el,
-      type,
-      callback,
-      viewOptions,
-      layerType,
-      mapType
-    } = optins;
-
-    this.initMap({
-      el,
-      callback,
-      viewOptions,
-      type,
-      layerType
-    });
-  }
-  initMap({
-    el,
-    callback,
-    type,
-    viewOptions,
-    layerType
-  }) {
-    if (!this.lmap) {
-
-      this.lmap = new LMap({
-        controls: MapConfig.Defaults,
-      });
-    }
-
-    setTimeout(() => {
-      const _async = async () => {
-        if (this.map) {
-          this.map = null;
-        }
-        const {map,layers} = await this.lmap.onLoad(el,type, layerType);
-	    this.map=map;
-	    this.layers=layers;
-        MapConfig.View = viewOptions;
-        this.map.setView(MapConfig.View);
-        if (callback) {
-          callback(this.map,layers);
-        }
-      };
-      _async();
-    }, 100);
-  }
-   get getMapTypeLength() {
-    return this.lmap.getMapTypeLength;
-  }
-  get getLayeTypeLength() {
-    return this.lmap.getLayeTypeLength;
-  }
-  selectMapLayer(mapType, layerType) {
-    if (!this.lmap) return 0;
-    return this.lmap.selectLayers(mapType, layerType);
-  }
-  initBingMap(el, callback, viewOptions) {
-    // this.clear();
-    if (!this.lmap) {
-      this.lmap = new LMap({
-        controls: MapConfig.Defaults,
-      });
-    }
-
-    setTimeout(() => {
-      const _async = async () => {
-        if (this.map) {
-          this.map = null;
-        }
-		const {map,layers} = await this.lmap.onLoad(el, 2, 2);
-		this.map=map;
-		this.layers=layers;
-        MapConfig.View = viewOptions;
-        this.map.setView(MapConfig.View);
-        if (callback) {
-          callback(this.map,layers);
-        }
-      };
-      _async();
-    }, 100);
-  }
-
-  initBingMapNew(el, callback, viewOptions) {
-
-    if (!this.lmap) {
-      this.lmap = new LMap({
-        controls: MapConfig.Defaults,
-      });
-    }
-
-    setTimeout(() => {
-      const _async = async () => {
-        if (this.map) {
-          this.map = null;
-        }		
-        const {map,layers} = await this.lmap.onLoad(el, 0, 2);
-		this.map=map;
-		this.layers=layers;
-        MapConfig.View = viewOptions;
-        this.map.setView(MapConfig.View);
-        if (callback) {
-          callback(this.map,layers);
-        }
-      };
-      _async();
-    }, 100);
-
-    // if (!this.lmap) {
-    //   this.lmap = new   LMap({
-    //     controls: MapConfig.Defaults,
-    //   });
-    // }
-
-    // setTimeout(() => {
-    //   const _async = async () => {
-    //     if (this.map) {
-    //       this.map = null;
-    //     }
-    //     this.map = await this.lmap.onLoad(el,3,1);
-    //     MapConfig.View = viewOptions;
-    //     this.map.setView(MapConfig.View);
-    //     if (callback) {
-    //       callback(this.map);
-    //     }
-    //   };
-    //   _async();
-    // }, 100);
-  }
-
- async initVectorMap(opt) {
- 	  const {el,isAnalysisBBOX,isAnalysisCenter,callback,delaytime,isDrag} = opt;
- 	  const vmap = new  VectorMap({
- 	    isAnalysisBBOX,
- 	    isAnalysisCenter,
-		isDrag,
- 	    callback:r=> {
- 	        if(callback){
- 				callback(r);
- 			}
- 	    }
- 	  });
- 	  
- 	  return new  Promise(r=> {
- 		  setTimeout(async ()=> {
- 			  const map = await  vmap.onLoad(el);
- 			  r({map,vmap});
- 		  },delaytime ? delaytime:100);
- 	  });
- 	  
- }
-
-  getVectorLayerView() {
-    return MapConfig.getVectorLayerView;
-  }
-
-  onSetLayers(type) {
-    this.type = type;
-    this.currentLayer = this.currentLayer.map((r) => (r = false));
-    this.currentLayer[type] = true;
-    this.removeLayers(type);
-    this.addLayers(type);
-  }
-
-  removeLayers(type) {
-    MapConfig.TMapLayerArr[type].forEach((val, key) => {
-      this.map.removeLayer(val);
-    });
-  }
-
-  addLayers(type) {
-    MapConfig.TMapLayerArr[type].forEach((val, key) => {
-      this.map.addLayer(val);
-    });
-  }
-
-  onCreatePolygon(callback,type) {
-    if (this.polygonGeojson) {
-      this.map.removeLayer(this.polygonGeojson);
-    }
-    if (this._lPolygon) {
-      this.clearlPolygon();
-      // this._removeMeasureTooltip();
-    }
-    const _this = this;
-    this._lPolygon = new LPolygon(this.map, {
-      strokeColor: 'rgba(255,201,14, 1)',
-      fillColor: 'rgba(255,201,14, 0.4)',
-      type
-    });
-    return this._lPolygon;
-    // if (callback) {
-    //   callback();
-    // }
-  }
-	
-	skipCurrentDraw(){
-		  if (this._lPolygon) {
-						this._lPolygon.skipCurrentDraw();
+	constructor() {
+		this.map = null;
+		this._lPolygon = null;
+		this._measureTooltip = null;
+		this.currentLayer = [false, false, true];
+		this.polygonGeojsonArr = [];
+		this.polygonGeojson = null;
+		this.lModifyEventArr = [];
+		this.lmap = null;
+		this.lMEvent = null;
+		this.am = new AM();
+		this.type = 2;
+		this.lPolygonNewArr = new Array();
+		this.polygonGeojsonMap = new Map();
+		this.drawPolygonArr = new Set();
+		this.drawLineArr = new Set();
+		this._lRectangle = null;
+		this.layers = null;
+	}
+	init(optins) {
+		const {
+			el,
+			type,
+			callback,
+			viewOptions,
+			layerType,
+			mapType
+		} = optins;
+
+		this.initMap({
+			el,
+			callback,
+			viewOptions,
+			type,
+			layerType
+		});
+	}
+	initMap({
+		el,
+		callback,
+		type,
+		viewOptions,
+		layerType
+	}) {
+		if (!this.lmap) {
+			this.lmap = new LMap({
+				controls: MapConfig.Defaults,
+				interactions: interactionDefaults({
+					pinchRotate: false,
+				})
+			});
+		}
+		setTimeout(() => {
+			const _async = async () => {
+				if (this.map) {
+					this.map = null;
+				}
+				const {
+					map,
+					layers
+				} = await this.lmap.onLoad(el, type, layerType);
+				this.map = map;
+				this.layers = layers;
+				MapConfig.View = viewOptions;
+				this.map.setView(MapConfig.View);
+				if (callback) {
+					callback(this.map, layers);
+				}
+			};
+			_async();
+		}, 100);
+	}
+	get getMapTypeLength() {
+		return this.lmap.getMapTypeLength;
+	}
+	get getLayeTypeLength() {
+		return this.lmap.getLayeTypeLength;
+	}
+	selectMapLayer(mapType, layerType) {
+		if (!this.lmap) return 0;
+		return this.lmap.selectLayers(mapType, layerType);
+	}
+	initBingMap(el, callback, viewOptions) {
+		// this.clear();
+		if (!this.lmap) {
+			this.lmap = new LMap({
+				controls: MapConfig.Defaults,
+			});
+		}
+
+		setTimeout(() => {
+			const _async = async () => {
+				if (this.map) {
+					this.map = null;
+				}
+				const {
+					map,
+					layers
+				} = await this.lmap.onLoad(el, 2, 2);
+				this.map = map;
+				this.layers = layers;
+				MapConfig.View = viewOptions;
+				this.map.setView(MapConfig.View);
+				if (callback) {
+					callback(this.map, layers);
+				}
+			};
+			_async();
+		}, 100);
+	}
+
+	initBingMapNew(el, callback, viewOptions) {
+
+		if (!this.lmap) {
+			this.lmap = new LMap({
+				controls: MapConfig.Defaults,
+			});
+		}
+
+		setTimeout(() => {
+			const _async = async () => {
+				if (this.map) {
+					this.map = null;
+				}
+				const {
+					map,
+					layers
+				} = await this.lmap.onLoad(el, 0, 2);
+				this.map = map;
+				this.layers = layers;
+				MapConfig.View = viewOptions;
+				this.map.setView(MapConfig.View);
+				if (callback) {
+					callback(this.map, layers);
+				}
+			};
+			_async();
+		}, 100);
+
+		// if (!this.lmap) {
+		//   this.lmap = new   LMap({
+		//     controls: MapConfig.Defaults,
+		//   });
+		// }
+
+		// setTimeout(() => {
+		//   const _async = async () => {
+		//     if (this.map) {
+		//       this.map = null;
+		//     }
+		//     this.map = await this.lmap.onLoad(el,3,1);
+		//     MapConfig.View = viewOptions;
+		//     this.map.setView(MapConfig.View);
+		//     if (callback) {
+		//       callback(this.map);
+		//     }
+		//   };
+		//   _async();
+		// }, 100);
+	}
+
+	async initVectorMap(opt) {
+		const {
+			el,
+			isAnalysisBBOX,
+			isAnalysisCenter,
+			callback,
+			delaytime,
+			isDrag
+		} = opt;
+		const vmap = new VectorMap({
+			isAnalysisBBOX,
+			isAnalysisCenter,
+			isDrag,
+			callback: r => {
+				if (callback) {
+					callback(r);
+				}
+			}
+		});
+
+		return new Promise(r => {
+			setTimeout(async () => {
+				const map = await vmap.onLoad(el);
+				r({
+					map,
+					vmap
+				});
+			}, delaytime ? delaytime : 100);
+		});
+
+	}
+
+	getVectorLayerView() {
+		return MapConfig.getVectorLayerView;
+	}
+
+	onSetLayers(type) {
+		this.type = type;
+		this.currentLayer = this.currentLayer.map((r) => (r = false));
+		this.currentLayer[type] = true;
+		this.removeLayers(type);
+		this.addLayers(type);
+	}
+
+	removeLayers(type) {
+		MapConfig.TMapLayerArr[type].forEach((val, key) => {
+			this.map.removeLayer(val);
+		});
+	}
+
+	addLayers(type) {
+		MapConfig.TMapLayerArr[type].forEach((val, key) => {
+			this.map.addLayer(val);
+		});
+	}
+
+	onCreatePolygon(callback, type) {
+		if (this.polygonGeojson) {
+			this.map.removeLayer(this.polygonGeojson);
+		}
+		if (this._lPolygon) {
+			this.clearlPolygon();
+			// this._removeMeasureTooltip();
+		}
+		const _this = this;
+		this._lPolygon = new LPolygon(this.map, {
+			strokeColor: 'rgba(255,201,14, 1)',
+			fillColor: 'rgba(255,201,14, 0.4)',
+			type
+		});
+		return this._lPolygon;
+		// if (callback) {
+		//   callback();
+		// }
+	}
+
+	skipCurrentDraw() {
+		if (this._lPolygon) {
+			this._lPolygon.skipCurrentDraw();
+		}
+	}
+
+	onCancel() {
+		if (this._lPolygon) {
+			this._lPolygon.removeLastPoint();
+		}
+	}
+
+	onDelete(callback) {
+		if (this._lPolygon) {
+			this._lPolygon.remove();
+			this._lPolygon = null;
+			this._removeMeasureTooltip();
+			if (callback) {
+				callback();
+			}
+		} else {}
+	}
+
+	getGeoJson() {
+		if (this._lPolygon) {
+			const [x, y] = this._lPolygon.getCenterPoint();
+			const geojson = createGeoJson(this._lPolygon.getCoordinates(), {
+				ruleId: '',
+				centerlon: x,
+				centerlat: y
+			});
+			return geojson;
+		}
+		return null;
+	}
+
+	getGeoJsonNew(index) {
+		if (this.polygonGeojson) {
+			const polygon = this.polygonGeojson;
+			const geojson = createGeoJson(
+				polygon.getSource().getFeatures()[0].getGeometry().getCoordinates(), {
+					ruleId: '',
+					centerlon: 0,
+					centerlat: 0
+				}
+			);
+			return geojson;
+		}
+		return null;
+	}
+
+	getPolygonGeoJson() {
+		if (!this._lPolygon) return null;
+		return this._lPolygon.getGeoJson();
+	}
+
+	onCreateLine() {
+		if (this.map) {
+			let drawLine = new LDraw(
+				'LineString',
+				(e) => {
+					// let arrs = e.feature.getGeometry().getCoordinates();
+					// let tooltipCoord = e.coordinate;
+					// const obj = {
+					//   pointArr: arrs,
+					//   color: '#000',
+					//   width: 2
+					// };
+					// new Polyline(obj, this.map);
+				},
+				this.map
+			);
+			this.drawLineArr.add(drawLine);
+		}
+	}
+
+	onCreateArea() {
+		if (this.map) {
+			this.drawPolygonArr.add(new LDraw('Polygon', (e) => {}, this.map));
+		}
+	}
+
+	removeDrawArr() {
+
+		this.drawLineArr.forEach(val => {
+			if (val) {
+				try {
+					val.clear();
+				} catch (err) {
+
+				}
+			}
+		});
+
+		this.drawLineArr.clear();
+
+		this.drawPolygonArr.forEach(val => {
+			if (val) {
+				try {
+					val.clear();
+				} catch (err) {
+
+				}
+			}
+		});
+
+		this.drawPolygonArr.clear();
+	}
+
+
+	clearlPolygon() {
+		if (this.map && this._lPolygon) {
+			this._lPolygon.remove();
+			this._lPolygon = null;
+		}
+	}
+
+	_createMeasureTooltip() {
+		const marker = new MeasureTooltip();
+		marker.setOffset([0, -30]);
+		this._measureTooltip = marker;
+		return marker;
+	}
+
+	_removeMeasureTooltip() {
+		if (this.map) {
+			if (this._measureTooltip) {
+				this.map.removeOverlay(this._measureTooltip.getMarker());
 			}
+		}
+	}
+
+	createPolygonGeojson(
+		geoJsonObj,
+		fillColor = 'rgba(255, 255, 255, 0.3)',
+		stroke = 'rgba(00, 131, 241, 1)',
+		id,
+		isSetId = false,
+		lineDash = []
+	) {
+		if (this.map) {
+			const polygonGeojson = createPolygonGeojson(
+				geoJsonObj,
+				fillColor,
+				stroke,
+				id,
+				isSetId,
+				lineDash
+			);
+			this.polygonGeojsonArr.push(polygonGeojson);
+			this.polygonGeojson = null;
+			this.map.addLayer(polygonGeojson);
+		}
+	}
+
+	createPolygonGeojsonNew(
+		geoJsonObj,
+		fillColor = 'rgba(255, 255, 255, 0.3)',
+		stroke = 'rgba(00, 131, 241, 1)',
+		id,
+		isSetId = false
+	) {
+		if (this.polygonGeojson) {
+			this.polygonGeojson = null;
+		}
+		if (this.map) {
+			const polygonGeojson = createPolygonGeojson(
+				geoJsonObj,
+				fillColor,
+				stroke,
+				id,
+				isSetId
+			);
+			// this.polygonGeojsonArr.push(polygonGeojson);
+			this.polygonGeojson = polygonGeojson;
+			this.map.addLayer(polygonGeojson);
+		}
+	}
+
+	removePolygonGeojsons() {
+		if (!this.polygonGeojsonArr.length) {
+			return;
+		}
+		let item = null;
+		while ((item = this.polygonGeojsonArr.shift())) {
+			this.map.removeLayer(item);
+			item = null;
+		}
+	}
+
+	removePolygonGeojsonNew() {
+		if (!this.polygonGeojson) {
+			return;
+		}
+		this.map.removeLayer(this.polygonGeojson);
+		this.polygonGeojson = null;
+	}
+
+	clear() {
+		if (!this.map) {
+			return;
+		}
+		if (this.am) {
+			this.am = null;
+			this.am = new AM();
+		}
+		this.removeOverlays();
+		this.removeLModifyEventArr();
+		this.removePolygonGeojsons();
+		this.clearlPolygon();
+		this.removeLModifyEvent();
+		this.removePolygonGeojsonNew();
+		this.removeMapsLayers();
+	}
+	clearNew() {
+		this.removeOverlays();
+		this.removeLModifyEventArr();
+		this.removePolygonGeojsons();
+		this.clearlPolygon();
+		this.removeLModifyEvent();
+		this.removePolygonGeojsonNew();
+	}
+
+	getMap() {
+		return this.map;
+	}
+
+	setCenter([x, y], zoom) {
+		if (!this.map) {
+			return;
+		}
+		const view = this.map.getView();
+		view.setCenter([x, y]);
+		if (zoom > 0) {
+			view.setZoom(zoom);
+		}
+	}
+
+	setZoom(zoom) {
+		if (!this.map) {
+			return;
+		}
+		const view = this.map.getView();
+		view.setZoom(zoom);
 	}
 
-  onCancel() {
-    if (this._lPolygon) {
-      this._lPolygon.removeLastPoint();
-    }
-  }
-
-  onDelete(callback) {
-    if (this._lPolygon) {
-      this._lPolygon.remove();
-      this._lPolygon = null;
-      this._removeMeasureTooltip();
-      if (callback) {
-        callback();
-      }
-    } else {}
-  }
-
-  getGeoJson() {
-    if (this._lPolygon) {
-      const [x, y] = this._lPolygon.getCenterPoint();
-      const geojson = createGeoJson(this._lPolygon.getCoordinates(), {
-        ruleId: '',
-        centerlon: x,
-        centerlat: y
-      });
-      return geojson;
-    }
-    return null;
-  }
-
-  getGeoJsonNew(index) {
-    if (this.polygonGeojson) {
-      const polygon = this.polygonGeojson;
-      const geojson = createGeoJson(
-        polygon.getSource().getFeatures()[0].getGeometry().getCoordinates(), {
-          ruleId: '',
-          centerlon: 0,
-          centerlat: 0
-        }
-      );
-      return geojson;
-    }
-    return null;
-  }
-
-  getPolygonGeoJson() {
-    if (!this._lPolygon) return null;
-    return this._lPolygon.getGeoJson();
-  }
-
-  onCreateLine() {
-    if (this.map) {
-      let drawLine = new LDraw(
-        'LineString',
-        (e) => {
-          // let arrs = e.feature.getGeometry().getCoordinates();
-          // let tooltipCoord = e.coordinate;
-          // const obj = {
-          //   pointArr: arrs,
-          //   color: '#000',
-          //   width: 2
-          // };
-          // new Polyline(obj, this.map);
-        },
-        this.map
-      );
-      this.drawLineArr.add(drawLine);
-    }
-  }
-
-  onCreateArea() {
-    if (this.map) {
-      this.drawPolygonArr.add(new LDraw('Polygon', (e) => {}, this.map));
-    }
-  }
-
-  removeDrawArr(){
-
-     this.drawLineArr.forEach(val =>　{
-           if(val){
-             try{
-                val.clear();
-             }catch(err){
-
-             }
-           }
-     });
-
-     this.drawLineArr.clear();
-
-     this.drawPolygonArr.forEach(val =>　{
-           if(val){
-             try{
-                val.clear();
-             }catch(err){
-
-             }
-           }
-     });
-
-     this.drawPolygonArr.clear();
-  }
-
-
-  clearlPolygon() {
-    if (this.map && this._lPolygon) {
-      this._lPolygon.remove();
-      this._lPolygon = null;
-    }
-  }
-
-  _createMeasureTooltip() {
-    const marker = new MeasureTooltip();
-    marker.setOffset([0, -30]);
-    this._measureTooltip = marker;
-    return marker;
-  }
-
-  _removeMeasureTooltip() {
-    if (this.map) {
-      if (this._measureTooltip) {
-        this.map.removeOverlay(this._measureTooltip.getMarker());
-      }
-    }
-  }
-
-  createPolygonGeojson(
-    geoJsonObj,
-    fillColor = 'rgba(255, 255, 255, 0.3)',
-    stroke = 'rgba(00, 131, 241, 1)',
-    id,
-    isSetId = false,
-    lineDash = []
-  ) {
-    if (this.map) {
-      const polygonGeojson = createPolygonGeojson(
-        geoJsonObj,
-        fillColor,
-        stroke,
-        id,
-        isSetId,
-        lineDash
-      );
-      this.polygonGeojsonArr.push(polygonGeojson);
-      this.polygonGeojson = null;
-      this.map.addLayer(polygonGeojson);
-    }
-  }
-
-  createPolygonGeojsonNew(
-    geoJsonObj,
-    fillColor = 'rgba(255, 255, 255, 0.3)',
-    stroke = 'rgba(00, 131, 241, 1)',
-    id,
-    isSetId = false
-  ) {
-    if (this.polygonGeojson) {
-      this.polygonGeojson = null;
-    }
-    if (this.map) {
-      const polygonGeojson = createPolygonGeojson(
-        geoJsonObj,
-        fillColor,
-        stroke,
-        id,
-        isSetId
-      );
-      // this.polygonGeojsonArr.push(polygonGeojson);
-      this.polygonGeojson = polygonGeojson;
-      this.map.addLayer(polygonGeojson);
-    }
-  }
-
-  removePolygonGeojsons() {
-    if (!this.polygonGeojsonArr.length) {
-      return;
-    }
-    let item = null;
-    while ((item = this.polygonGeojsonArr.shift())) {
-      this.map.removeLayer(item);
-      item = null;
-    }
-  }
-
-  removePolygonGeojsonNew() {
-    if (!this.polygonGeojson) {
-      return;
-    }
-    this.map.removeLayer(this.polygonGeojson);
-    this.polygonGeojson = null;
-  }
-
-  clear() {
-    if (!this.map) {
-      return;
-    }
-    if (this.am) {
-      this.am = null;
-      this.am = new AM();
-    }
-    this.removeOverlays();
-    this.removeLModifyEventArr();
-    this.removePolygonGeojsons();
-    this.clearlPolygon();
-    this.removeLModifyEvent();
-    this.removePolygonGeojsonNew();
-    this.removeMapsLayers();
-  }
-  clearNew() {
-    this.removeOverlays();
-    this.removeLModifyEventArr();
-    this.removePolygonGeojsons();
-    this.clearlPolygon();
-    this.removeLModifyEvent();
-    this.removePolygonGeojsonNew();
-  }
-
-  getMap() {
-    return this.map;
-  }
-
-  setCenter([x, y], zoom) {
-    if (!this.map) {
-      return;
-    }
-    const view = this.map.getView();
-    view.setCenter([x, y]);
-    if(zoom > 0){
-         view.setZoom(zoom);
-    }
-  }
-
-  setZoom(zoom) {
-    if (!this.map) {
-      return;
-    }
-    const view = this.map.getView();
-    view.setZoom(zoom);
-  }
-	
-	setMaxZoom(zoom){
+	setMaxZoom(zoom) {
 		if (!this.map) {
-		  return;
+			return;
 		}
 		const view = this.map.getView();
 		view.setMaxZoom(zoom)
 	}
-	setMinZoom(){
+	setMinZoom() {
 		if (!this.map) {
-		  return;
+			return;
 		}
 		const view = this.map.getView();
 		view.setMinZoom(zoom)
 	}
-	
-  get getZoom() {
-    if (!this.map) {
-      return 0;
-    }
-    const view = this.map.getView();
-    return view.getZoom();
-  }
-  getCenter() {
-    if (!this.map) {
-      return;
-    }
-    const view = this.map.getView();
-    let [x, y] = view.getCenter();
-    return [x, y];
-  }
-
-  fit(coordinates) {
-    fitNew(this.map, coordinates);
-  }
-
-  createMarker(imgSrc, width = 15, height = 15) {
-    return new LMarker(imgSrc, width, height);
-  }
-
-  removeMarker(marker) {
-    this.map.removeOverlay(marker.getMarker());
-  }
-
-  lModifyEventArr() {
-    this.lModifyEventArr.length = 0;
-    this.polygonGeojsonArr.forEach((item, key) => {
-      const lMEvent = new LModifyEvent(item, this.map);
-      lMEvent.setActive();
-      this.lModifyEventArr.push(lMEvent);
-    });
-  }
-
-  removeLModifyEventArr() {
-    if (!this.lModifyEventArr.length) {
-      return;
-    }
-    let item = null;
-    while ((item = this.lModifyEventArr.shift())) {
-      item.setActive(false);
-      item.remove();
-      item = null;
-    }
-  }
-
-  lModifyEvent() {
-    if (this.map && this.polygonGeojson) {
-      const lMEvent = new LModifyEvent(this.polygonGeojson, this.map);
-      lMEvent.setActive();
-      this.lMEvent = lMEvent;
-    }
-  }
-
-  removeLModifyEvent() {
-    if (!this.lMEvent) {
-      return;
-    }
-    this.lMEvent.setActive(false);
-    this.lMEvent.remove();
-  }
-
-  convertWGS84GeoJSONgcj_encrypt(geoJSON) {
-    const {
-      bbox,
-      geometry,
-      properties
-    } = geoJSON;
-    const bboxArr = [];
-    for (let i = 0; i < bbox.length; i += 2) {
-      const {
-        lon,
-        lat
-      } = GPS.gcj_encrypt(bbox[i], bbox[i + 1]);
-      bboxArr.push(lon);
-      bboxArr.push(lat);
-    }
-    geoJSON.bbox = bboxArr;
-    const coordinates = geometry.coordinates;
-    const coordinateArr = new Array();
-
-    for (let i = 0; i < coordinates.length; i++) {
-      coordinateArr.push(coordinates[i]);
-      for (let j = 0; j < coordinates[i].length; j++) {
-        const arr = coordinates[i][j];
-        const {
-          lon,
-          lat
-        } = GPS.gcj_encrypt(arr[0], arr[1]);
-        coordinateArr[i][j] = [lon, lat];
-      }
-    }
-    geometry.coordinates = coordinateArr;
-    if (properties) {
-      if (properties.center) {
-        const [x, y] = properties.center;
-        const [lat, lon] = GPS.gcj_encrypt(x, y);
-        geoJSON.properties.center = [lat, lon];
-      }
-    }
-    return geoJSON;
-  }
-
-  gcj_encryptConvertWGS84GeoJSON(geoJSON) {
-    const {
-      bbox,
-      geometry,
-      properties
-    } = geoJSON;
-    const bboxArr = [];
-    for (let i = 0; i < bbox.length; i += 2) {
-      const {
-        lon,
-        lat
-      } = GPS.gcj_decrypt(bbox[i], bbox[i + 1]);
-      bboxArr.push(lon);
-      bboxArr.push(lat);
-    }
-    geoJSON.bbox = bboxArr;
-    const coordinates = geometry.coordinates;
-    const coordinateArr = new Array();
-    for (let i = 0; i < coordinates.length; i++) {
-      coordinateArr.push(coordinates[i]);
-      for (let j = 0; j < coordinates[i].length; j++) {
-        const arr = coordinates[i][j];
-        const {
-          lon,
-          lat
-        } = GPS.gcj_decrypt(arr[0], arr[1]);
-        coordinateArr[i][j] = [lon, lat];
-      }
-    }
-    geometry.coordinates = coordinateArr;
-    if (properties) {
-      if (properties.center) {
-        const [x, y] = properties.center;
-        const [lat, lon] = GPS.gcj_decrypt(x, y);
-        geoJSON.properties.center = [lat, lon];
-      }
-    }
-    return geoJSON;
-  }
-
-  gcj_encrypt(wgsLon, wgsLat) {
-    return GPS.gcj_encrypt(wgsLon, wgsLat);
-  }
-
-  gcj_decrypt(gcjLon, gcjLat) {
-    return GPS.gcj_decrypt(gcjLon, gcjLat);
-  }
-
-  formatArea() {
-    if (!this._lPolygon) {
-      return 0;
-    }
-    if (!this._lPolygon.getGeometry()) {
-      return 0;
-    }
-    return formatArea(this._lPolygon.getGeometry());
-  }
-
-  formatLength() {
-    if (!this._lPolygon) {
-      return 0;
-    }
-    if (!this._lPolygon.getGeometry()) {
-      return 0;
-    }
-    return formatLength(this._lPolygon.getGeometry());
-  }
-
-  createPolylinePointList(
-    data,
-    isGCJ02Point = false,
-    isFit = true,
-    callback = null,
-    type=0,
-  ) {
-    let polylines = new Array();
-    const polylinePoints = createPolylinePoints(data, isGCJ02Point);
-    polylines = addPolylinePoint(polylinePoints, this.map);
-    const gpsPoints = createGPSPoints(data, isGCJ02Point, this.am);
-    if (gpsPoints != null) {
-      let amGpsArr = this.am.getLngLats();
-      if(type){
-        amGpsArr = this.am.getLngLatGCJ02();
-      }
-       fitNew(this.map, [
-        [amGpsArr[0], amGpsArr[1]],
-        [amGpsArr[2], amGpsArr[3]]
-      ]);
-
-    }
-    return polylines;
-  }
-
-  async setAreaCenterPoint() {
-    let _code = '3301';
-
-    if (window.localStorage.getItem('user')) {
-      const user = JSON.parse(window.localStorage.getItem('user'));
-      _code = user['areaCode'];
-    }
-
-    const {
-      data
-    } = await getAreaCenter(_code);
-    const {
-      areaCode,
-      areaName,
-      centerLongitude,
-      centerLatitude
-    } = data;
-    window.localStorage.setItem('createPointData', JSON.stringify(data));
-  }
-
-  async getAreaCenterPoint(isGCJ02Point = false) {
-    // if (!window.localStorage.getItem('createPointData')) {
-    //   await this.setAreaCenterPoint();
-    // }
-    // const obj = JSON.parse(window.localStorage.getItem('createPointData'));
-    // if (isGCJ02Point) {
-    //   const {
-    //     lon,
-    //     lat
-    //   } = GPS.gcj_encrypt(obj.centerLongitude, obj.centerLatitude);
-    //   obj.centerLongitude = lon;
-    //   obj.centerLatitude = lat;
-    // }
-    return obj;
-  }
-
-  removeAreaCenterPoint() {
-    window.localStorage.removeItem('createPointData');
-  }
-
-  polygonStyle() {
-    return polygonStyle;
-  }
-
-  removeMapsLayers() {
-    const arrs = this.map.getLayers().getArray();
-    for (let i = arrs.length; 0 <= i; i--) {
-      this.map.removeLayer(arrs[i]);
-    }
-  }
-
-  removeOverlays() {
-    if (!this.map) {
-      return;
-    }
-    const arrs = this.map.getOverlays().getArray();
-    for (let i = arrs.length; 0 <= i; i--) {
-      this.map.removeOverlay(arrs[i]);
-    }
-  }
-
-  resetAM() {
-    this.am = null;
-    this.am = new AM();
-  }
-
-  createPolygonBoundary(geoJson, mode) {
-    const polygonBoundary = createPolygonBoundary(geoJson, mode);
-    this.polygonGeojsonArr.push(polygonBoundary);
-    this.map.addLayer(polygonBoundary);
-  }
-
-  createPolylinePointListNew(
-    data,
-    optins,
-    optins2 = {
-      isGCJ02Point: false,
-      isFit: false
-    }
-  ) {
-    let polylines = new Array();
-    const polylinePoints = createPolylinePoints(data, false);
-    polylines = addPolylinePointNew(polylinePoints, this.map, optins);
-    const gpsPoints = createGPSPoints(data, false, this.am);
-    
-    if (gpsPoints != null && optins2.isFit) {
-      let amGpsArr = this.am.getLngLats();
-      if(optins.type){
-        amGpsArr = this.am.getLngLatGCJ02();
-      }
-       fitNew(this.map, [
-        [amGpsArr[0], amGpsArr[1]],
-        [amGpsArr[2], amGpsArr[3]]
-      ]);
-
-    }
-    return polylines;
-  }
-
-  createLPolygonNew(options, map) {
-    this.lPolygonNewArr.push(new LPolygonNew(options, map));
-  }
-
-  setPolygonColor(
-    id,
-    colors = ['rgba(255,201,14, 0.4)', 'rgba(255,201,14, 1)']
-  ) {
-    this.lPolygonNewArr.forEach((val) => {
-      if (val.Id == id) {
-        val.setPolygonColor(colors);
-        return;
-      }
-    });
-  }
-
-  setPolygonColorAll(
-    colors = ['rgba(184, 233, 134, 0.56)', 'rgba(23, 168, 162, 0.56)']
-  ) {
-    this.lPolygonNewArr.forEach((val) => {
-      val.setPolygonColor(colors);
-    });
-  }
-
-  removePolygonNew() {
-    this.lPolygonNewArr.forEach((val) => {
-      val.removePolygon();
-      val = null;
-    });
-    this.lPolygonNewArr = [];
-  }
-
-  caculateLL(lat1, lng1, lat2, lng2) {
-    return caculateLL(lat1, lng1, lat2, lng2);
-  }
-
-  get LPolygonNewArr() {
-    return this.lPolygonNewArr;
-  }
-
-  get isTruePolygon() {
-    if (!this._lPolygon) return false;
-    return this._lPolygon.isTruePolygon;
-  }
-	
+
+	get getZoom() {
+		if (!this.map) {
+			return 0;
+		}
+		const view = this.map.getView();
+		return view.getZoom();
+	}
+	getCenter() {
+		if (!this.map) {
+			return;
+		}
+		const view = this.map.getView();
+		let [x, y] = view.getCenter();
+		return [x, y];
+	}
+
+	fit(coordinates) {
+		fitNew(this.map, coordinates);
+	}
+
+	createMarker(imgSrc, width = 15, height = 15) {
+		return new LMarker(imgSrc, width, height);
+	}
+
+	removeMarker(marker) {
+		this.map.removeOverlay(marker.getMarker());
+	}
+
+	lModifyEventArr() {
+		this.lModifyEventArr.length = 0;
+		this.polygonGeojsonArr.forEach((item, key) => {
+			const lMEvent = new LModifyEvent(item, this.map);
+			lMEvent.setActive();
+			this.lModifyEventArr.push(lMEvent);
+		});
+	}
+
+	removeLModifyEventArr() {
+		if (!this.lModifyEventArr.length) {
+			return;
+		}
+		let item = null;
+		while ((item = this.lModifyEventArr.shift())) {
+			item.setActive(false);
+			item.remove();
+			item = null;
+		}
+	}
+
+	lModifyEvent() {
+		if (this.map && this.polygonGeojson) {
+			const lMEvent = new LModifyEvent(this.polygonGeojson, this.map);
+			lMEvent.setActive();
+			this.lMEvent = lMEvent;
+		}
+	}
+
+	removeLModifyEvent() {
+		if (!this.lMEvent) {
+			return;
+		}
+		this.lMEvent.setActive(false);
+		this.lMEvent.remove();
+	}
+
+	convertWGS84GeoJSONgcj_encrypt(geoJSON) {
+		const {
+			bbox,
+			geometry,
+			properties
+		} = geoJSON;
+		const bboxArr = [];
+		for (let i = 0; i < bbox.length; i += 2) {
+			const {
+				lon,
+				lat
+			} = GPS.gcj_encrypt(bbox[i], bbox[i + 1]);
+			bboxArr.push(lon);
+			bboxArr.push(lat);
+		}
+		geoJSON.bbox = bboxArr;
+		const coordinates = geometry.coordinates;
+		const coordinateArr = new Array();
+
+		for (let i = 0; i < coordinates.length; i++) {
+			coordinateArr.push(coordinates[i]);
+			for (let j = 0; j < coordinates[i].length; j++) {
+				const arr = coordinates[i][j];
+				const {
+					lon,
+					lat
+				} = GPS.gcj_encrypt(arr[0], arr[1]);
+				coordinateArr[i][j] = [lon, lat];
+			}
+		}
+		geometry.coordinates = coordinateArr;
+		if (properties) {
+			if (properties.center) {
+				const [x, y] = properties.center;
+				const [lat, lon] = GPS.gcj_encrypt(x, y);
+				geoJSON.properties.center = [lat, lon];
+			}
+		}
+		return geoJSON;
+	}
+
+	gcj_encryptConvertWGS84GeoJSON(geoJSON) {
+		const {
+			bbox,
+			geometry,
+			properties
+		} = geoJSON;
+		const bboxArr = [];
+		for (let i = 0; i < bbox.length; i += 2) {
+			const {
+				lon,
+				lat
+			} = GPS.gcj_decrypt(bbox[i], bbox[i + 1]);
+			bboxArr.push(lon);
+			bboxArr.push(lat);
+		}
+		geoJSON.bbox = bboxArr;
+		const coordinates = geometry.coordinates;
+		const coordinateArr = new Array();
+		for (let i = 0; i < coordinates.length; i++) {
+			coordinateArr.push(coordinates[i]);
+			for (let j = 0; j < coordinates[i].length; j++) {
+				const arr = coordinates[i][j];
+				const {
+					lon,
+					lat
+				} = GPS.gcj_decrypt(arr[0], arr[1]);
+				coordinateArr[i][j] = [lon, lat];
+			}
+		}
+		geometry.coordinates = coordinateArr;
+		if (properties) {
+			if (properties.center) {
+				const [x, y] = properties.center;
+				const [lat, lon] = GPS.gcj_decrypt(x, y);
+				geoJSON.properties.center = [lat, lon];
+			}
+		}
+		return geoJSON;
+	}
+
+	gcj_encrypt(wgsLon, wgsLat) {
+		return GPS.gcj_encrypt(wgsLon, wgsLat);
+	}
+
+	gcj_decrypt(gcjLon, gcjLat) {
+		return GPS.gcj_decrypt(gcjLon, gcjLat);
+	}
+
+	formatArea() {
+		if (!this._lPolygon) {
+			return 0;
+		}
+		if (!this._lPolygon.getGeometry()) {
+			return 0;
+		}
+		return formatArea(this._lPolygon.getGeometry());
+	}
+
+	formatLength() {
+		if (!this._lPolygon) {
+			return 0;
+		}
+		if (!this._lPolygon.getGeometry()) {
+			return 0;
+		}
+		return formatLength(this._lPolygon.getGeometry());
+	}
+
+	createPolylinePointList(
+		data,
+		isGCJ02Point = false,
+		isFit = true,
+		callback = null,
+		type = 0,
+	) {
+		let polylines = new Array();
+		const polylinePoints = createPolylinePoints(data, isGCJ02Point);
+		polylines = addPolylinePoint(polylinePoints, this.map);
+		const gpsPoints = createGPSPoints(data, isGCJ02Point, this.am);
+		if (gpsPoints != null) {
+			let amGpsArr = this.am.getLngLats();
+			if (type) {
+				amGpsArr = this.am.getLngLatGCJ02();
+			}
+			fitNew(this.map, [
+				[amGpsArr[0], amGpsArr[1]],
+				[amGpsArr[2], amGpsArr[3]]
+			]);
+
+		}
+		return polylines;
+	}
+
+	async setAreaCenterPoint() {
+		let _code = '3301';
+
+		if (window.localStorage.getItem('user')) {
+			const user = JSON.parse(window.localStorage.getItem('user'));
+			_code = user['areaCode'];
+		}
+
+		const {
+			data
+		} = await getAreaCenter(_code);
+		const {
+			areaCode,
+			areaName,
+			centerLongitude,
+			centerLatitude
+		} = data;
+		window.localStorage.setItem('createPointData', JSON.stringify(data));
+	}
+
+	async getAreaCenterPoint(isGCJ02Point = false) {
+		// if (!window.localStorage.getItem('createPointData')) {
+		//   await this.setAreaCenterPoint();
+		// }
+		// const obj = JSON.parse(window.localStorage.getItem('createPointData'));
+		// if (isGCJ02Point) {
+		//   const {
+		//     lon,
+		//     lat
+		//   } = GPS.gcj_encrypt(obj.centerLongitude, obj.centerLatitude);
+		//   obj.centerLongitude = lon;
+		//   obj.centerLatitude = lat;
+		// }
+		return obj;
+	}
+
+	removeAreaCenterPoint() {
+		window.localStorage.removeItem('createPointData');
+	}
+
+	polygonStyle() {
+		return polygonStyle;
+	}
+
+	removeMapsLayers() {
+		const arrs = this.map.getLayers().getArray();
+		for (let i = arrs.length; 0 <= i; i--) {
+			this.map.removeLayer(arrs[i]);
+		}
+	}
+
+	removeOverlays() {
+		if (!this.map) {
+			return;
+		}
+		const arrs = this.map.getOverlays().getArray();
+		for (let i = arrs.length; 0 <= i; i--) {
+			this.map.removeOverlay(arrs[i]);
+		}
+	}
+
+	resetAM() {
+		this.am = null;
+		this.am = new AM();
+	}
+
+	createPolygonBoundary(geoJson, mode) {
+		const polygonBoundary = createPolygonBoundary(geoJson, mode);
+		this.polygonGeojsonArr.push(polygonBoundary);
+		this.map.addLayer(polygonBoundary);
+	}
+
+	createPolylinePointListNew(
+		data,
+		optins,
+		optins2 = {
+			isGCJ02Point: false,
+			isFit: false
+		}
+	) {
+		let polylines = new Array();
+		const polylinePoints = createPolylinePoints(data, false);
+		polylines = addPolylinePointNew(polylinePoints, this.map, optins);
+		const gpsPoints = createGPSPoints(data, false, this.am);
+
+		if (gpsPoints != null && optins2.isFit) {
+			let amGpsArr = this.am.getLngLats();
+			if (optins.type) {
+				amGpsArr = this.am.getLngLatGCJ02();
+			}
+			fitNew(this.map, [
+				[amGpsArr[0], amGpsArr[1]],
+				[amGpsArr[2], amGpsArr[3]]
+			]);
+
+		}
+		return polylines;
+	}
+
+	createLPolygonNew(options, map) {
+		this.lPolygonNewArr.push(new LPolygonNew(options, map));
+	}
+
+	setPolygonColor(
+		id,
+		colors = ['rgba(255,201,14, 0.4)', 'rgba(255,201,14, 1)']
+	) {
+		this.lPolygonNewArr.forEach((val) => {
+			if (val.Id == id) {
+				val.setPolygonColor(colors);
+				return;
+			}
+		});
+	}
+
+	setPolygonColorAll(
+		colors = ['rgba(184, 233, 134, 0.56)', 'rgba(23, 168, 162, 0.56)']
+	) {
+		this.lPolygonNewArr.forEach((val) => {
+			val.setPolygonColor(colors);
+		});
+	}
+
+	removePolygonNew() {
+		this.lPolygonNewArr.forEach((val) => {
+			val.removePolygon();
+			val = null;
+		});
+		this.lPolygonNewArr = [];
+	}
+
+	caculateLL(lat1, lng1, lat2, lng2) {
+		return caculateLL(lat1, lng1, lat2, lng2);
+	}
+
+	get LPolygonNewArr() {
+		return this.lPolygonNewArr;
+	}
+
+	get isTruePolygon() {
+		if (!this._lPolygon) return false;
+		return this._lPolygon.isTruePolygon;
+	}
+
 	onCreateRectangle(callback) {
-	
-	  if (this._lRectangle) {
-	    this.clearRectangle();
-	  }
-	  const _this = this;
-	  this._lRectangle = new LRectangle('Circle', this.map, (obj) => {});
-	  return this._lRectangle;
-	}
-	
-	getRectangleData(){
-	  if(!this._lRectangle) return [];
-	   const coordinates = this._lRectangle.getCoordinates();
-	   const pointArr= coordinates[0];
-	   if(pointArr.length){
-	    const arr= [];
-	    arr.push([pointArr[0][0], pointArr[1][1]]);
-	    arr.push([pointArr[1][0], pointArr[2][1]]);
-	     return arr;
-	   };
-	   return [];
-	}
-	
-	getRectangleDataNew(){
-	  if(!this._lRectangle) return [];
-	   const coordinates = this._lRectangle.getCoordinates();
-	   const pointArr= coordinates[0];
-	   if(pointArr.length){
-	    const arr= [];
-	    arr.push([pointArr[0][0], pointArr[1][1]]);
-	    arr.push([pointArr[1][0], pointArr[2][1]]);
-	     return arr;
-	   };
-	   return [];
-	}
-	
-	
+
+		if (this._lRectangle) {
+			this.clearRectangle();
+		}
+		const _this = this;
+		this._lRectangle = new LRectangle('Circle', this.map, (obj) => {});
+		return this._lRectangle;
+	}
+
+	getRectangleData() {
+		if (!this._lRectangle) return [];
+		const coordinates = this._lRectangle.getCoordinates();
+		const pointArr = coordinates[0];
+		if (pointArr.length) {
+			const arr = [];
+			arr.push([pointArr[0][0], pointArr[1][1]]);
+			arr.push([pointArr[1][0], pointArr[2][1]]);
+			return arr;
+		};
+		return [];
+	}
+
+	getRectangleDataNew() {
+		if (!this._lRectangle) return [];
+		const coordinates = this._lRectangle.getCoordinates();
+		const pointArr = coordinates[0];
+		if (pointArr.length) {
+			const arr = [];
+			arr.push([pointArr[0][0], pointArr[1][1]]);
+			arr.push([pointArr[1][0], pointArr[2][1]]);
+			return arr;
+		};
+		return [];
+	}
+
+
 	clearRectangle() {
-	  if (this.map && this._lRectangle) {
-	   const coordinates = this._lRectangle.getCoordinates();
-	    this._lRectangle.remove();
-	    this._lRectangle = null;
-	  }
-	}
-	
-}
+		if (this.map && this._lRectangle) {
+			const coordinates = this._lRectangle.getCoordinates();
+			this._lRectangle.remove();
+			this._lRectangle = null;
+		}
+	}
+
+}