完整教程：分享一个基于服务端地图服务裁剪的方法

概述

需求大致是这样的：有一个全国的土地利用数据，要根据用户权限实现从省级、市级和区级不同级别的区划的不同展示，问题是数据没有关联区划数据。针对上述这个问题，我探索出了一种将区划数据发布成一个纯色（全白样式）服务，对需要展示的区域进行筛选后和原服务进行叠加，在通过代码将白色转成透明色的实现方式。

实现思路

大致实现逻辑如下逻辑图。
image.png

实现效果

合并后未抠图

抠图后

叠加到页面后

实现代码

前端使用openlayers调用，代码如下：

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css"
          type="text/css">
        <style>
          html,
          body,
          .map {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
          }
        </style>
      <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
      <title>OpenLayers example</title>
      </head>
      <body>
      <div id="map" class="map"></div>
          <script type="text/javascript">
          // 创建地图
          var map = new ol.Map({
          target: 'map',
          layers: [
          // 底图
          new ol.layer.Tile({
          source: new ol.source.XYZ({
          url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
          })
          }),
          // 使用ImageWMS源调用后端合并的WMS服务
          new ol.layer.Image({
          source: new ol.source.ImageWMS({
          url: 'http://localhost:8888/wms-merged',
          params: {
          'SERVICE': 'WMS',
          'VERSION': '1.1.1',
          'REQUEST': 'GetMap',
          'FORMAT': 'image/png',
          'TRANSPARENT': 'true'
          },
          serverType: 'geoserver',
          crossOrigin: 'anonymous'
          })
          })
          ],
          view: new ol.View({
          center: ol.proj.fromLonLat([104.06, 30.67]),
          zoom: 5
          })
          });
        </script>
      </body>
    </html>

后端服务使用node，实现代码如下：

const express = require('express');
const axios = require('axios');
const { createCanvas, loadImage } = require('canvas');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 8888;
// 启用CORS
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});
// WMS合并服务
app.get('/wms-merged', async (_, res) => {
try {
const {
SERVICE = 'WMS',
VERSION = '1.1.1',
REQUEST = 'GetMap',
FORMAT = 'image/png',
TRANSPARENT = 'true',
WIDTH,
HEIGHT,
SRS = 'EPSG:3857',
BBOX
} = req.query;
if (!WIDTH || !HEIGHT || !BBOX) {
return res.status(400).send('缺少必要的参数: WIDTH, HEIGHT, BBOX');
}
const width = parseInt(WIDTH);
const height = parseInt(HEIGHT);
// 创建Canvas
const canvas = createCanvas(width, height);
const ctx = canvas.getContext('2d');
// 基础WMS URL
const wmsBaseUrl = 'http://localhost:8086/geoserver/lzugis/wms';
// 图层配置
const layers = [
{
name: 'lzugis:base_county',
params: {
SERVICE,
VERSION,
REQUEST,
FORMAT,
TRANSPARENT
}
},
{
name: 'lzugis:base_city',
params: {
SERVICE,
VERSION,
REQUEST,
FORMAT,
TRANSPARENT,
CQL_FILTER: "province <> '甘肃省'"  // 这个参数可以前端传过来
}
}
];
// 构建每个图层的URL
const buildLayerUrl = (layerConfig) => {
const params = new URLSearchParams();
// 添加基础参数
Object.keys(layerConfig.params).forEach(key => {
params.append(key, layerConfig.params[key]);
});
// 添加图层特定参数
params.append('LAYERS', layerConfig.name);
params.append('WIDTH', width.toString());
params.append('HEIGHT', height.toString());
params.append('SRS', SRS);
params.append('BBOX', BBOX);
return `${wmsBaseUrl}?${params.toString()}`;
};
// 加载并绘制两个图层
const imageUrls = layers.map(buildLayerUrl);
const images = await Promise.all(imageUrls.map(url =>
axios.get(url, { responseType: 'arraybuffer' })
.then(response => loadImage(Buffer.from(response.data)))
));
// 绘制第一个图层
ctx.drawImage(images[0], 0, 0, width, height);
// 绘制第二个图层
ctx.drawImage(images[1], 0, 0, width, height);
// 处理白色透明
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
// 检查是否为白色（RGB值都接近255）
if (data[i] > 240 && data[i + 1] > 240 && data[i + 2] > 240) {
// 设置为透明
data[i + 3] = 0;
}
}
ctx.putImageData(imageData, 0, 0);
// 设置响应头并发送图片
res.setHeader('Content-Type', 'image/png');
canvas.pngStream().pipe(res);
} catch (error) {
console.error('WMS合并错误:', error);
res.status(500).send('服务器内部错误');
}
});
// 静态文件服务
app.use(express.static(path.join(__dirname)));
// 启动服务器
app.listen(PORT, () => {
console.log(`服务器运行在 http://localhost:${PORT}`);
});

再加一个Python的版本

from flask import Flask, request, send_file, Response
from flask_cors import CORS
import requests
from PIL import Image
import io
import os
app = Flask(__name__)
CORS(app)
# WMS合并服务
@app.route('/wms-merged', methods=['GET'])
def wms_merged():
  try:
    # 获取查询参数
    SERVICE = request.args.get('SERVICE', 'WMS')
    VERSION = request.args.get('VERSION', '1.1.1')
    REQUEST = request.args.get('REQUEST', 'GetMap')
    FORMAT = request.args.get('FORMAT', 'image/png')
    TRANSPARENT = request.args.get('TRANSPARENT', 'true')
    WIDTH = request.args.get('WIDTH')
    HEIGHT = request.args.get('HEIGHT')
    SRS = request.args.get('SRS', 'EPSG:3857')
    BBOX = request.args.get('BBOX')
    # 验证必要参数
    if not WIDTH or not HEIGHT or not BBOX:
      return '缺少必要的参数: WIDTH, HEIGHT, BBOX', 400
    width = int(WIDTH)
    height = int(HEIGHT)
    # 基础WMS URL
    wms_base_url = 'http://localhost:8086/geoserver/lzugis/wms'
    # 图层配置
    layers = [
      {
        'name': 'lzugis:base_county',
        'params': {
          'SERVICE': SERVICE,
          'VERSION': VERSION,
          'REQUEST': REQUEST,
          'FORMAT': FORMAT,
          'TRANSPARENT': TRANSPARENT
        }
      },
      {
        'name': 'lzugis:base_city',
        'params': {
          'SERVICE': SERVICE,
          'VERSION': VERSION,
          'REQUEST': REQUEST,
          'FORMAT': FORMAT,
          'TRANSPARENT': TRANSPARENT,
          'CQL_FILTER': "province <> '甘肃省'"
        }
      }
    ]
    # 构建每个图层的URL
    def build_layer_url(layer_config):
      params = layer_config['params'].copy()
      params.update({
        'LAYERS': layer_config['name'],
        'WIDTH': str(width),
        'HEIGHT': str(height),
        'SRS': SRS,
        'BBOX': BBOX
      })
      return f"{wms_base_url}?{'&'.join(f'{k}={v}' for k, v in params.items())}"
    # 下载所有图层图片
    image_urls = [build_layer_url(layer) for layer in layers]
    image_buffers = []
    for url in image_urls:
      response = requests.get(url, stream=True)
      response.raise_for_status()
      image_buffers.append(response.content)
    # 使用PIL合并图层
    images = [Image.open(io.BytesIO(buffer)) for buffer in image_buffers]
    # 创建基础图像
    if images:
      composite_image = images[0].convert('RGBA')
      # 叠加其他图层
      for i in range(1, len(images)):
        overlay = images[i].convert('RGBA')
        composite_image = Image.alpha_composite(composite_image, overlay)
      # 处理白色透明
      data = composite_image.getdata()
      new_data = []
      for item in data:
        # 检查是否为白色（RGB值都接近255）
        if item[0] > 240 and item[1] > 240 and item[2] > 240:
          # 设置为透明
          new_data.append((255, 255, 255, 0))
        else:
          new_data.append(item)
      composite_image.putdata(new_data)
      # 将图像保存到字节流
      img_byte_arr = io.BytesIO()
      composite_image.save(img_byte_arr, format='PNG')
      img_byte_arr.seek(0)
      # 返回图像响应
      return send_file(img_byte_arr, mimetype='image/png')
    else:
      return '没有可用的图像数据', 500
  except Exception as e:
    print(f'WMS合并错误: {e}')
    return '服务器内部错误', 500
if __name__ == '__main__':
  port = int(os.environ.get('PORT', 8888))
  app.run(host='0.0.0.0', port=port, debug=True)
posted on 2025-12-10 21:29  ljbguanli  阅读(2)  评论(0)    收藏  举报

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3