add watermark demo

maptalks · Oct 16, 2024 · c8d934a · c8d934a
1 parent daef719
commit c8d934a
Show file tree

Hide file tree

Showing 2 changed files with 134 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,7 @@
 * [custom SpatialReference](https://deyihu.github.io/maptalks.tileclip/demo/custom-sp.html)
 * [update mask](https://deyihu.github.io/maptalks.tileclip/demo/update-mask.html)
 * [identify projection](https://deyihu.github.io/maptalks.tileclip/demo/identify.html)
+* [water mark](https://deyihu.github.io/maptalks.tileclip/demo/watermark.html)
 * [leaflet demo](https://deyihu.github.io/maptalks.tileclip/demo/leaflet.html)
 
 ## Install

diff --git a/demo/watermark.html b/demo/watermark.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>User Interactions - Draw tool to draw geometries</title>
+<style type="text/css">
+    html,
+    body {
+        margin: 0px;
+        height: 100%;
+        width: 100%
+    }
+
+    .container {
+        width: 100%;
+        height: 100%
+    }
+</style>
+<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.css' />
+<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.js'></script>
+<script type='text/javascript' src='https://unpkg.com/maptalks.tileclip@latest/dist/maptalks.tileclip.js'></script>
+
+<body>
+    <div id="map" class="container"></div>
+    <script>
+
+        const canvas = new OffscreenCanvas(1, 1);
+
+        function clearCanvas(ctx) {
+            const canvas = ctx.canvas;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+
+        }
+
+        function drawWaterMark(ctx) {
+            const canvas = ctx.canvas;
+            //water mark
+            ctx.font = "bold 28px serif";
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+
+            ctx.fillStyle = 'gray';
+
+            ctx.save();
+            const x = canvas.width / 2, y = canvas.height / 2;
+            ctx.translate(x, y);
+            ctx.rotate(45 * Math.PI / 180);
+            ctx.fillText('deyihu', 0, 0);
+            ctx.restore();
+        }
+
+        const tileActor = maptalks.getTileActor();
+        const maskId = '青浦区';
+        const baseLayer = new maptalks.TileLayer('base', {
+            // debug: true,
+            urlTemplate: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
+            subdomains: ["a", "b", "c", "d"],
+            // bufferPixel: 1
+        })
+
+        baseLayer.on('renderercreate', function (e) {
+            //load tile image
+            //   img(Image): an Image object
+            //   url(String): the url of the tile
+            e.renderer.loadTileBitmap = function (url, tile, callback) {
+                tileActor.getTile({ url: maptalks.Util.getAbsoluteURL(url) }).then(imagebitmap => {
+                    tileActor.clipTile({
+                        tile: imagebitmap,
+                        tileBBOX: baseLayer._getTileBBox(tile),
+                        projection: baseLayer.getProjection().code,
+                        tileSize: baseLayer.getTileSize().width,
+                        maskId,
+                    }).then(image => {
+                        const tileSize = baseLayer.getTileSize().width;
+                        canvas.width = canvas.height = tileSize;
+                        const ctx = canvas.getContext('2d');
+                        clearCanvas(ctx);
+                        ctx.drawImage(image, 0, 0);
+                        drawWaterMark(ctx);
+                        callback(canvas.transferToImageBitmap());
+                    }).catch(error => {
+                        //do some things
+                        console.error(error);
+                    })
+                }).catch(error => {
+                    //do some things
+                    console.error(error);
+                })
+            };
+        });
+
+        var map = new maptalks.Map('map', {
+            "center": [121.65586045, 31.12453538], "zoom": 9.064897200334302, "pitch": 0, "bearing": 0,
+        });
+
+        const sceneConfig = {
+            postProcess: {
+                enable: true,
+                antialias: { enable: true }
+            }
+        };
+        const groupLayer = new maptalks.GroupGLLayer('group', [], { sceneConfig });
+        groupLayer.addTo(map);
+
+        const layer = new maptalks.VectorLayer('layer').addTo(map);
+
+        const symbol = {
+            polygonOpacity: 0,
+            lineColor: 'red'
+        }
+
+        fetch('./青浦区.json').then(res => res.json()).then(geojson => {
+            const polygons = maptalks.GeoJSON.toGeometry(geojson, (geo => {
+                geo.setSymbol(symbol);
+            }));
+            // layer.addGeometry(polygons);
+            map.setView({
+                "center": [121.0903305, 31.1156505], "zoom": 11, "pitch": 0, "bearing": 0
+            })
+            tileActor.injectMask(maskId, geojson.features[0]).then(data => {
+                baseLayer.addTo(groupLayer);
+            }).catch(error => {
+                console.error(error);
+            })
+        })
+
+
+
+    </script>
+</body>
+
+</html>