MapConductorवेक्टर टाइल लेयर
MapLibre फॉर्मेट की वेक्टर स्टाइल (style.json) को ब्राउज़र के भीतर रैस्टर टाइल में रेंडर करके किसी भी मैप प्रोवाइडर पर ओवरले करने योग्य बनाने वाला पैकेज है। Google Maps, MapKit, HERE, ArcGIS, Cesium जैसे मैपों पर भी, जो स्वयं वेक्टर स्टाइल नहीं पढ़ सकते, वही रूप-रंग प्राप्त होता है।
01 · अवलोकन
रेंडरिंग Rust में लिखे रेंडरर का wasm संस्करण है, जो Web Worker के भीतर चलता है। रेंडर किए गए टाइल SDK के लोकल टाइल सर्वर (Service Worker) से सर्व होते हैं और मैप पर एक सामान्य RasterLayer के रूप में जुड़ते हैं। मैप के नज़रिए से यह केवल एक रैस्टर लेयर है। इसलिए यह प्रोवाइडर की परवाह नहीं करता।
लेयर को दो परतों में बाँटकर जोड़ा जाता है: भराई, रेखा और वृत्तों का "ज़मीन", तथा उसके ऊपर की पारदर्शी "लेबल"। फॉन्ट आने पर केवल लेबल वाली परत दोबारा रेंडर होती है, इसलिए अक्षर दिखने के क्षण मैप एक बार गायब नहीं होता। स्टाइल के स्रोत (OpenStreetMap आदि) का एट्रिब्यूशन भी स्वतः जुड़ जाता है।
02 · इंस्टॉलेशन
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-vectortile@mapconductor/js-vectorstyle भी निर्भरता के रूप में साथ में इंस्टॉल हो जाता है। पैकेज केवल ESM है।
टाइल के लिए Service Worker रखना
टाइल /tile-sw.js से सर्व होती हैं। आवश्यकताएँ हीटमैप जैसी ही हैं। @mapconductor/js-sdk-core में शामिल फ़ाइल को ऐप की सार्वजनिक डायरेक्टरी में कॉपी करें।
{
"scripts": {
"postinstall": "cp node_modules/@mapconductor/js-sdk-core/dist/tile-sw.js public/tile-sw.js"
}
}Vite के प्रोडक्शन बिल्ड में, worker को ES मॉड्यूल के रूप में आउटपुट करने की सेटिंग चाहिए (dev सर्वर में आवश्यक नहीं)।
import { defineConfig } from 'vite';
export default defineConfig({
worker: { format: 'es' },
});localhost पर HTTP ठीक है, लेकिन LAN के किसी अन्य डिवाइस से खोलते समय HTTPS चाहिए।03 · मूल उपयोग
किसी भी *MapView के अंदर रखा जा सकता है। style में style.json का URL, उसकी स्ट्रिंग, या पार्स किया गया ऑब्जेक्ट — कोई भी भेजा जा सकता है। नीचे के उदाहरण में Google Maps का अपना नक्शा हटाकर (GoogleMapDesign.None) उसके ऊपर वेक्टर स्टाइल बनाया गया है।
import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';
import { GoogleMapDesign, GoogleMapView2D, useGoogleMapViewState } from '@mapconductor/react-for-googlemaps';
import { VectorTileLayer } from '@mapconductor/react-vectortile';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
const STYLE_URL = 'https://tiles.versatiles.org/assets/styles/colorful/style.json';
export function VectorTileMap() {
const state = useGoogleMapViewState({
apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
mapDesignType: GoogleMapDesign.None,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
return (
<GoogleMapView2D state={state} style={{ height: 480 }}>
<VectorTileLayer style={STYLE_URL} onDiagnostics={(messages) => console.warn(messages)} />
</GoogleMapView2D>
);
}style की तुलना अंदरूनी सामग्री से होती है। समान सामग्री होने पर हर बार नया ऑब्जेक्ट बनाकर भेजने पर भी फिर से रेंडर नहीं होता।
04 · रूप-रंग बदलना
rules में मैप की स्टाइल बदलना में लिखे नियम पास करने पर, रंग बदलना या लेयर छिपाना जैसे बदलाव लागू करके रेंडर होता है। छिपाई गई भूमिकाएँ (इमारतें, लेबल आदि) शुरू से ही रेंडर नहीं होतीं।
import { useMemo } from 'react';
import { buildStyleRules, LayerRole } from '@mapconductor/js-vectorstyle';
import { VectorTileLayer } from '@mapconductor/react-vectortile';
const rules = useMemo(
() => buildStyleRules((r) => {
r.role(LayerRole.building, { visible: false });
r.role(LayerRole.water, { colorFilter: { mix: { color: '#3a7ca5', amount: 0.6 } } });
r.role(LayerRole.label, { opacity: 0.6 });
}),
[],
);
<VectorTileLayer style={STYLE_URL} rules={rules} />नियम या स्टाइल बदलने पर, मेमोरी में मौजूद वेक्टर टाइल को फिर से रेंडर किया जाता है, नेटवर्क पर नहीं जाया जाता। क्योंकि आकार वही रहता है, सिर्फ़ रंगने का तरीका बदलता है। स्लाइडर से रंग बदलने जैसे उपयोग में भी संचार नहीं बढ़ता। rules छोड़ने पर, नियमों का कंपाइलर (wasm) लोड नहीं होता।
05 · बेसमैप के रूप में उपयोग करना
asBasemap लगाने पर, MapLibre・Mapbox・MapTiler में रास्टर न बनाकर, स्टाइल को सीधे नक्शे को भेजकर नक्शे के डिज़ाइन से बदल दिया जाता है। ये तीनों खुद वेक्टर स्टाइल रेंडर कर सकते हैं, इसलिए इस तरह तेज़ और साफ़ होता है। इस स्थिति में opacity काम नहीं करता।
import { MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
import { VectorTileLayer } from '@mapconductor/react-vectortile';
<MapLibreMapView2D state={state}>
<VectorTileLayer style={STYLE_URL} rules={rules} asBasemap />
</MapLibreMapView2D>अन्य प्रोवाइडरों में asBasemap कुछ नहीं बदलता। प्रोवाइडर का अपना नक्शा, ऐप की ओर से None के डिज़ाइन पर सेट करके हटा दें।
06 · मुख्य प्रॉपर्टी
कुंजी (key) वाली टाइल का उपयोग करना
<VectorTileLayer
style="https://tiles.example.com/styles/basic/style.json"
headers={{ Authorization: `Bearer ${token}` }}
/>07 · वर्तमान सीमाएँ
imports और कुछ लेयर प्रकार रेंडर नहीं होते। onDiagnostics में दिखते हैं।*MapView के अंदर रखना ज़रूरी है। नक्शे के बाहर यह काम नहीं करता।