vue+cesium+geoserver修改infobox要素属性

1.加载wfs服务方式,通过geojson方式加载，数据量不大

geoserver.png

2.地址即我们的请求geojson的地址

请求地址

3.将此地址当做json地址，不需要发ajax，直接用cesium api调用

let urlWfs =
                this.$api.geoserverUrlWFS +
                "?service=WFS&version=1.0.0&request=GetFeature&maxFeatures=50&outputFormat=application%2Fjson" +
                `&typeName=${this.quYuSelect.split(",")[0]}`

            let promise = Cesium.GeoJsonDataSource.load(urlWfs)
            promise.then(function(dataSources) {
                let entities = dataSources.entities.values
                for (let i = 0; i < entities.length; i++) {
                    let entity = entities[i]
                    entity.name = entity.properties.I_clas
                    entity.description = `<table class="cesium-infoBox-defaultTable">
                    <tbody>
                        <tr>
                            <th>变化前</th>
                            <th>${entity.properties.BH_Q}</th>
                        </tr>
                        <tr>
                            <th>变化后</th>
                            <th>${entity.properties.BH_H}</th>
                        </tr>
                        <tr>
                            <th>面积(m²)</th>
                            <th>${entity.properties.mianji}</th>
                        </tr>
                        <tr>
                            <th>一级分类</th>
                            <th>${entity.properties.I_clas}</th>
                        </tr>
                        <tr>
                            <th>二级分类</th>
                            <th>${entity.properties.II_class}</th>
                        </tr>
                        <tr>
                            <th>三级分类</th>
                            <th>${entity.properties.III_clas}</th>
                        </tr>
                    </tbody>
                    </table>`
                    viewer.entities.add(entity)
                }
            })
            viewer.flyTo(promise)