美文网首页
vue+cesium+geoserver修改infobox要素属

vue+cesium+geoserver修改infobox要素属

作者: 我喜欢吃辣椒 | 来源:发表于2020-07-16 10:49 被阅读0次

    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)
    

    相关文章

      网友评论

          本文标题:vue+cesium+geoserver修改infobox要素属

          本文链接:https://www.haomeiwen.com/subject/mtxphktx.html