GeoServer发布WMS地图服务并在腾讯地图中调用

用户261021565541
219 阅读3分钟

发布WMS服务

关于wms服务的发布可以参考这个链接：

GeoServer发布地图服务（WMS、WFS） - charlee44 - 博客园 (cnblogs.com)

注意点：我使用的数据是EPSG:4326坐标系下的，腾讯地图是EPSG:3857坐标下，需要进行转换，在geoserver中本机SRS与定义SRS都设置为EPSG:4326即可，我之前将定义SRS设置为了EPSG:3857,导致在调用GetMap请求时并没有进行坐标系转换，需要注意

image.png

wms发布完成后可以选择格式进行预览：

image.png

这是请求的url：http://localhost:8080/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger%3Agiant_polygon&bbox=-180.0%2C-90.0%2C180.0%2C90.0&width=768&height=384&srs=EPSG%3A4326&styles=&format=image%2Fpng

腾讯地图调用wms服务

创建TMap.WMSLayer实例可以添加wms图层JavaScript API | 腾讯位置服务 (qq.com)

image.png

示例链接：WMS标准图层 | 腾讯位置服务 (qq.com)

注意点：

  • url不需要拼接参数，以上面的示例url，此处只需填写http://localhost:8080/geoserver/tiger/wms 剩余的参数会自动拼接
  • params参数的layers是图层的名称，version可以从上面的url中获取，如这里是1.1.0

image.png

最终拼接的url为： http://localhost:8080/geoserver/changan/wms?REQUEST=GetMap&SERVICE=WMS&layers=changan:fence&version=1.1.0&CRS=EPSG:3857&WIDTH=256&HEIGHT=256&FORMAT=image/png&TRANSPARENT=true&BBOX=11886262.696024643,3454953.402229614,11887485.688379416,3456176.3945843857

1716876930833.png

1716876955039.png

最终结果：

绿色图层为发布的wms服务

1716877325679.png

调用GetFeatureInfo请求

这里我遇到的需求是点击wms图层时，需要获取feature的信息，这就需要进行GetFeatureInfo请求

WMS 1.1.1定义了 GetCapabilities，GetMap，GetFeatureInfo 三个操作（operation），其中 GetFeatureInfo 是可选操作：WMS 1.1.1 (supermap.com.cn)

  • GetCapabitities，返回服务级元数据
  • GetMap，返回地理空间参数和大小已明确定义的地图图像
  • GetFeatureInfo，返回显示在地图上的某些特殊要素（feature）的信息

GetFeatureInfo的请求参数如下表所示： image.png

重点：这里的X和Y指的是像素坐标，如上面的拼接后的url所示，这里的format是png格式，像素坐标就是点击位置在图片中的坐标（原点在左上角），地图点击事件获取的是EPSG:4326坐标系下的经纬度，需要将其转换成图片的像素坐标

经纬度可由以下计算转换为像素坐标：

function latLngToPixel(lat, lng, mapWidth, mapHeight, mapBbox) {
    // 获取地图范围
    var minLng = mapBbox[0];
    var minLat = mapBbox[1];
    var maxLng = mapBbox[2];
    var maxLat = mapBbox[3];
    
    // 计算经度在地图上的比例
    var xPercent = (lng - minLng) / (maxLng - minLng);
    
    // 计算纬度在地图上的比例
    var yPercent = 1 - ((lat - minLat) / (maxLat - minLat)); // Web Mercator投影纬度方向与地图像素方向相反，所以需要取1减
    
    // 将比例映射到地图的像素尺寸上
    var xPixel = Math.floor(xPercent * mapWidth);
    var yPixel = Math.floor(yPercent * mapHeight);
    
    return { x: xPixel, y: yPixel };
}

// 示例参数
var mapWidth = 768;
var mapHeight = 659;
var mapBbox = [106.7486890807749, 29.636845712472905, 106.7645229344778, 29.650447536439874];
var lat = 29.642;
var lng = 106.756;

// 转换经纬度为像素坐标
var pixelCoords = latLngToPixel(lat, lng, mapWidth, mapHeight, mapBbox);
console.log("点击事件像素坐标：(" + pixelCoords.x + ", " + pixelCoords.y + ")");

说明：

有了X和Y像素坐标，就可以去调用GetFeatureInfo请求了：

let url = `http://localhost:8080/geoserver/changan/wms?service=WMS&version=1.1.0&request=GetFeatureInfo&layers=changan%3Afence&query_layers=changan%3Afence&bbox=106.7486890807749%2C29.636845712472905%2C106.7645229344778%2C29.650447536439874&width=768&height=659&srs=EPSG%3A4326&styles=&format=image%2Fpng&x=${pixelCoords.x}&y=${pixelCoords.y}&info_format=application/json`
avatar
文章
阅读
粉丝