当前位置：首页 > news >正文

Vue.js2+Cesium1.103.0 十三、通过经纬度查询 GeoServer 发布的 wms 服务下的 feature 对象的相关信息

news 2025/8/18 1:20:59

Vue.js2+Cesium1.103.0 十三、通过经纬度查询 GeoServer 发布的 wms 服务下的 feature 对象的相关信息

Demo

<template><divid="cesium-container"style="width: 100%; height: 100%;"><div style="position: absolute;z-index: 999;bottom: 0;left: 0;background: #fff;width: 100%;padding: 20px;box-sizing: border-box;"><div> {{ position }}</div><div>{{ info }}</div></div></div>
</template><script>
/* eslint-disable no-undef */
import axios from 'axios'
export default {data() {return {position: '',info: ''}},computed: {},watch: {},mounted() {const _this = thiswindow.$InitMap()const imageryLayer = new Cesium.ImageryLayer(new Cesium.WebMapServiceImageryProvider({url: 'http://openlayers.vip/geoserver/cite/wms',layers: 'cite:2000',parameters: {transparent: true,format: 'image/png',srs: 'EPSG:4326'},tileWidth: 1024,tileHeight: 1024}))viewer.imageryLayers.add(imageryLayer)viewer.camera.flyTo({destination: Cesium.Rectangle.fromDegrees(114.4491417723215,38.96451275547338,118.24157311104125,41.29160446951736)})/*** @description: 根据用户点击的坐标计算 bbox 参数* @param {*} latlng* @param {*} zoom* @return {*}*/function PositionToBbox(latlng, zoom) {const box = getZoomBbox(zoom)const boxMin = {lat: latlng.lat - box,lng: latlng.lng - box}const boxMax = {lat: latlng.lat + box,lng: latlng.lng + box}return `${boxMin.lng},${boxMin.lat},${boxMax.lng},${boxMax.lat}`}/*** @description: 计算用户坐标`应该减去的差值* @param {*} zoom* @return {*}*/function getZoomBbox(zoom) {const level0 = 142.03125let box = level0 / Math.pow(2, zoom)box = box / 2return box}function geoServerQuery(data) {return axios({method: 'get',url: `http://openlayers.vip/geoserver/cite/wms`,headers: {// Authorization: "",},params: data}).then(res => {if (res && res.data) {return res.data}}).catch(() => {return false})}// 鼠标事件const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)handler.setInputAction(function (movement) {const earthPosition = viewer.camera.pickEllipsoid(movement.endPosition,viewer.scene.globe.ellipsoid)const cartographic = Cesium.Cartographic.fromCartesian(earthPosition,viewer.scene.globe.ellipsoid,new Cesium.Cartographic())const longitude = Cesium.Math.toDegrees(cartographic.longitude)const latitude = Cesium.Math.toDegrees(cartographic.latitude)if (longitude && latitude) {console.log('.................', longitude, latitude)_this.position = `${longitude}, ${latitude}`geoServerQuery({service: 'wms',version: '1.1.1',request: 'getfeatureinfo',format: 'image/png',transparent: true,query_layers: 'cite:2000',layers: 'cite:2000',exceptions: 'application/vnd.ogc.se_inimage',info_format: 'application/json',feature_count: 50,x: 50,y: 50,srs: 'epsg:4490',width: 101,height: 101,bbox: PositionToBbox({lng: longitude,lat: latitude},24)}).then(res => {console.log('..............res', res)if (res && res.features && res.features.length > 0) {_this.info = res.features[0].properties} else {_this.info = ''}}).catch(err => {_this.info = ''console.log(err)})}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)},methods: {}
}
</script><style>
</style>

查看全文

http://www.lryc.cn/news/198142.html