// import ol from "ol"; import ol from '../js/ol' class createDrawFeature { constructor(options, map) { this.type = options.type || "LineString" // 类型有"Point","Polygon" this.name = options.name || undefined this.pointRadius = options.pointRadius || 6 this.pointColor = options.pointColor || 'red' this.lineWidth = options.lineWidth || 6 this.lineColor = options.lineColor || 'pink' this.polWidth = options.polWidth || 6 this.polStrColor = options.polStrColor || 'yellow' this.polColor = options.polColor || '#490b0b' this.isHand = options.isHand || false //是否手绘 this.isMeasure = options.isMeasure || false // 默认不开启 this.alpha = options.alpha || 0.5 this.map = map this.style = null this.source = new ol.source.Vector({wrapX: false,zIndex:999}); this.data = [] this.labelArr = [] // 存放label this.draw = null this.length = 0 this.event = undefined this.vectorLayer = new ol.layer.Vector({ source: this.source, zIndex:999 }); this.map.addLayer(this.vectorLayer) } // 开启画图功能 addInteraction() { this.draw = new ol.interaction.Draw({ source: this.source, type: this.type, style: this.setShapeStyle(this.type), stopClick: !this.isMeasure, freehand: this.isHand }); let that = this; this.draw.on('drawend', function (evt) { that.positions = [] const geom = evt.feature.getGeometry(); evt.feature.setStyle(that.setShapeStyle(that.type)) geom.setProperties({type: that.type, name: that.name}) let points = geom.getCoordinates(); that.data.push({ name: that.name, coordinates: points, type: geom.getType(), style: that.style[that.type], }) that.draw.finishDrawing() }, this); this.map.addInteraction(this.draw); } setShapeStyle(type) { let rgb = this.convertHexToRGB(this.polColor) this.style = { 'Point': new ol.style.Style({ image: new ol.style.Circle({ radius: this.pointRadius, fill: new ol.style.Fill({color: this.pointColor}), }), }), 'LineString': new ol.style.Style({ stroke: new ol.style.Stroke({ width: this.lineWidth, color: this.lineColor, }), }), 'Polygon': new ol.style.Style({ stroke: new ol.style.Stroke({ width: this.polWidth, color: this.polStrColor, }), fill: new ol.style.Fill({color: "rgba("+rgb[0]+","+rgb[1]+","+rgb[2]+","+this.alpha+")"}), }) } return this.style[type] } convertHexToRGB(str){ str = str[0] === '#' ? str.slice(1) : str str = str.length === 3 ? str.repeat(2) : str if ((str.length !== 6) || !(/^[0-9a-fA-F]{3,6}$/i.test(str))) return 'Invalid data' return [parseInt(str[0] + str[1], 16), parseInt(str[2] + str[3], 16), parseInt(str[4] + str[5], 16)] } // 关闭画图功能 closeInteraction() { this.map.removeInteraction(this.draw); ol.observable.unByKey(this.event) this.isHand = false this.isMeasure = false } // 将画图数据返回给用户 getData() { return this.data } //清空图层 clearShapes() { //this.source.clear() this.vectorLayer.getSource().clear(); // this.source = []; // this.source.clear() // this.map.removeLayer(this.vectorLayer) // 清除存放overlay的数组 for (let i = 0; i < this.labelArr.length; i++) { this.map.removeOverlay(this.labelArr[i]) } } deleteLastShapes() { let features = this.source.getFeatures() if (features.length !== 0) { let id = features.length - 1 this.source.removeFeature(features[id]) } } } export {createDrawFeature};