हिन्दी
English日本語DeutschEspañol (LatAm)ไทยहिन्दी한국어Íslenska
दस्तावेज़ीकरण / मानचित्र व्यू / मानचित्र की शैली बदलना

मानचित्र की शैली बदलना

मानचित्र की वेक्टर शैली पर «सड़कों को सफ़ेद करना», «लेबल हटाना», «जल क्षेत्रों को गहरा करना» जैसे समायोजन नियमों के रूप में घोषणात्मक तरीके से लागू करने वाला पैकेज है। वही नियम Android और iOS पर भी वैसे ही काम करते हैं।

REACT
@mapconductor/js-vectorstyle
PROP
mapStyle
ESM / CJS
केवल ESM
डेमो देखेंस्टाइल समायोजन · React ↗

01 · अवलोकन

नियम «किस लेयर पर (सेलेक्टर)» और «क्या करना है (पैच)» के जोड़ों की क्रमबद्ध सूची होते हैं। सेलेक्टर लेयर ID नहीं बल्कि भूमिका (सड़क, जल क्षेत्र, लेबल…) से लिखे जा सकते हैं। OpenMapTiles, Shortbread और Mapbox Streets की स्कीमा अपने आप पहचान ली जाती है, इसलिए हर शैली के लिए अलग लेयर ID ढूँढ़ने की ज़रूरत नहीं है।

createVectorStyle() से मिलने वाला मान किसी भी *MapView को mapStyle के रूप में पास करें। React में style तत्व की अपनी CSS होती है, इसलिए नाम mapStyle है (Android और iOS पर style)।

मानचित्र
यह कैसे काम करता है
आवश्यकताएँ
MapLibre / Mapbox / MapTiler
शैली को मानचित्र स्वयं पढ़ता है। नियम बदलने पर केवल अंतर लागू होता है, टाइल दोबारा नहीं पढ़ी जातीं।
केवल यह पैकेज
अन्य (Google Maps, Leaflet, OpenLayers, ArcGIS, Cesium, HERE, MapKit, deck.gl …)
शैली को रैस्टर टाइल पर बनाकर ऊपर परत के रूप में चिपकाया जाता है।
rasteriser के लिए VectorTileRasteriser

रैस्टराइज़र पास किए बिना वेक्टर-असमर्थित मानचित्र को देने पर, चुपचाप कुछ न बनाने के बजाय निदान में «यह शैली उपयोग नहीं की जा सकती» दिखाया जाता है।

02 · इंस्टॉलेशन

terminalnpm
npm install @mapconductor/js-sdk-core @mapconductor/js-vectorstyle

वेक्टर-असमर्थित मानचित्र पर भी उपयोग करने हेतु, रैस्टराइज़र वाला react-vectortile भी इंस्टॉल करें (वेक्टर टाइल लेयर के Service Worker की तैयारी भी चाहिए)।

terminalnpm
npm install @mapconductor/react-vectortile

केवल ESM है। नियमों का कंपाइलर wasm (लगभग 190 KB) में है, जो import.meta.url से सापेक्ष पथ पर लोड होता है। Vite में यह वैसे ही चलता है। किसी और जगह से सर्व करने पर wasmUrl से निर्दिष्ट करें।

03 · मूल उपयोग

document छोड़ देने पर, वह स्टाइल एडजस्ट होता है जिसे मैप अभी रेंडर कर रहा है ('currentDesign')। नीचे दिया उदाहरण MapLibre के डिफ़ॉल्ट डिज़ाइन को एक सफ़ेद-काले मैप में बदलता है जिसमें केवल सड़कें दिखाई देती हैं।

RoadsOnlyMap.tsxTypeScript · React
import { useMemo } from 'react';
import { buildStyleRules, createVectorStyle, LayerRole } from '@mapconductor/js-vectorstyle';
import { MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';

export function RoadsOnlyMap() {
  const state = useMapLibreViewState();
  const mapStyle = useMemo(
    () => createVectorStyle({
      rules: buildStyleRules((r) => {
        r.all({ color: '#000000' });
        r.role(LayerRole.label, { visible: false });
        r.role(LayerRole.roadCasing, { color: '#303030' });
        r.role(LayerRole.road, { color: '#ffffff', widthScale: 1.4 });
      }),
    }),
    [],
  );

  return (
    <MapLibreMapView2D
      state={state}
      mapStyle={mapStyle}
      onStyleDiagnostics={(messages) => console.warn(messages)}
    />
  );
}

अपनी स्टाइल का उपयोग करते समय, document को { url } या { text } पास करें।

04 · नियम लिखने का तरीका

नियम ऊपर से नीचे लागू होते हैं, और CSS की तरह ही प्रत्येक आइटम के लिए बाद वाला नियम जीतता है। मूल तरीका यह है कि पहले all से पूरे को तय करें, फिर भूमिका के अनुसार ओवरराइड करें।

TypeScriptTypeScript
buildStyleRules((r) => {
  r.all({ colorFilter: { darken: 0.55 } });
  r.role(LayerRole.water, { color: 'rgb(10,28,43)' });
  r.role(LayerRole.road, { color: '#d0d0d0' });
  r.layerId('poi-*', { visible: false });
  r.kind('symbol', { opacity: 0.8 });
});
सेलेक्टर
बिल्डर
विवरण
all
r.all(patch)
सभी लेयर।
{ role }
r.role(LayerRole.road, patch)
भूमिका। background・water・waterway・land・landuse・park・building・road・road-casing・rail・transit・boundary・aeroway・label・poi।
{ layerId }
r.layerId('poi-*', patch)
लेयर ID। * और ? का उपयोग किया जा सकता है।
{ sourceLayer }
r.sourceLayer('water', patch)
टाइल के source-layer का नाम।
{ kind }
r.kind('symbol', patch)
लेयर का प्रकार। background・fill・line・circle・symbol・other।
anyOf / allOf / not
r.where(selector, patch)
संयोजन।
पैच
प्रकार
विवरण
visible
boolean
दिखाना या छिपाना।
color
string
लेयर के प्रकार के अनुरूप रंग (फ़िल・लाइन・टेक्स्ट और आइकन・बैकग्राउंड)।
colorFilter
{ desaturate } | { darken } | { lighten } | { invertLightness } | { mix }
मूल रंग पर रूपांतरण।
opacity
0–1
अपारदर्शिता।
widthScale
number
लाइन की चौड़ाई・वृत्त की त्रिज्या का गुणक।
filter
MapLibre एक्सप्रेशन
लेयर के फ़िल्टर को बदल देता है।
minZoom / maxZoom
number
दिखाने के लिए ज़ूम की श्रेणी।
properties
Record<string, unknown>
स्टाइल स्पेसिफिकेशन की प्रॉपर्टी सीधे नाम से। अंत में लागू होता है।

JSON में नियम रखना

नियम JSON दस्तावेज़ भी हैं। सर्वर से वितरित करने या ऐप के संस्करणों के बीच सहेजने के समय, इस रूप में रखें और parseStyleRules() से पढ़ें। वही दस्तावेज़ Android・iOS पर भी पढ़ा जा सकता है।

night.rules.jsonJSON
{
  "schemaVersion": 1,
  "rules": [
    { "selector": "all", "patch": { "colorFilter": { "darken": 0.55 } } },
    { "selector": { "role": "water" }, "patch": { "color": "rgb(10,28,43)" } }
  ]
}
TypeScriptTypeScript
import { createVectorStyle, parseStyleRules } from '@mapconductor/js-vectorstyle';

const rules = parseStyleRules(await (await fetch('/night.rules.json')).text());
const mapStyle = createVectorStyle({ rules });

05 · वेक्टर-असमर्थित मैप पर उपयोग करना

VectorTileRasteriser को rasteriser में पास करने पर, स्टाइल को रैस्टर टाइल पर बनाकर ओवरले किया जाता है। प्रोवाइडर के अपने मैप को None डिज़ाइन पर सेट करके हटा दें।

TypeScriptTypeScript · React
import { useMemo } from 'react';
import { createVectorStyle } from '@mapconductor/js-vectorstyle';
import { VectorTileRasteriser } from '@mapconductor/react-vectortile';
import { GoogleMapDesign, GoogleMapView2D, useGoogleMapViewState } from '@mapconductor/react-for-googlemaps';

const state = useGoogleMapViewState({
  apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
  mapDesignType: GoogleMapDesign.None,
});
const rasteriser = useMemo(() => new VectorTileRasteriser(), []);
const mapStyle = useMemo(
  () => createVectorStyle({
    document: { url: 'https://tiles.versatiles.org/assets/styles/colorful/style.json' },
    rules,
    rasteriser,
  }),
  [rules, rasteriser],
);

<GoogleMapView2D state={state} mapStyle={mapStyle} style={{ height: 480 }} />
सावधानी
रैस्टराइज़र समानता के आधार पर तुलना करता है। हर रेंडर पर new करने से इसे अलग स्टाइल माना जाता है और मैप हर बार फिर से बनाया जाता है। useMemo आदि से एक को बनाए रखें।

06 · मुख्य विकल्प

विकल्प
डिफ़ॉल्ट मान
विवरण
document
'currentDesign'
एडजस्ट करने के लिए स्टाइल। { url, headers? }・{ text }・'currentDesign'।
rules
—
लागू करने का नियम। NO_STYLE_RULES होने पर मूल रूप में ही रहता है।
rasteriser
—
वेक्टर को समर्थन न करने वाले मानचित्र पर चित्रित करने के लिए।
onUnsupported
'report'
जब मानचित्र अंतर (diff) स्वीकार न करे। 'reload' होने पर समायोजित दस्तावेज़ पूरा पास करता है (सही लेकिन भारी)।
onDiagnostics
—
मेल खाए लेयरों की संख्या, किसी से मेल न खाने वाले नियम, और मानचित्र द्वारा अस्वीकार किए गए समायोजन।
wasmUrl
—
कंपाइलर के wasm का स्थान।

डायग्नोस्टिक्स *MapView के onStyleDiagnostics से भी प्राप्त किए जा सकते हैं। छोड़ने पर कंसोल में आते हैं। "किसी से मेल न खाने वाले नियम" का रूप देखकर केवल "लगभग लागू हो रहा है" ही पता चलता है, इसलिए विकास के दौरान इसे दिखाई देने वाली जगह पर रखना अनुशंसित है।

संबंधित पेज

वेक्टर टाइल लेयर

स्टाइल को लेयर के रूप में जोड़ना। रैस्टराइज़र का असली स्वरूप।

मानचित्र डिज़ाइन (टाइल)

प्रदाता के अनुसार डिज़ाइन, और None।

प्रदाता बदलना

वही नियम रखते हुए मानचित्र बदलना।