baise-pc-vue/src/common/vectorStyle.js

import Style from 'ol/style/Style.js';
import Fill from 'ol/style/Fill.js';
import Text from 'ol/style/Text.js';
import Stroke from 'ol/style/Stroke.js';
import Icon from 'ol/style/Icon.js';
import Circle from "ol/style/Circle";

function cityLand(gridcode) {
    let fillColor = ["#6E7F8580","#7B9CFB80","#979B4980","#E9920980","#182F1380","#30791380","#0D53AF80"];
    return new Style({
        fill: new Fill({
            color: fillColor[gridcode],
        })
    });
}
function pointStyle(f){
    let style = new Style({
        text: new Text({
            text:f.getId() ? f.getId() : f.get("id"),
            stroke: new Stroke({
                color: 'rgba(239,236,236)',
                width: 1,
            }),
            fill: new Fill({
                color: 'rgba(239,236,236)',
            }),
            font:"14px sans-serif"
        }),
        image: new Icon({
            src:"../status_"+f.get("status")+".png",
            scale:0.3,
            anchor:[0.5,1],
        })
    });
    return style
}

function areaStyle(f){
    let style = new Style({
        fill: new Fill({
            color: f.get("color")+"10"
        }),
        stroke: new Stroke({
            color: f.get("color"),
            width: 1,
        }),
    });
    return style;
}


let selectStyle = (f)=>{
    if(f.get("nodeType") === "area"){
        return areaStyle(f)
    }

    if(f.get("nodeType") === "town"){
        return cropStyle(f)
    }

    let color = f.get("color");
    let radius = 10;
    if(!color || color == ""){
        color = "green"
        radius = 5;
    }
    let style = new Style({
        image: new Circle({
            radius: radius,                             // 半径
            stroke: new Stroke({           // 边界样式
                color: 'red',                    // 边界颜色
                width: 3                            // 边界宽度
            }),
            fill: new Fill({               // 填充样式
                color: color                       // 填充颜色
            })
        })
    });
    return style
}


function cropStyle(f){
    const fill = new Fill({
        color: 'rgba(255,255,255,0.1)',
    });
    return new Style({
        fill:fill
    });
}
function selectedCropStyle(f){
    if(f.get("isPoint")){
        return pointStyle(f)
    }
    const stroke = new Stroke({
        color: 'rgb(10,241,23)',
        width: 2
    });
    return new Style({
        stroke:stroke
    });
};

function fitPointStyle(f){
    if(f.get("nodeType") == "fitPoint"){
        let color = "#ffffff"
        let radius = 2;
        if(f.get("sort") == 0){
            color = "yellow";
            radius = "6"
        }
        let style = new Style({
            image: new Circle({
                radius: radius,                           // 半径
                fill: new Fill({               // 填充样式
                    color:  color// 填充颜色
                })
            })
        });
        return style
    }else{
        let style = new Style({
            fill: new Fill({               // 填充样式
                color:  '#23DB9E'// 填充颜色
            }),
            stroke: new Stroke({
                color: "#23DB9E",
                width: 2,
            }),
        });
        return style
    }
}

function numberPointStyle(f){
    if(f.get("nodeType") == "fitPoint") {
        let style = new Style({
            text: new Text({
                offsetY:-10,
                offsetX:-10,
                text: f.get("sort")+"",
                stroke: new Stroke({
                    color: 'red',
                    width: 1,
                }),
                fill: new Fill({
                    color: 'red',
                }),
                font: "12px sans-serif"
            })
        });
        return style
    }
}


export {
    cityLand,
    selectedCropStyle,
    cropStyle,
    pointStyle,
    selectStyle,
    fitPointStyle,
    numberPointStyle,
}