Szimbólumréteg hozzáadása térképhez

Csatlakozzon egy szimbólumhoz egy adatforráshoz, és használja egy ikon vagy szöveg megjelenítéséhez egy adott ponton.

A szimbólumrétegek a WebGL használatával jelennek meg. Használjon szimbólumréteget a térképen található pontok nagy gyűjteményeinek megjelenítéséhez. A HTML-jelölőhöz képest a szimbólumréteg nagy számú pontadatokat jelenít meg a térképen, jobb teljesítménnyel. A szimbólumréteg azonban nem támogatja a hagyományos CSS- és HTML-elemeket a stílushoz.

A térképek kép sprite managere betölti a szimbólumréteg által használt egyéni képeket. A következő képformátumokat támogatja:

• JPEG
• PNG
• SVG
• BMP
• GIF (animációk nélkül)

Szimbólumréteg hozzáadása

Mielőtt hozzáadhat egy szimbólumréteget a térképhez, meg kell tennie néhány lépést. Először hozzon létre egy adatforrást, és adja hozzá a térképhez. Hozzon létre egy szimbólumréteget. Ezután adja át az adatforrást a szimbólumrétegnek, hogy lekérje az adatokat az adatforrásból. Végül adjon hozzá adatokat az adatforráshoz, hogy legyen valami megjelenítendő.

Az alábbi kód bemutatja, hogy mit kell hozzáadni a térképhez a betöltés után. Ez a minta egyetlen pontot jelenít meg a térképen egy szimbólumréteg használatával.

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

//Create a symbol layer to render icons and/or text at points on the map.
var layer = new atlas.layer.SymbolLayer(dataSource);

//Add the layer to the map.
map.layers.add(layer);

//Create a point and add it to the data source.
dataSource.add(new atlas.data.Point([0, 0]));

A térképhez négy különböző típusú pontadat adható hozzá:

• GeoJSON pontgeometria – Ez az objektum csak egy pont koordinátáját tartalmazza, és semmi mást. A atlas.data.Point segédosztály segítségével egyszerűen létrehozhatja ezeket az objektumokat.
• GeoJSON MultiPoint-geometria – Ez az objektum több pont koordinátáit tartalmazza, és semmi mást. A atlas.data.MultiPoint segédosztály segítségével egyszerűen létrehozhatja ezeket az objektumokat.
• GeoJSON-funkció – Ez az objektum minden GeoJSON-geometriából és a geometriához társított metaadatokat tartalmazó tulajdonságok készletéből áll. A atlas.data.Feature segédosztály segítségével egyszerűen létrehozhatja ezeket az objektumokat.
• atlas.Shape osztály hasonló a GeoJSON funkcióhoz. Mindkettő egy GeoJSON-geometriából és a geometriához társított metaadatokat tartalmazó tulajdonságokból áll. Ha geojSON-objektumot ad hozzá egy adatforráshoz, az könnyen megjeleníthető egy rétegben. Ha azonban a GeoJSON-objektum koordinátái tulajdonsága frissül, az adatforrás és a térkép nem változik. Ennek az az oka, hogy a JSON-objektumban nincs olyan mechanizmus, amely elindíthat egy frissítést. Az alakzatosztály függvényeket biztosít a benne található adatok frissítéséhez. Ha módosítás történik, a rendszer automatikusan értesíti és frissíti az adatforrást és a térképet.

Az alábbi kódminta létrehoz egy GeoJSON-pont geometriát, és átadja az atlas.Shape osztálynak, hogy megkönnyítse a frissítést. A térkép középpontja kezdetben szimbólum megjelenítésére szolgál. A rendszer egy kattintásos eseményt ad hozzá a térképhez, így a rendszer az egér koordinátáit használja az alakzatfüggvényhez setCoordinates . Az egérkoordinátákat a rendszer a kattintási esemény időpontjában rögzíti. Ezután frissíti a setCoordinates szimbólum helyét a térképen.

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

        //Add authentication details for connecting to Azure Maps.
        authOptions: {
            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);
      var point = new atlas.Shape(new atlas.data.Point([-122.33, 47.64]));
      //Add the symbol to the data source.
      dataSource.add([point]);

      /* Gets co-ordinates of clicked location*/
      map.events.add('click', function(e){
        /* Update the position of the point feature to where the user clicked on the map. */
        point.setCoordinates(e.position);
      });

      //Create a symbol layer using the data source and add it to the map
      map.layers.add(new atlas.layer.SymbolLayer(dataSource, null));
    });
}

Egyéni ikon hozzáadása szimbólumréteghez

A szimbólumrétegek a WebGL használatával jelennek meg. Ezért minden erőforrást, például ikonképet be kell tölteni a WebGL-környezetbe. Ez a minta bemutatja, hogyan adhat hozzá egyéni ikont a térképerőforrásokhoz. Ez az ikon ezután egy egyéni szimbólummal jeleníti meg a pontadatokat a térképen. A textField szimbólumréteg tulajdonságához meg kell adni egy kifejezést. Ebben az esetben a hőmérséklet tulajdonságot szeretnénk megjeleníteni. Mivel a hőmérséklet szám, sztringgé kell konvertálni. Emellett hozzá szeretnénk fűzni a "°F" szöveget is. Az összefűzéshez egy kifejezés használható; ['concat', ['to-string', ['get', 'temperature']], '°F'].

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

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

    map.events.add('ready', function () {

      //Load the custom image icon into the map resources.
      map.imageSprite.add('my-custom-icon', '/images/icons/showers.png').then(function () {

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

        //Create a point feature and add it to the data source.
        datasource.add(new atlas.data.Feature(new atlas.data.Point([-73.985708, 40.75773]), {
          temperature: 64
        }));

        //Add a layer for rendering point data as symbols.
        map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
          iconOptions: {
            //Pass in the id of the custom icon that was loaded into the map resources.
            image: 'my-custom-icon',

            //Optionally scale the size of the icon.
            size: 0.5
          },
          textOptions: {
            //Convert the temperature property of each feature into a string and concatenate "°F".
            textField: ['concat', ['to-string', ['get', 'temperature']], '°F'],

            //Offset the text so that it appears on top of the icon.
            offset: [0, -2]
          }
        }));
      });
    });
}

Szimbólumréteg testreszabása

A szimbólumréteg számos stílusbeállítással rendelkezik. A Szimbólumréteg beállításai minta bemutatja, hogyan befolyásolják a megjelenítést befolyásoló szimbólumréteg különböző beállításait. A minta forráskódját lásd a Szimbólumréteg beállításai forráskódban.

Következő lépések

További információ a cikkben használt osztályokról és módszerekről:

További kódmintákat a térképekhez a következő cikkekben talál: