(Lưu ý: Vui lòng không bật DevTools khi đang truy cập trang https://quyhoachvietnam.com.vn nếu không muốn bị redirect khỏi hành tinh này. Hệ thống khá “khó tính”, nhận diện được cả giả lập.)
Cái nền: Leaflet + MapLibre GL – Bộ đôi không ai dạy bạn kết hợp**
Khi bạn tìm kiếm WebGIS, bạn sẽ được chào đón bởi những cái tên như Leaflet, Mapbox, hoặc nếu bạn có túi tiền sâu như Thanos thì... Esri.
Còn tôi?
Tôi chọn Leaflet vì nó nhỏ gọn, dễ hiểu, và đơn giản đến mức tôi cảm thấy mình thông minh khi đọc source của nó. Tôi chọn MapLibre GL vì tôi cần render bản đồ JSON-style giống Mapbox mà không tốn phí. Nhưng bạn biết điều hài hước không?
Leaflet MapLibre GL Plugin chỉ cho phép bạn render một lớp duy nhất.
Và tôi? Tôi cần nhiều lớp JSON style, chạy độc lập, đồng bộ zoom, pan, pitch, bearing, resize... Tôi cần nó hoạt động như một layer đích thực. Vậy là tôi ngồi gõ lại plugin gốc, thêm vào hệ thống quản lý pane, resize thông minh, đồng bộ trạng thái zoom/bearing với jumpTo thay vì easeTo.
🎁 Đây là đoạn code L.maplibreGL() mình viết lại để MapLibre GL hiển thị nhiều lớp trên Leaflet như thật:
(function (root, factory) { if (typeof define === 'function' && define.amd) { define(['leaflet', 'maplibre-gl'], factory); } else if (typeof exports === 'object') { module.exports = factory(require('leaflet'), require('../source/maplibre-gl')); } else { root.returnExports = factory(root.L, root.maplibregl); }
}(typeof globalThis !== 'undefined' ? globalThis : this || self, function (L, maplibregl) { const PaneManager = { getPaneName: function (map, options) { return map.getPane(options.pane) ? options.pane : 'overlayPane'; }, addPane: function (map, container, paneName) { map.getPane(paneName).appendChild(container); }, removePane: function (map, container, paneName) { const pane = map.getPane(paneName); if (pane && container.parentNode === pane) { pane.removeChild(container); } } }; // Nếu cần debounce cho resize (có thể giữ lại nếu thấy cần) function debounce(func, wait, context) { let timeout; return function () { const later = () => { timeout = null; func.apply(context, arguments); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } class MaplibreGLLayer extends L.Layer { constructor(options = {}) { super(); L.setOptions(this, options); // Sử dụng throttle cho _update nếu updateWhileInteracting được bật this._throttledUpdate = L.Util.throttle(this._update.bind(this), this.options.updateInterval || 64); this._debouncedResize = debounce(this._resize.bind(this), this.options.updateInterval || 64); this._zoomStart = this._zoomStart.bind(this); this._zoomEnd = this._zoomEnd.bind(this); this._zooming = false; this._isUpdating = false; // Lưu trạng thái trước để giảm các cập nhật không cần thiết this._lastState = {}; } _initContainer() { this._container = L.DomUtil.create('div', 'leaflet-gl-layer'); const size = this.getSize(); const offset = this._map.getSize().multiplyBy(this.options.padding || 0); this._container.style.width = `${size.x}px`; this._container.style.height = `${size.y}px`; this._container.style.position = 'absolute'; this._container.style.top = '0'; this._container.style.left = '0'; // Vì chỉ dùng để hiển thị JSON style, không cần tương tác trực tiếp trên GL canvas this._container.style.pointerEvents = 'none'; this._container.style.zIndex = this.options.zIndex || 1; const topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset); L.DomUtil.setPosition(this._container, { x: Math.round(topLeft.x), y: Math.round(topLeft.y) }); } _initGL() { const center = this._map.getCenter(); const options = Object.assign({}, this.options, { container: this._container, center: [center.lng, center.lat], zoom: this._map.getZoom() - 1, attributionControl: false, interactive: false, // Đã disable tương tác tại đây trackResize: false }); this._glMap = new maplibregl.Map(options); // Cho phép render toàn bộ (không giới hạn lat) this._glMap.transform.latRange = null; this._glMap.transform.maxValidLatitude = Infinity; // Update một lần ngay sau khi load để chắc chắn đồng bộ Leaflet this._glMap.once('load', () => { this._update(); }); const canvas = this.getCanvas(); L.DomUtil.addClass(canvas, 'leaflet-image-layer leaflet-zoom-animated'); if (this.options.className) { L.DomUtil.addClass(canvas, this.options.className); } } onAdd(map) { this._map = map; if (!this._container) { this._initContainer(); } const paneName = PaneManager.getPaneName(map, this.options); PaneManager.addPane(map, this._container, paneName); this._initGL(); this._offset = this._map.containerPointToLayerPoint([0, 0]); // Nếu updateWhileInteracting được bật, lắng nghe sự kiện move if (this.options.updateWhileInteracting) { this._map.on('move', this._throttledUpdate, this); } // Luôn cập nhật sau khi di chuyển xong this._map.on('moveend', this._update, this); this._map.on('zoomstart', this._zoomStart, this); this._map.on('zoomend', this._zoomEnd, this); this._map.on('resize', this._debouncedResize, this); // Chỉ dùng maplibre để hiển thị JSON style, nên chỉ set style một lần this._glMap.setStyle(this.options.style); this._update(); this._updateOpacity(); } onRemove(map) { const paneName = PaneManager.getPaneName(map, this.options); PaneManager.removePane(map, this._container, paneName); if (this.options.updateWhileInteracting) { this._map.off('move', this._throttledUpdate, this); } this._map.off('moveend', this._update, this); this._map.off('zoomstart', this._zoomStart, this); this._map.off('zoomend', this._zoomEnd, this); this._map.off('resize', this._debouncedResize, this); if (this._glMap) { this._glMap.remove(); this._glMap = null; } this._map = null; } _zoomStart() { if (!this._glMap) return; this._zooming = true; this._glMap.stop(); } _zoomEnd() { this._zooming = false; this._update(); } _resize() { this._update(); } getEvents() { const events = { moveend: this._update, zoomstart: this._zoomStart, zoomend: this._zoomEnd, resize: this._debouncedResize }; if (this.options.updateWhileInteracting) { events.move = this._throttledUpdate; } return events; } getMaplibreMap() { return this._glMap; } getCanvas() { return this._glMap.getCanvas(); } getSize() { if (!this._map) { return new L.Point(0, 0); } const mapSize = this._map.getSize(); // Nếu không cần padding lớn, bạn có thể thiết lập padding = 0 return mapSize.multiplyBy(1 + (this.options.padding || 0) * 2); } getBounds() { if (!this._map) { return L.latLngBounds(); } const halfSize = this.getSize().multiplyBy(0.5); const center = this._map.latLngToContainerPoint(this._map.getCenter()); return L.latLngBounds( this._map.containerPointToLatLng(center.subtract(halfSize)), this._map.containerPointToLatLng(center.add(halfSize)) ); } getContainer() { return this._container; } setOpacity(opacity) { this.options.opacity = opacity; this._updateOpacity(); } _updateOpacity() { if (this._container) { this._container.style.opacity = this.options.opacity; } } _update() { if (!this._glMap || !this._map || this._zooming) return; // Lấy trạng thái hiện tại của map const center = this._map.getCenter(); const zoom = this._map.getZoom() - 1; const bearing = (this._map.getBearing) ? this._map.getBearing() : 0; const pitch = (this._map.getPitch) ? this._map.getPitch() : 0; // Nếu trạng thái không thay đổi đáng kể thì không cập nhật lại if (this._lastState.center && center.equals(this._lastState.center) && Math.abs(zoom - this._lastState.zoom) < 0.001 && Math.abs(bearing - this._lastState.bearing) < 0.001 && Math.abs(pitch - this._lastState.pitch) < 0.001) { return; } this._lastState = { center, zoom, bearing, pitch }; // Sử dụng jumpTo thay vì easeTo vì chỉ cần cập nhật tức thì this._glMap.jumpTo({ center: [center.lng, center.lat], zoom: zoom, bearing: bearing, pitch: pitch }); const size = this.getSize(); const container = this._container; const offset = this._map.getSize().multiplyBy(this.options.padding || 0); const topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset); L.DomUtil.setPosition(container, { x: Math.round(topLeft.x), y: Math.round(topLeft.y) }); // Kiểm tra kích thước canvas, resize nếu cần if (this.getCanvas().width !== size.x || this.getCanvas().height !== size.y) { container.style.width = `${size.x}px`; container.style.height = `${size.y}px`; this._glMap.resize(); } else { this._glMap.triggerRepaint(); } } } // Đơn giản hóa việc khởi tạo layer: chỉ dùng để hiển thị JSON style từ Maplibre L.maplibreGL = function (options) { return new MaplibreGLLayer(options); }; return L.maplibreGL;
}));
Tôi bắt đầu chống DevTools như cách nông dân chống hạn – bằng tay, từng chút một
Thời điểm đó, tôi chưa viết được Worker, chưa hiểu OffscreenCanvas, nhưng tôi biết một điều:
"Code của mình mà để thiên hạ xem được là bóp cổ chim ưng từ trong trứng."
Vậy là tôi bật keydown:
function isDeveloperToolsShortcut(e) { const isF12 = e.key === "F12"; const isCtrlShiftKeyCombo = (e.ctrlKey || e.metaKey) && e.shiftKey && ["I", "J", "C"].includes(e.key); const isCtrlU = (e.ctrlKey || e.metaKey) && e.keyCode === 85; return isF12 || isCtrlShiftKeyCombo || isCtrlU;
} document.addEventListener("keydown", function (e) { if (isDeveloperToolsShortcut(e)) { e.preventDefault(); }
});
Rồi tôi khoá chuột phải cho chắc:
document.addEventListener("contextmenu", function (e) { if (!isMobileDevice() && navigator.platform.includes("Win")) { e.preventDefault(); }
});
Và sau đó là "tuyệt kỹ đo size cửa sổ":
setInterval(function () { if (!isMobileDevice()) { const isOpen = window.outerWidth - window.innerWidth > 160; if (isOpen && !devToolsOpen) { document.body.innerHTML = "<h1>Phát hiện mở Developer Tools. Trang đã bị xóa.</h1>"; } }
}, 1000);
Tôi không ngại chia sẻ đoạn này. Vì giờ đây nó đã là lịch sử. Giống như việc bạn từng chống trộm bằng dây kẽm gai, dù biết trộm có drone.
Phần sau sẽ là...
🔐 Tôi tự dựng OAuth Server chỉ với Node.js Không Firebase, không Auth0, không copy-paste từ StackOverflow. Một hệ thống xác thực tự chế, hoạt động độc lập, có thể tích hợp nhiều ứng dụng – từ WebGIS đến mobile app.
📱 Tạo cổng xác thực OTP từ một... module modem SIM từ shopee Câu chuyện nghe như đùa: tôi tự chế linh kiện nhận SMS để gửi OTP – vì tôi muốn kiểm soát toàn bộ hạ tầng xác thực từ đầu đến cuối.
📸 Endpoint tạo QR Code để đăng nhập, như Zalo nhưng là hàng… DIY Một tính năng tôi muốn có từ đầu, và cuối cùng đã làm được sau vài tuần vật lộn giữa QR encode, session token và... các cơn đau đầu.
💥 Và nếu bạn theo dõi đến cuối cùng… Tôi sẽ chia sẻ tuyệt kỹ chống DevTools, chống inspect, chống bot, chống giả lập thiết bị cực đỉnh, cùng vài “chiêu thức đặc biệt” mà tôi đã âm thầm phát triển trong suốt hơn một năm.
(Cảnh báo: Nếu bạn lỡ bật DevTools khi vào ViQy Maps trước khi đọc đến bài "Tuyệt kỹ chống DevTools"… bạn có thể không bao giờ đến được bài đó.)
ViQy Maps không phải bản đồ mạnh nhất, nhưng là bản đồ tôi tự build từng pixel, debug từng đêm, và chống devtool từng... dòng keydown.
To be continued...