import LTBaseObject from './KBaseObject' import XYZ from 'ol/source/XYZ' import Tile from 'ol/layer/Tile' import Common from './Common' import Style from "ol/style/Style"; import Fill from "ol/style/Fill"; import Stroke from "ol/style/Stroke"; import Text from "ol/style/Text"; import Icon from "ol/style/Icon"; import Circle from "ol/style/Circle"; import Photo from "ol-ext/style/Photo"; import config from '../../api/config.js' const { base_img_url2 } = config /** * @description 样式类 */ class VectorStyle{ constructor(){ this.polymerImgLayerStyleCache = {} this.getPointTextStyleCache = {} this.resize = "?x-oss-process=image/resize,w_400"; } getPolymerImgLayerStyle(feature){ let that = this // let zoom = that.kmap.view.getZoom(); // let r = getRadius(zoom); let r = 25; let img = feature.get("src"); let count = feature.get("count"); let k = img + r; if (img && img != "") { let style = that.polymerImgLayerStyleCache[k]; if (!style) { style = new Style({ image: new Photo({ src: base_img_url2 + img + that.resize, radius: r, shadow: 0, crop: true, kind: "square", onload: function () { that.polymerImgLayer.layer.changed(); }, displacement: [0, 30 + 15], stroke: new Stroke({ width: 3, color: "#fdfcfc", }), }), }); that.polymerImgLayerStyleCache[k] = style; } return [style, that.getCount(count + "")]; } else { return that.getPointSimpleStyle(10, "#00000000", "#00000000", 1); } } getLineStyle(fillColor, strokeColor, strokeWidth){ let style = new Style({ stroke: new Stroke({ color: strokeColor, width: strokeWidth || 1, }), }); return style; } getPolygonStyle(fillColor, strokeColor, strokeWidth){ let style = new Style({ fill: new Fill({ color: fillColor }), stroke: new Stroke({ color: strokeColor, width: strokeWidth || 1, }), }); return style; } getPointStyle(src, scale, anchor, text, font, textColor){ let textObj = null; text && (textObj = new Text({ text:text, stroke: new Stroke({ color: textColor, width: 1, }), fill: new Fill({ color: textColor, }), font:font })) let style = new Style({ image: new Icon({ text:textObj, src:src, scale:scale, anchor:anchor, }) }); return style } /** * * @param radius 半径 * @param fillColor 填充颜色 * @param strokeColor 边框颜色 * @param strokeWidth 边框宽度 * @returns {Style} */ getPointSimpleStyle(radius, fillColor, strokeColor, strokeWidth){ let style = new Style({ image: new Circle({ radius: radius, // 半径 stroke: new Stroke({ // 边界样式 color: strokeColor, // 边界颜色 width: strokeWidth // 边界宽度 }), fill: new Fill({ // 填充样式 color: fillColor // 填充颜色 }) }) }); return style } /** * * @param text * @param fillColor 填充颜色 * @param strokeColor 边框颜色 * @param strokeWidth 边框宽度 * @returns {Style} */ getPointTextStyle(text, fillColor, strokeColor, strokeWidth, fontSize){ if(this.getPointTextStyleCache[text]){ return this.getPointTextStyleCache[text] } let style = new Style({ text: new Text({ text:text, stroke: new Stroke({ color: strokeColor, width: strokeWidth, }), fill: new Fill({ color: fillColor, }), font: fontSize+"px sans-serif" }), }); this.getPointTextStyleCache[text] = style return style } /** * * @param text * @returns {Style} */ getCount(text){ let style = new Style({ text: new Text({ text:text, stroke: new Stroke({ color: "#ffffff", width: 1, }), fill: new Fill({ color: "#ffffff", }), font: "24rpx sans-serif", backgroundFill: new Fill({ color: "#0c0c0c", }), backgroundStroke: new Stroke({ color: "#cccccc", width: 1, }), offsetX:20, offsetY:-70 , padding:[4, 5, 0, 5] }), }); return style } } export default VectorStyle