vue3+cesium点击wms图层获取要素属性

疆~

已于 2023-01-02 20:34:24 修改

阅读量2.3k

点赞数 2

分类专栏： Cesium 文章标签： javascript vue.js 前端

于 2022-11-28 00:28:08 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/128072336

版权

Cesium 专栏收录该内容

29 篇文章 64 订阅

订阅专栏

<template>
    <div style="height: 100vh;width: 100vw;">
        <div id="cesiumContainer"></div>
    </div>
</template>
  
<script setup>
import * as Cesium from 'cesium';
import { onMounted, reactive } from 'vue';
onMounted(() => {

    const viewer = new Cesium.Viewer("cesiumContainer", { infoBox: false });
    window.viewer = viewer;//挂载到window上

    const wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
        url: "http://localhost:8090/geoserver/keshan/wms",
        layers: "keshan:sichuan",
        parameters: {
            transparent: true, //务必设为true。否则不显示底图
            format: "image/png",
            srs: "EPSG:4326",
        },
    });
    viewer.imageryLayers.addImageryProvider(wmsImageryProvider);

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(async function (event) {
        viewer.selectedEntity = undefined;
        var pickRay = viewer.camera.getPickRay(event.position);
        var featuresPromise = await viewer.imageryLayers.pickImageryLayerFeatures(pickRay, viewer.scene);
        console.log("featuresPromise:", featuresPromise)

    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

})
</script>

显示属性在页面上：

<template>
    <div style="height: 100vh;width: 100vw;">
        <div style="position: absolute;color:white;z-index: 10">{{state.feature}}</div>

        <div id="cesiumContainer"></div>
    </div>
</template>
  
<script setup>
import * as Cesium from 'cesium';
import { onMounted, reactive } from 'vue';
const state = reactive({
    feature: {
        name: "成都市",
        position: {
            longitude: 1.8113849254146581,
            latitude: 0.5375932309446502,
            height: -13.095539730136533
        }
    }
})
onMounted(() => {
    const viewer = new Cesium.Viewer("cesiumContainer", { infoBox: false });
    window.viewer = viewer;//挂载到window上

    const wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
        url: "http://localhost:8090/geoserver/keshan/wms",
        layers: "keshan:sichuan",
        parameters: {
            transparent: true, //务必设为true。否则不显示底图
            format: "image/png",
            srs: "EPSG:4326",
        },
    });
    viewer.imageryLayers.addImageryProvider(wmsImageryProvider);

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(async function (event) {
        viewer.selectedEntity = undefined;
        var pickRay = viewer.camera.getPickRay(event.position);
        var featuresPromise = await viewer.imageryLayers.pickImageryLayerFeatures(pickRay, viewer.scene);

        state.feature.position = featuresPromise[0].position
        state.feature.name = featuresPromise[0].name

    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

})
</script>