Egyszerű adatréteg hozzáadása

Cikk
06/30/2023

A térbeli I/O-modul egy osztályt SimpleDataLayer biztosít. Ez az osztály megkönnyíti a stílusjegyek leképezését a térképen. Olyan adatkészleteket is képes renderelni, amelyek stílustulajdonságokkal és vegyes geometriatípusokat tartalmazó adatkészletekkel rendelkeznek. Az egyszerű adatréteg ezt a funkciót több renderelési réteg burkolásával és stíluskifejezések használatával éri el. A stíluskifejezések az ezekben a burkolt rétegekben található funkciók közös stílustulajdonságait keresik. A atlas.io.read függvény és a függvény ezeket a atlas.io.write tulajdonságokat használja a stílusok támogatott fájlformátumba való olvasásához és írásához. Miután hozzáadta a tulajdonságokat egy támogatott fájlformátumhoz, a fájl különböző célokra használható. A fájl például használható a stílusjegyek térképen való megjelenítésére.

A stílusfunkciók mellett egy SimpleDataLayer előugró sablonnal rendelkező beépített előugró funkciót is biztosít. Az előugró ablak akkor jelenik meg, ha egy funkcióra kattint. Az alapértelmezett előugró funkció igény szerint le is tiltható. Ez a réteg a fürtözött adatokat is támogatja. Amikor egy fürtre kattint, a térkép nagyítja a fürtöt, és kiterjeszti az egyes pontokra és alclusterekre.

A SimpleDataLayer osztály nagy adathalmazokon használható, amelyekben számos geometriai típus és számos stílus van alkalmazva a jellemzőkre. A használat során ez az osztály hat rétegből álló többletterhelést ad hozzá, amelyek stíluskifejezéseket tartalmaznak. Vannak tehát olyan esetek, amikor hatékonyabb a fő renderelési rétegek használata. Például egy alapréteggel megjeleníthet néhány geometriai típust és néhány stílust egy funkcióhoz

Egyszerű adatréteg használata

A SimpleDataLayer osztályt a többi renderelési réteghez hasonlóan használja a rendszer. Az alábbi kód bemutatja, hogyan használható egy egyszerű adatréteg egy térképen:

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Add a simple data layer for rendering data.
var layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);

Az alábbi kódrészlet egy egyszerű adatréteg használatát mutatja be, amely egy online forrásból származó adatokra hivatkozik.

function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.967605, 40.780452],
    zoom: 12,
    view: "Auto",

    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Get an Azure Maps key at https://azuremaps.com/.
      authType: 'subscriptionKey',
      subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
    },
  });    

  //Wait until the map resources are ready.
  map.events.add('ready', function () {

    //Create a data source and add it to the map.
    var datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    //Add a simple data layer for rendering data.
    var layer = new atlas.layer.SimpleDataLayer(datasource);
    map.layers.add(layer);

    //Load an initial data set.
    loadDataSet('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/use-simple-data-layer.json');

    function loadDataSet(url) {
      //Read the spatial data and add it to the map.
      atlas.io.read(url).then(r => {
      if (r) {
        //Update the features in the data source.
        datasource.setShapes(r);

        //If bounding box information is known for data, set the map view to it.
        if (r.bbox) {
          map.setCamera({
            bounds: r.bbox,
            padding: 50
          });
        }
      }
      });
    }
  });
}

A függvénynek átadott URL-cím loadDataSet a következő json-ra mutat:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
    },
    "properties": {
        "color": "red"
    }
}

Miután hozzáadta a funkciókat az adatforráshoz, az egyszerű adatréteg kitalálja, hogyan jelenítheti meg őket a legjobban. Az egyes funkciók stílusai a szolgáltatás tulajdonságaiként állíthatók be.

A fenti mintakód egy GeoJSON-pont funkciót mutat be, color amelynek tulajdonsága értékre redvan állítva.

Ez a mintakód az egyszerű adatréteg használatával jeleníti meg a pont funkciót, és a következőképpen jelenik meg:

Képernyőkép a 0, 0 koordinátákkal rendelkező térképről, amely egy kék víz fölötti piros ponttal jelenik meg, a piros pont a szimbólumréteg használatával lett hozzáadva.

Megjegyzés

Figyelje meg, hogy a térkép inicializálásakor beállított koordináták:

középen: [-73.967605, 40.780452]

Az adatforrásból származó érték felülírja a következőt:

"koordináták": [0, 0]

Az egyszerű adatréteg valódi ereje a következő esetekben jön létre:

Az adatforrások számos különböző típusú funkciót jelentenek; Vagy
Az adatkészlet funkcióihoz több stílustulajdonság is külön-külön van beállítva; Vagy
Nem tudja biztosan, hogy pontosan mit tartalmaz az adatkészlet.

Az XML-adatcsatornák elemzésekor például előfordulhat, hogy nem ismeri a jellemzők pontos stílusait és geometriai típusait. Az Egyszerű adatréteg beállításai minta egy KML-fájl funkcióinak renderelésével mutatja be az egyszerű adatréteg erejét. Emellett az egyszerű adatrétegosztály által biztosított különböző lehetőségeket is bemutatja. A minta forráskódját az Egyszerű adatréteg options.html a GitHub Azure Maps kódmintáiban találja.

Képernyőkép a térképről a bal oldali panellel, amelyen a különböző egyszerű adatréteg-beállítások láthatók.

Megjegyzés

Ez az egyszerű adatréteg az előugró sablonosztályt használja a KML-buborékok vagy szolgáltatástulajdonságok táblázatként való megjelenítéséhez. Alapértelmezés szerint az előugró ablakban megjelenített összes tartalom biztonsági funkcióként egy iframe-kereten belül lesz védőfalba helyezve. Vannak azonban korlátozások:

Minden szkript, űrlap, mutató zárolása és felső navigációs funkció le van tiltva. A hivatkozások kattintáskor új lapon nyithatók meg.
A régebbi böngészők, amelyek nem támogatják az srcdoc iframe-ek paraméterét, kis mennyiségű tartalom megjelenítésére lesznek korlátozva.

Ha megbízik az előugró ablakokba betöltött adatokban, és azt szeretné, hogy ezek a szkriptek betöltődjenek előugró ablakokba, hozzáférhetnek az alkalmazáshoz, letilthatja ezt az előugró sablonok sandboxContent beállítás false (hamis) értékre állításával.

Alapértelmezett támogatott stílustulajdonságok

Ahogy korábban említettük, az egyszerű adatréteg több alapvető renderelési réteget is körbefuttat: buborék, szimbólum, vonal, sokszög és kihúzott sokszög. Ezután kifejezésekkel keres érvényes stílustulajdonságokat az egyes szolgáltatásokban.

Azure Maps és GitHub-stílustulajdonságok a támogatott tulajdonságnevek két fő készlete. A különböző Azure Maps-rétegbeállítások legtöbb tulajdonságnevét az egyszerű adatréteg funkcióinak stílustulajdonságai támogatják. A GitHub által gyakran használt stílustulajdonságok neveinek támogatása érdekében kifejezéseket adtunk hozzá néhány rétegbeállításhoz. A GitHub GeoJSON-térképtámogatása definiálja ezeket a tulajdonságneveket, és a platformon tárolt és renderelt GeoJSON-fájlok stílusához használatosak. A GitHub összes stílustulajdonsága támogatott az egyszerű adatrétegben, kivéve a marker-symbol stílustulajdonságokat.

Ha az olvasó egy ritkábban használt stílustulajdonságra bukkan, azt a legközelebbi Azure Maps stílustulajdonságra konvertálja. Emellett az alapértelmezett stíluskifejezések felül is bírálhatók az getLayers egyszerű adatréteg funkciójának használatával, és frissítheti a beállításokat bármelyik rétegen.

Az alábbi szakaszok az egyszerű adatréteg által támogatott alapértelmezett stílustulajdonságokat ismertetik. A támogatott tulajdonságnév sorrendje szintén a tulajdonság prioritása. Ha két stílustulajdonság van definiálva ugyanahhoz a rétegbeállításhoz, akkor a lista első stílustulajdonsága nagyobb prioritással rendelkezik. A színek bármilyen CSS3 színérték lehetnek; HEX, RGB, RGBA, HSL, HSLA vagy elnevezett színérték.

Buborékréteg stílusának tulajdonságai

Ha egy funkció Point egy vagy egy MultiPoint, és a szolgáltatás nem rendelkezik image olyan tulajdonsággal, amelyet egyéni ikonként használna a pont szimbólumként való megjelenítéséhez, akkor a szolgáltatás egy BubbleLayerkövetkezővel jelenik meg: .

Réteg beállítás	Támogatott tulajdonságnév(ek)	Alapértelmezett érték
`color`	`color`, `marker-color`	`'#1A73AA'`
`radius`	`size` ¹, `marker-size`², `scale`¹	`8`
`strokeColor`	`strokeColor`, `stroke`	`'#FFFFFF'`

[1] A size és scale az érték skaláris értéknek számít, és szorozva van 8

[2] Ha a GitHub-beállítás marker-size meg van adva, akkor a rendszer a következő értékeket használja a sugárhoz.

Jelölő mérete	Radius
`small`	`6`
`medium`	`8`
`large`	`12`

A fürtök a buborékréteggel is renderelhetők. Alapértelmezés szerint a fürt sugara értékre 16van állítva. A fürt színe a fürtben lévő pontok számától függően változik az alábbi táblázatban meghatározottak szerint:

Pontok száma	Szín
>= 100	`red`
>= 10	`yellow`
< 10	`green`

Szimbólumstílus tulajdonságai

Ha egy szolgáltatás egy Point vagy egy MultiPoint, és a tulajdonsága, és olyan tulajdonsággal rendelkezik image , amelyet egyéni ikonként használna a pont szimbólumként való megjelenítéséhez, akkor a szolgáltatás a SymbolLayerkövetkezővel jelenik meg: .

Réteg beállítás	Támogatott tulajdonságnév(ek)	Alapértelmezett érték
`image`	`image`	`none`
`size`	`size`, `marker-size`¹	`1`
`rotation`	`rotation`	`0`
`offset`	`offset`	`[0, 0]`
`anchor`	`anchor`	`'bottom'`

[1] Ha a GitHub-beállítás marker-size meg van adva, akkor a rendszer az alábbi értékeket használja az ikonméret beállításhoz.

Jelölő mérete	Szimbólumméret
`small`	`0.5`
`medium`	`1`
`large`	`2`

Ha a pont funkció egy fürt, a point_count_abbreviated tulajdonság szöveges címkeként jelenik meg. A rendszer nem jelenít meg képet.

Vonalstílus tulajdonságai

Ha a szolgáltatás LineStringegy , MultiLineString, Polygonvagy MultiPolygon, akkor a szolgáltatás a LineLayerkövetkezővel jelenik meg: .

Réteg beállítás	Támogatott tulajdonságnév(ek)	Alapértelmezett érték
`strokeColor`	`strokeColor`, `stroke`	`'#1E90FF'`
`strokeWidth`	`strokeWidth`, `stroke-width`, `stroke-thickness`	`3`
`strokeOpacity`	`strokeOpacity`, `stroke-opacity`	`1`

Sokszögstílus tulajdonságai

Ha a szolgáltatás Polygon egy vagy egy MultiPolygon, és a szolgáltatásnak nincs height tulajdonsága, vagy a height tulajdonság nulla, akkor a szolgáltatás a PolygonLayerkövetkezővel jelenik meg: .

Réteg beállítás	Támogatott tulajdonságnév(ek)	Alapértelmezett érték
`fillColor`	`fillColor`, `fill`	`'#1E90FF'`
`fillOpacity`	`fillOpacity`, '`fill-opacity`	`0.5`

Kihúzott sokszögstílus tulajdonságai

Ha a szolgáltatás egy Polygon vagy egy MultiPolygon, és egy nullánál nagyobb értékű tulajdonsággal rendelkezik height , a szolgáltatás a PolygonExtrusionLayerkövetkezővel jelenik meg: .