sysu_emap/src/main/webapp/static/package/city.js

function CityAction(context, id){
    this.context = context
    this.id = id
    this.selected = {}
    this.vectorLayer = null
    this.obj = new City({
        url : context.local_wfs_path
    })
}

CityAction.prototype = {
    clickLock:false,
    startStatus : false,
    createStatus : false,
    create(){
        this.obj.getTileLayer()
        this.initInteraction()
        this.createStatus = true;
    },
    start(){
        if(this.startStatus){
            console.log("startStatus is true")
            return
        }
        this.context.clicks[this.id] = this
        this.context.currentMap.addLayer(this.obj.layerData.layer)
        this.startStatus = true;
    },
    stop(){
        if(!this.startStatus){
            console.log("startStatus is false")
            return
        }
        this.context.currentMap.removeLayer(this.obj.layerData.layer)
        console.log("vectorLayer cleared")
        this.context.clicks[this.id] = null
        console.log("remove click")
        this.startStatus = false;
    },
    find(code, success){
        let level;
        let endZeroCount = this.endZeroCount(code)
        switch (endZeroCount){
            case 2:
            case 3:
                level = 1
                break;
            case 4:
                level = 0
                break;
            default:
                level = 2
        }
        if(level == 0)
            return
        $.ajax({
            type : 'POST',
            url : "/city/findJson",
            data : {level: level, code: code},
            dataType : 'json',
            success : success
        });
    },
    fit(code){
        let that = this
        this.find(code, function(res){
            if(res.code == 0)
                that.context.currentView.fit(new ol.format.WKT().readGeometry(res.data).getExtent(),{duration: 1000})
        })
    },
    endZeroCount(code){
        let count = 0;
        while(code % 10 == 0 && code != 0){
            code = code / 10;
            count++;
        }
        return count;
    },
    clearEndZero(code){
        return code.replace(/(0+)\b/gi,"")
    },
    initInteraction(){
        let move = new ol.interaction.Select({
            condition: ol.events.condition.pointerMove,
            layers:[this.obj.layerData.layer],
            style: this.obj.selectedStyle()
        })
        let select = new ol.interaction.Select({
            condition: ol.events.condition.singleClick,
            layers:[this.obj.layerData.layer],
            style: this.obj.selectedStyle()
        })
        this.context.currentMap.addInteraction(move)
        this.context.currentMap.addInteraction(select)
        select.on("select",function(f,g){
            console.log(f.selected[0])
            window.location = "/qyz/zzjg"
        })
    }
}

function City(opt){
    this.name = "Qyz"
    this.wmsData = {
        layers:"wuhan:qy-z",
        url: opt.url,
    }
    this.layerData = {
        layer : null,
        source : null,
        select : null,
        always : false
    }
}

City.prototype = {
    getTileLayer(){
        let url = this.wmsData.url +
            "?service=WFS&version=1.0.0&request=GetFeature&typeName="+this.wmsData.layers+"&maxFeatures=1000&outputFormat=application/json"
        url+="&Filter=(<Filter>" +
            "<ogc:PropertyIsLike wildCard=\"*\" singleChar=\".\" escape=\"!\" xmlns:ogc=\"http://www.opengis.net/ogc\" ><ogc:PropertyName>pac</ogc:PropertyName>" +
            "<ogc:Literal>441821*</ogc:Literal></ogc:PropertyIsLike></Filter>)"
        console.log(url)
        let myGeoJsonLayer = new MyGeoJsonLayer({url: url, zIndex:2, style: this.style()})
        this.layerData.layer = myGeoJsonLayer.vector;
    },style(){
        return new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgb(20,200,44)',
                width: 1,
            }),
            fill: new ol.style.Fill({
                color: 'rgba(200,20,20,0.0)',
            })

        });
    },selectedStyle(){
        return new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(200,20,20)',
                width: 1,
            }),
            fill: new ol.style.Fill({
                color: 'rgba(200,20,20,0.1)',
            })
        });
    }
}