WebGIS瓦片地图添加水印（矢量瓦片、栅格瓦片）

原创

已于 2023-10-28 23:21:57 修改 · 999 阅读

标签

#地图水印 #栅格瓦片 #矢量瓦片 #OpenLayer #MapBox

于 2023-10-28 23:09:29 首次发布

本文介绍了如何在瓦片地图中添加水印，包括纯前端的HTML/CSS/JavaScript实现、利用OpenLayers和MapboxAPI在切片图层中插入水印，以及通过数据层处理栅格瓦片的水印叠加方法。

水印技术

水印能为收到版权信息产品归属提供有力的证据, 并能够监视被保护数据的传播, 真伪鉴别以及非法拷贝控制等.在现今流行的线上地图同样需要水印技术, 保护地图数据.本文将介绍如何实现瓦片地图水印添加, 包括栅格瓦片、矢量瓦片.

在探索过程中, 参考了《前端水印生成方案(网页水印+图片水印)》、《Openlayer 切片图层添加水印》

在这里插入图片描述

实现方案

方案一: 纯前端实现

通过给HTML的标签设置水印, 在当前视图最前添加canvas, 代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>map demo</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.css" rel="stylesheet">
</head>
<style>
  html,
  body,
  #map {
     
     
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>

<body>
  <div id="map"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.js"></script>
  <script>
    (function () {
     
     
      // canvas 实现 watermark
      function __canvasWM({
     
     
        // 使用 ES6 的函数默认值方式设置参数的默认取值
        // 具体参见 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters
        container = document.body,
        width = '256px',
        height = '256px',
        textAlign = 'center',
        textBaseline = 'middle',
        font = "20px microsoft yahei",
        fillStyle = 'rgba(184, 184, 184, 0.8)',
        content = '仅供参考',
        rotate = '30',
        zIndex = 1000
      } = {
     
     }) {
     
     
        var args = arguments[0];
        var canvas = document.createElement('canvas');

        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);
        var ctx = canvas.getContext("2d");

        ctx.textAlign = textAlign;
        ctx.textBaseline = textBaseline;
        ctx.font = font;
        ctx.fillStyle = fillStyle;
        ctx.rotate(Math.PI / 180 * rotate);
        ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

        var</