跟牛老师一起学WEBGIS——WEBGIS实现（绘制图片）

牛老师讲GIS

发布于 2020-12-08 09:58:31

51200

代码可运行

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

运行总次数：0

代码可运行

概述

前面有两篇文章分别介绍了矢量数据点和线、面的实现，本文讲讲静态图片的绘制和WMS服务的展示。

4.绘制图片

图片的绘制我们分两种：静态图片和WMS服务。

4.1 静态图片

绘制静态图片我们只需要两个参数：图片地址和图片四至。实现代码如下：

/**
 * 绘制静态图片
 * @private
 */
ImageLayer.prototype._drawStaticImage = function () {
    const that = this;
    const extent = that._params.extent;
    const url = that._params.url;
    const pixelMin = that._map2pixel([extent[0], extent[1]]);
    const pixelMax = that._map2pixel([extent[2], extent[3]]);
    const width = Math.abs(pixelMax.x - pixelMin.x);
    const height = Math.abs(pixelMax.y - pixelMin.y);
    const img = new Image();
    img.src = url;
    img.onload = function () {
        that._ctx.drawImage(img, pixelMin.x, pixelMax.y, width, height);
    }
}

实现后效果如下：

4.2绘制WMS服务

一个wms服务的请求应包括以下参数：

{
    SERVICE: 'WMS',
    REQUEST: 'GetMap',
    FORMAT: 'image/png',
    TRANSPARENT: true,
    LAYERS: that._params.layer,
    SRS: 'EPSG:3857',
    WIDTH: width,
    HEIGHT: height,
    BBOX: projMin.concat(projMax).join(',')
}

一个完整的wms的请求地址如：http://localhost:8081/geoserver/lzugis/wms?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=lzugis:china_prov_people&SRS=EPSG:3857&WIDTH=1920&HEIGHT=969&BBOX=5721121.240344884,1414403.022565099,17727742.969104737,7473994.926298538。wms的实现方式如下：

/**
 * 绘制wms服务
 * @private
 */
ImageLayer.prototype._drawWmsImage = function () {
    const that = this;
    let extent = that._map.getBounds().toArray();
    extent = extent[0].concat(extent[1]);
    // 超范围处理
    const xmin = extent[0] < -180 ? -180 : extent[0];
    const ymin = extent[1] < -90 ? -90 : extent[1];
    const xmax = extent[2] > 180 ? 180 : extent[2];
    const ymax = extent[3] > 90 ? 90 : extent[3];
    const pixelMin = that._map2pixel([xmin, ymin]);
    const pixelMax = that._map2pixel([xmax, ymax]);
    const width = Math.round(Math.abs(pixelMax.x - pixelMin.x));
    const height = Math.round(Math.abs(pixelMax.y - pixelMin.y));
    const projMin = turf.projection.toMercator([xmin, ymin]);
    const projMax = turf.projection.toMercator([xmax, ymax]);
    const wmsParams = {
        SERVICE: 'WMS',
        REQUEST: 'GetMap',
        FORMAT: 'image/png',
        TRANSPARENT: true,
        LAYERS: that._params.layer,
        SRS: 'EPSG:3857',
        WIDTH: width,
        HEIGHT: height,
        BBOX: projMin.concat(projMax).join(',')
    };
    let url = that._params.url;
    for(const key in wmsParams) {
        const join = url.indexOf('wms?') !== -1
            ? '&'
            : '?';
        url += `${join}${key}=${wmsParams[key]}`;
    }
    const img = new Image();
    img.src = url;
    img.setAttribute('crossOrigin', 'anonymous');
    img.onload = function () {
        that._ctx.drawImage(img, pixelMin.x, pixelMax.y, width, height);
    }
}

实现后效果如下：