|
|
@@ -64,12 +64,33 @@ class RegionLayer {
|
|
|
}),
|
|
|
}),
|
|
|
});
|
|
|
- return [style1];
|
|
|
- },
|
|
|
+ // let style2 = that.textBgStyle("#FFD887","#ED9E1E")
|
|
|
+ // 创建带渐变背景的文字样式
|
|
|
+const style2 = that.createTextWithGradientBg(
|
|
|
+ '245/283', // 文字内容
|
|
|
+ '#FFD887', // 渐变起始色（蓝色）
|
|
|
+ '#ED9E1E', // 渐变结束色（深蓝）
|
|
|
+ {
|
|
|
+ offsetX: 50, // 向右偏移
|
|
|
+ offsetY: -30, // 向上偏移（Y轴向下为正，故用负值）
|
|
|
});
|
|
|
+ return [style1, style2];
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ this.textBgStyleCache = {}
|
|
|
+ this.numPointLayer = new KMap.VectorLayer("numLayer", 100, {
|
|
|
+ minZoom: 15,
|
|
|
+ maxZoom: 22,
|
|
|
+ source: new VectorSource({}),
|
|
|
+ style: (feature) => {
|
|
|
+ return that.textBgStyle("#FFD887","#ED9E1E")
|
|
|
+ },
|
|
|
+ });
|
|
|
|
|
|
map.addLayer(this.regionLayer.layer);
|
|
|
map.addLayer(this.gardenPointLayer.layer);
|
|
|
+ // map.addLayer(this.numPointLayer.layer);
|
|
|
this.initData(this.farmId);
|
|
|
}
|
|
|
|
|
|
@@ -103,7 +124,6 @@ class RegionLayer {
|
|
|
}
|
|
|
|
|
|
initData(data) {
|
|
|
- console.log('da', data);
|
|
|
if (!data) return
|
|
|
let that = this;
|
|
|
let features = [];
|
|
|
@@ -114,6 +134,8 @@ class RegionLayer {
|
|
|
|
|
|
item.wkt = item.pointWkt
|
|
|
this.gardenPointLayer.source.addFeature(newPoint(item, "wktVal", "myGarden"))
|
|
|
+
|
|
|
+ // this.numPointLayer.source.addFeature(newPoint(item, "wkt", "myGarden"))
|
|
|
}
|
|
|
that.area = features
|
|
|
const source = new VectorSource({
|
|
|
@@ -133,6 +155,127 @@ class RegionLayer {
|
|
|
this.regionLayer.layer.getSource().clear();
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * 创建带渐变背景的文字样式
|
|
|
+ * @param {string} text - 要显示的文字
|
|
|
+ * @param {string} startColor - 渐变起始颜色（如 '#00c6ff'）
|
|
|
+ * @param {string} endColor - 渐变结束颜色（如 '#0072ff'）
|
|
|
+ * @param {string} textColor - 文字颜色（默认白色）
|
|
|
+ * @param {number} fontSize - 文字大小（像素，默认12）
|
|
|
+ * @return {Style} OpenLayers 样式对象
|
|
|
+ */
|
|
|
+createTextWithGradientBg(
|
|
|
+ text,
|
|
|
+ startColor,
|
|
|
+ endColor,
|
|
|
+ { textColor = '#fff', fontSize = 12, offsetX = 0, offsetY = 0 } = {}
|
|
|
+ ) {
|
|
|
+ const cacheKey = `${text}_${startColor}_${endColor}_${textColor}_${fontSize}_${offsetX}_${offsetY}`;
|
|
|
+
|
|
|
+ if (this.textBgStyleCache[cacheKey]) {
|
|
|
+ return this.textBgStyleCache[cacheKey];
|
|
|
+ }
|
|
|
+
|
|
|
+ const style = new Style({
|
|
|
+ renderer: (coordinates, state) => {
|
|
|
+ const ctx = state.context;
|
|
|
+ const pixelRatio = state.pixelRatio;
|
|
|
+ const x = coordinates[0] + offsetX * pixelRatio; // 应用水平偏移
|
|
|
+ const y = coordinates[1] + offsetY * pixelRatio; // 应用垂直偏移
|
|
|
+
|
|
|
+ // 文字测量
|
|
|
+ ctx.font = `${fontSize * pixelRatio}px Arial`;
|
|
|
+ const textWidth = ctx.measureText(text).width;
|
|
|
+ const padding = 8 * pixelRatio;
|
|
|
+
|
|
|
+ // 背景参数
|
|
|
+ const bgWidth = textWidth + 2.5 * padding;
|
|
|
+ const bgHeight = fontSize * 2 * pixelRatio;
|
|
|
+ const cornerRadius = 4 * pixelRatio;
|
|
|
+
|
|
|
+ // 渐变
|
|
|
+ const gradient = ctx.createLinearGradient(
|
|
|
+ x - bgWidth / 2,
|
|
|
+ y - bgHeight / 2,
|
|
|
+ x + bgWidth / 2,
|
|
|
+ y + bgHeight / 2
|
|
|
+ );
|
|
|
+ gradient.addColorStop(0, startColor);
|
|
|
+ gradient.addColorStop(1, endColor);
|
|
|
+
|
|
|
+ // 绘制圆角矩形背景
|
|
|
+ this.roundRect(ctx, x - bgWidth / 2, y - bgHeight / 2, bgWidth, bgHeight, cornerRadius);
|
|
|
+ ctx.fillStyle = gradient;
|
|
|
+ ctx.fill();
|
|
|
+
|
|
|
+ // 绘制文字
|
|
|
+ ctx.fillStyle = textColor;
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ ctx.textBaseline = 'middle';
|
|
|
+ ctx.fillText(text, x, y);
|
|
|
+ },
|
|
|
+ zIndex: 2,
|
|
|
+ });
|
|
|
+
|
|
|
+ this.textBgStyleCache[cacheKey] = style;
|
|
|
+ return style;
|
|
|
+ }
|
|
|
+
|
|
|
+/** 辅助函数：绘制圆角矩形 */
|
|
|
+roundRect(ctx, x, y, width, height, radius) {
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(x + radius, y);
|
|
|
+ ctx.lineTo(x + width - radius, y);
|
|
|
+ ctx.arcTo(x + width, y, x + width, y + radius, radius);
|
|
|
+ ctx.lineTo(x + width, y + height - radius);
|
|
|
+ ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
|
|
|
+ ctx.lineTo(x + radius, y + height);
|
|
|
+ ctx.arcTo(x, y + height, x, y + height - radius, radius);
|
|
|
+ ctx.lineTo(x, y + radius);
|
|
|
+ ctx.arcTo(x, y, x + radius, y, radius);
|
|
|
+ ctx.closePath();
|
|
|
+}
|
|
|
+
|
|
|
+ textBgStyle(startColor,endColor){
|
|
|
+ let key = startColor + endColor
|
|
|
+ let style = this.textBgStyleCache[key]
|
|
|
+ if (!style) {
|
|
|
+ style = new Style({
|
|
|
+ renderer: function (coordinates, state) {
|
|
|
+ let ctx = state.context;
|
|
|
+ // 矩形的参数
|
|
|
+ const x = coordinates[0]; // 矩形中心点的x坐标
|
|
|
+ const y = coordinates[1] - 60 * state.pixelRatio; // 矩形中心点的y坐标
|
|
|
+ const width = 50 * state.pixelRatio; // 矩形的宽度
|
|
|
+ const height = 20 * state.pixelRatio; // 矩形的高度
|
|
|
+ const cornerRadius = 4 * state.pixelRatio; // 圆角半径
|
|
|
+ // 创建渐变
|
|
|
+ const gradient = ctx.createLinearGradient(x - width / 2, y, x + width / 2, y);
|
|
|
+ gradient.addColorStop(0, startColor); // 渐变起始颜色
|
|
|
+ gradient.addColorStop(1, endColor); // 渐变结束颜色
|
|
|
+ // 绘制圆角矩形
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(x - width / 2 + cornerRadius, y - height / 2); // 左上角
|
|
|
+ ctx.lineTo(x + width / 2 - cornerRadius, y - height / 2); // 上边
|
|
|
+ ctx.arc(x + width / 2 - cornerRadius, y - height / 2 + cornerRadius, cornerRadius, -Math.PI / 2, 0); // 右上角
|
|
|
+ ctx.lineTo(x + width / 2, y + height / 2 - cornerRadius); // 右边
|
|
|
+ ctx.arc(x + width / 2 - cornerRadius, y + height / 2 - cornerRadius, cornerRadius, 0, Math.PI / 2); // 右下角
|
|
|
+ ctx.lineTo(x - width / 2 + cornerRadius, y + height / 2); // 下边
|
|
|
+ ctx.arc(x - width / 2 + cornerRadius, y + height / 2 - cornerRadius, cornerRadius, Math.PI / 2, Math.PI); // 左下角
|
|
|
+ ctx.lineTo(x - width / 2, y - height / 2 + cornerRadius); // 左边
|
|
|
+ ctx.arc(x - width / 2 + cornerRadius, y - height / 2 + cornerRadius, cornerRadius, Math.PI, -Math.PI / 2); // 左上角
|
|
|
+ ctx.closePath();
|
|
|
+ ctx.fillStyle = gradient; // 填充颜色
|
|
|
+ ctx.fill();
|
|
|
+ },
|
|
|
+ zIndex:2
|
|
|
+ })
|
|
|
+ this.textBgStyleCache[key] = style
|
|
|
+ }
|
|
|
+ return style
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
export default RegionLayer;
|
刘秀芳
