webgis 打点 画线

webgis 打点 画线

打点

let addedLayers = ref([]) // 记录图层 用于删除
function pointerAction(type){
    if(addedLayers)removeAllPoints()
    switch (type) {
        case 'waterFactory':
            poniter('水厂', waterworks.value,type)
            break;
        case 'waterGetPoint':
            poniter('取水口',waterIntake.value,type)
            break;
        case 'meterial':
            poniter('设备',meteringEquipment.value,type)
            break;
        case 'warterSavePoint':
            poniter('蓄水池',balancingTank.value,type)
            break;
        case 'warterPumpPoint':
            poniter('泵站',boosterPump.value,type)
            break;
        default:
            break;
    }
}
const poniter = (name="水厂",data,layerName) => {
    const styleFunction = function (feature) {
        return openlayerStyle(name)[feature.getGeometry().getType()];
    }
    const source = new VectorSource({
        features: new GeoJSON().readFeatures(data)
    })
    source.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));
    let layer = new VectorLayer({
        source:source,
        style: styleFunction,
        name: layerName 
    })
    map.addLayer(layer)
    addedLayers.push(layer);
}
function removeAllPoints() {
    addedLayers.forEach(layer => {
        map.removeLayer(layer);
    });
    addedLayers = []; // 清空数组，方便后续重新添加图层
}
function removeLayerByName(layerName) {
    const allLayers = map.getLayers().getArray(); // 获取所有图层
    allLayers.forEach(layer => {
        if (typeof layer.get('name') === 'string' && layer.get('name') === layerName) { // 判断是否有设置名称属性
            map.removeLayer(layer);
        }
    });
}

画线

const linener = (num) => {
    const styleFunction = function (feature) {
        const number = feature.values_.口径DN || feature.values_.管径;
        const obj = lineStyles(number);//获取style数据，根据口径||管径 区分 管线颜色
        const syl = new Style({
            'LineString': new Stroke({
                stroke:new Stroke({
                    color:obj.color,
                    width:obj.width
                })
            })
        });
        feature.setStyle(syl)
    }
    const vectorSourceLine = new VectorSource({
        //createFeatureCollection(diameterCategories[`${num}`]) 官网数据
        features: new GeoJSON().readFeatures(createFeatureCollection(diameterCategories[`${num}`])),
    });
    vectorSourceLine.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)))
    let layer = new VectorLayer({
        source: vectorSourceLine,
        style: styleFunction,
    });
    map.addLayer(layer);
}