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

已于 2023-10-28 23:21:57 修改
阅读量400 收藏 1
点赞数
分类专栏： WebGIS 文章标签： 地图水印 栅格瓦片 矢量瓦片 OpenLayer MapBox
于 2023-10-28 23:09:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40953393/article/details/134097727
版权

水印技术

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

  在探索过程中, 参考了《前端水印生成方案(网页水印+图片水印)》、《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 base64Url = canvas.toDataURL();
        console.log(base64Url);
        const watermarkDiv = document.createElement("div");
        watermarkDiv.setAttribute('style', `
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          z-index:${zIndex};
          pointer-events:none;
          background-repeat:repeat;
          background-image:url('${base64Url}')`);

        container.style.position = 'relative';
        container.insertBefore(watermarkDiv, container.firstChild);


      };
      window.__canvasWM = __canvasWM;
    })();
    //调用水印
    __canvasWM({
      content: '水印'
    })
  </script>
  <script>
    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        zoom: 4,
        center: ol.proj.transform([110, 39], "EPSG:4326", "EPSG:3857")
      })
    });
  </script>
</body>
</html>

效果如下:
在这里插入图片描述

方案二: 切片传回前端进行二次处理（栅格瓦片、矢量瓦片均适用）

  此方案是使用 tile 切片的方式, 单独创建一个水印, 运用瓦片URL的回调函数返回base64的水印图片实现, 其中水印图片可以提前制作好转为base64或者使用Canvas动态制动水印, 需要注意的是水印图片宽高需要为512X512.这里实现了Openlayer和Mapbox的水印图层添加.

Openlayer实现水印图层

  Openlayer使用的函数是tileUrlFunction, 相应的官方文档说明
在这里插入图片描述

代码如下:

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

<head>
    <meta charset="UTF-8">
    <title>Openlayer地图水印</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/openlayers/7.5.2/ol.min.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/7.5.2/dist/ol.min.js"></script>
    <script>
        //创建Canvas
        function createCanvasContext2D(opt_width, opt_height) {
            const canvas = (document.createElement('canvas'));
            if (opt_width) {
                canvas.width = opt_width;
            }
            if (opt_height) {
                canvas.height = opt_height;
            }
            return (canvas.getContext('2d'));
        }

        //水印瓦片图层
        var tiles = new ol.layer.Tile({
            source: new ol.source.XYZ({
                tileUrlFunction: function (t) {
                    var zoom = t[0];
                    var tile = {
                        x: t[1],
                        y: -(t[2] + 1)
                    }
                    var tileSize = [512, 512];
                    const half = tileSize[0] / 2;
                    const lineheight = 48;
                    var tileSize = [512, 512];
                    //创建Canvas
                    const context = createCanvasContext2D(tileSize[0], tileSize[0]);
                    //填充样式
                    context.fillStyle = 'rgba(184, 184, 184, 0.8)';
                    //文字位置
                    context.textAlign = 'center';
                    context.textBaseline = 'middle';
                    //文字字体大小
                    context.font = '48px microsoft yahei';
                    //倾斜角度
                    context.rotate(Math.PI / 180 * 30);
                    //文字内容
                    context.fillText(`仅供参考`, half, half);
                    //返回base64
                    return context.canvas.toDataURL();
                },
                extent: ol.proj.transformExtent([-180, -85, 180, 85], "EPSG:4326", "EPSG:3857")
            })
        });

        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                //添加水印图层
                tiles
            ],
            view: new ol.View({
                zoom: 4,
                center: ol.proj.transform([110, 39], "EPSG:4326", "EPSG:3857")//ol.proj.fromLonLat([110, 39])
            })
        });
    </script>
</body>
</html>

最终效果:
在这里插入图片描述

MapBox实现水印图层

  Mapbox使用的函数是transformRequest, 相应的官方文档说明
在这里插入图片描述

代码如下:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>MapBox地图加水印</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    mapboxgl.accessToken = '你的key';
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      //回调函数
      transformRequest: function transformRequest(url, resourceType) {
        if (resourceType === 'Tile' && url.startsWith('http://ip:watermark')) {
          //数据源类型为 Tile 且瓦片地址为 http://ip:watermark 时 对瓦片url进行修改
          return {
            //TODO: base64 或 URL的水印图片 
            //TODO: 图片大小可以调节疏密程度 256X256、512X512等其他正方形图片 
            url: ''
          };
        }
      }
    });
    //TODO: 地图加载成功事件
    map.on('load', () => {
      //TODO: 添加水印数据源
      map.addSource('watermark', {
        type: 'raster',
        //随便给一个瓦片地址能不能加载都无所谓
        tiles: ['http://ip:watermark/{x}/{y}/{z}.png'],
        //TODO:  设置瓦片大小 256 512可选 可以调节疏密程度
        tileSize: 512,
        minzoom: 0,
        maxzoom: 24
      });
      //TODO: 添加水印图层
      map.addLayer({
        id: "watermark",
        type: "raster",
        source: "watermark",
        //TODO: 设置最小显示层级
        minzoom: 0,
        //TODO: 设置最大显示层级
        maxzoom: 24,
        //TODO: 设置透明度
        paint: { "raster-opacity": 0.5 },
        //TODO: 设置图层垂直索引值 永远保持最上面
        zIndex: 999999
      });
    });
    map.addControl(new mapboxgl.NavigationControl());
  </script>
</body>

</html>

最终效果:
在这里插入图片描述

其他说明:

1. MapBox还可通过json样式文件实现,

需要将水印图片制作到script精灵图里, Mapbox精灵图的生成可以参考这篇, 再创建一个透明的背景设置图标, 同样的水印图片大小为512X512, style.json实例如下:

{
  "version": 8,
  "name": "Watermark Style",
  "metadata": {"maputnik:renderer": "mbgljs"},
  "sources": {},
  "sprite": "",
  "glyphs": " ",
  "layers": [
    //其他图层
    ...
    //水印图层
    {
      "id": "watermark",
      "type": "background",
      "paint": {
        "background-color": "rgba(255, 255, 255, 1)",
        "background-pattern": "watermark",
        "background-opacity": 0.5
      }
    }
  ],
  "id": "Watermark"
}

效果如下:
在这里插入图片描述

2. 水印密集程度控制

水印图片大小: 因为地图瓦片大小为512X512,不同大小的图片会有影响, 推荐512X512, 也可以尝试256X256或者1024X1024等其他大小的水印图片
在这里插入图片描述

水印占比: 水印图片中间文字或logo在整图中的占比情况也会对水印密度有影响
在这里插入图片描述

地图缩放级别: 由于水印加载是在瓦片上进行的, 地图等级越小, 瓦片越密集, 导致水印显示更密集, 可以通过控制水印图层的最大缩放比例调节水印密度

方案三: 数据层实现（主要针对栅格瓦片）

在生成栅格切片时, 对栅格切片加上水印, 实际上就是对图片和水印图片的叠加处理, 可以切片完成后写个批处理程序, 对所有切片图片进行水印叠加处理, 目前尚未具体实施.

DXnima
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
WebGL Up and Running 无水印pdf
10-06
WebGL Up and Running 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除
必应地图卫星影像瓦片（0-10级）
03-13
必应地图卫星影像瓦片（0-10级），满足日常开发使用
【WebGL编程指南】00-使用canvas绘制2d矩形
qq_47654010的博客
07-31 279
这里：【WebGL之巅】00-使用canvas绘制2d矩形
WebGIS(一):高德地图API-显示地图
weixin_46441425的博客
09-04 1107
WebGIS
WebGIS开发绘制地图标注
gis_witch的博客
01-07 1747
本文主要介绍如何使用天地图的世界地图添加标注的功能，示例需要使用 【include-openlayers-local.js】 开发库实现。
百度矢量瓦片请求URL解析
Cougars的博客
08-31 752
研究百度矢量瓦片的参数编码算法，可供离线下载矢量瓦片调用。
关于使用X/Y/Z的方式加载地图Tile瓦片的知识总结
热门推荐
欧特GO
07-26 1万+
1、由经纬度计算谷歌卫星地图中瓦片Tile地址x/y/z Google卫星地图是由256x256大小的jpg图片拼接而成，每块图片的URL格式为“http://kh.google.com/kh?v=3&t=trstrq”样。参数v与图片关系不大，主要是参数t起作用，它是“qrst”4个字符排列而成的字符串。为获取某经纬度的URL，就需要把经纬度转化为“qrst”字符串。 Google卫星地图在zoom=1时，全球就为一个256x256的图片，它的中心经纬度为(0,0)，URL为“http://kh.
Openlayers官方示例详解十二之通过XYZ方式加载瓦片地图
不睡觉的怪叔叔的博客
12-19 1万+
目录 一、示例简介 二、代码详解 三、补充 一、示例简介     这个示例展示了通过XYZ格式的URL访问瓦片地图数据，有关XYZ方式加载瓦片地图可以参考这篇文章：万能瓦片加载秘籍。     本示例加载的瓦片地图是Thunderforest的地图数据，Thunderforest的官网地址是：http://www.thunderforest.com/     注意它不是完全免费的开...
腾讯、百度、高德、谷歌、天地图地图瓦片
qq_51424616的博客
11-17 4323
以下是各地图的瓦片地图地址，可以在QGIS中加载，也可以在openlayer或leaflet前端页面中加载。 腾讯、百度、高德，加上谷歌和天地图应该足够用了。 腾讯、高德是GCJ02坐标系，百度是BD09坐标系，谷歌、必应是WGS84坐标系，天地图是CGCS2000坐标系，瓦片地图都是平面墨卡托投影。WGS84和CGCS2000坐标系，近似认为它们相等就可以了。 高德路网： https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z=.
OpenLayers入门，OpenLayers如何加载xyz瓦片图层
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-12 1590
xyz是简单的地图瓦片服务，使用Z为地图缩放级别，使用X和Y对图层图片进行切割编号，URL通常为http://…/Z/X/Y.png，其中Z为缩放级别，X和Y标识图块。甚至可以使用nginx、apache、tomcat、iis等web容器自行使用已有的单图或多图层的瓦片图片搭建简单的xyz服务，只需要确保x、y为编号，z为缩放级别即可在OpenLayers等地图引擎中使用。
地图瓦片知识点.docx
02-08
地图瓦片知识点学习，包括瓦片地图原理、瓦片行列号的换算以及WebGIS中的地图瓦片在Canvas上的拼接显示原理等等
MapInfo Tab地图制作WebGis瓦片地图
12-07
可以切割tab格式的地图，需要安装mapx，生成的是webgis使用的瓦片地图。
WebGIS中瓦片地图关键技术研究
06-09
WebGIS中瓦片地图关键技术研究
WebGIS多级瓦片数据更新机制研究
12-28
WebGIS多级瓦片数据更新机制研究
99-智慧园区数据平台方案.pptx
04-27
99-智慧园区数据平台方案.pptx
node-v12.11.1-x86.msi
最新发布
04-27
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于Springboot+Vue华强北商城二手手机管理系统-毕业源码案例设计.zip
04-27
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。 网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。 关键词：vue；MySQL；SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
Excel模版：工资条模板
04-27
Excel工资条模板是一种预先设计好的电子表格文件，主要用于生成和打印员工的工资单，让员工清楚了解自己的工资组成和扣款详情。模板通常包含了以下几个关键部分： 1. **员工信息区**： - 姓名 - 员工编号/工号 - 部门 - 职位 2. **工资构成区**： - 基本工资 - 岗位工资 - 绩效奖金 - 加班工资 - 其他补贴（如交通补贴、餐补、全勤奖等） - 各项津贴（如高温补贴、取暖费等） - 其他应发收入（如年终奖、提成、福利等） 3. **扣款项目区**： - 社保扣款（养老保险、医疗保险、失业保险、工伤保险、生育保险） - 住房公积金 - 个人所得税 - 其他扣款（如迟到、旷工、违规罚款等） - 预借还款（如有） 4. **工资结算区**： - 应发工资总额 - 扣款总额 - 实发工资 5. **备注栏**： - 用于标注本月工资的特殊情况说明，如请假、调休、加班等情况。 6. **签名栏**： - 供员工确认工资数额无误后签名，也可以
arcgis制作瓦片地图
05-30
1. 准备数据：要制作瓦片地图，首先需要有GIS数据，可以是矢量数据或栅格数据，最好是投影一致的数据。 2. 创建地图文档：使用ArcMap或ArcGIS Pro创建一个新的地图文档，并将准备好的数据添加到地图中。 3. 设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DXnima

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值