adopt-mini-h5/src/utils/ol-map/VectorStyle.js

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