openlayers加载geoserver服务

treasurecp

于 2024-08-13 10:33:56 发布

阅读量85

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/treasurecp/article/details/141157376

版权

// 内网服务地址
 let url =
        'http://192.168.1.219:8080/geoserver/shundequ/wms?service=WMS&version=1.1.0&request=GetMap&layers=shundequ%3Aguibanhaihe_20240807&bbox=113.2226552892067%2C22.792173703114972%2C113.34025062438387%2C22.86369185697047&width=768&height=467&srs=EPSG%3A4326&styles=&format=application/openlayers'
        // 获取 URL 中的参数
        const params = {}
        const urlParts = url.split('?')
        if (urlParts.length > 1) {
          const paramString = urlParts[1]
          const paramPairs = paramString.split('&')
          paramPairs.forEach((pair) => {
            const [key, value] = pair.split('=')
            params[key] = decodeURIComponent(value)
          })
        }
        console.log('params:', params)
        // 获取地图范围
        let bbox = params.bbox.split(',').map((item) => Number(item))
        url = url.substring(0, url.indexOf('?'))
        // 设置透明背景 'image/png'，不透明背景 'image/jpeg'
        params.format = 'image/png'
        const wmsLayer = new TileLayer({
          source: new TileWMS({
            url,
            params,
            serverType: 'geoserver',
            crossOrigin: 'anonymous', // 如果需要跨域请求
          }),
        })

        let map = new Map({
          target: 'map-container',
          layers: [wmsLayer],
          view: new View({
            center: fromLonLat([bbox[0], bbox[1]]),
            zoom: 12,
            enableRotation: true,
          }),
        })
        // 定位
        const layerExtent = transformExtent([bbox[0], bbox[1], bbox[2], bbox[3]], 'EPSG:4326', 'EPSG:3857')
        map.getView().fit(layerExtent, { duration: 1000 })