Dodawanie warstwy symboli do mapy
Połącz symbol ze źródłem danych i użyj go do renderowania ikony lub tekstu w danym momencie.
Warstwy symboli są renderowane przy użyciu biblioteki WebGL. Użyj warstwy symboli, aby renderować duże kolekcje punktów na mapie. W porównaniu ze znacznikiem HTML warstwa symboli renderuje dużą liczbę danych punktów na mapie z lepszą wydajnością. Jednak warstwa symboli nie obsługuje tradycyjnych elementów CSS i HTML do stylów.
Porada
Warstwy symboli domyślnie renderują współrzędne wszystkich geometrii w źródle danych. Aby ograniczyć warstwę tak, aby renderowana była tylko funkcja geometrii punktów, ustaw filter
właściwość warstwy na ['==', ['geometry-type'], 'Point']
lub ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]
, jeśli chcesz, możesz również uwzględnić funkcje MultiPoint.
Menedżer sprite map map ładuje niestandardowe obrazy używane przez warstwę symboli. Obsługuje on następujące formaty obrazów:
- JPEG
- PNG
- SVG
- BMP
- GIF (bez animacji)
Przed dodaniem warstwy symboli do mapy należy wykonać kilka kroków. Najpierw utwórz źródło danych i dodaj je do mapy. Utwórz warstwę symboli. Następnie przekaż źródło danych do warstwy symboli, aby pobrać dane ze źródła danych. Na koniec dodaj dane do źródła danych, aby można je było renderować.
Poniższy kod pokazuje, co należy dodać do mapy po załadowaniu. Ten przykład renderuje pojedynczy punkt na mapie przy użyciu warstwy symboli.
//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]));
Istnieją cztery różne typy danych punktów, które można dodać do mapy:
- Geometria punktu GeoJSON — ten obiekt zawiera tylko współrzędną punktu i nic innego. Klasa
atlas.data.Point
pomocnika może służyć do łatwego tworzenia tych obiektów. - Geometria MultiPoint w formacie GeoJSON — ten obiekt zawiera współrzędne wielu punktów i nic innego. Klasa
atlas.data.MultiPoint
pomocnika może służyć do łatwego tworzenia tych obiektów. - Funkcja GeoJSON — ten obiekt składa się z dowolnej geometrii GeoJSON i zestawu właściwości zawierających metadane skojarzone z geometrią. Klasa
atlas.data.Feature
pomocnika może służyć do łatwego tworzenia tych obiektów. -
atlas.Shape
klasa jest podobna do funkcji GeoJSON. Oba typy składają się z geometrii GeoJSON i zestawu właściwości, które zawierają metadane skojarzone z geometrią. Jeśli obiekt GeoJSON zostanie dodany do źródła danych, można go łatwo renderować w warstwie. Jeśli jednak właściwość współrzędnych tego obiektu GeoJSON zostanie zaktualizowana, źródło danych i mapa nie zmienią się. Dzieje się tak, ponieważ w obiekcie JSON nie ma mechanizmu wyzwalającego aktualizację. Klasa shape udostępnia funkcje służące do aktualizowania zawartych w nim danych. Po wprowadzeniu zmiany źródło danych i mapa są automatycznie powiadamiane i aktualizowane.
Poniższy przykładowy kod tworzy geometrię punktu GeoJSON i przekazuje ją do atlas.Shape
klasy, aby ułatwić jej aktualizację. Środek mapy jest początkowo używany do renderowania symbolu. Zdarzenie kliknięcia jest dodawane do mapy w taki sposób, że po jego uruchomieniu współrzędne myszy są używane z funkcją kształtów setCoordinates
. Współrzędne myszy są rejestrowane w momencie zdarzenia kliknięcia. Następnie aktualizuje setCoordinates
lokalizację symbolu na mapie.
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));
});
}
Porada
Domyślnie warstwy symboli optymalizują renderowanie symboli, ukrywając symbole nakładające się na siebie. Gdy powiększasz, ukryte symbole stają się widoczne. Aby wyłączyć tę funkcję i renderować wszystkie symbole przez cały czas, ustaw allowOverlap
właściwość iconOptions
opcji na true
.
Warstwy symboli są renderowane przy użyciu biblioteki WebGL. W związku z tym wszystkie zasoby, takie jak obrazy ikon, muszą zostać załadowane do kontekstu WebGL. W tym przykładzie pokazano, jak dodać ikonę niestandardową do zasobów mapy. Ta ikona jest następnie używana do renderowania danych punktów z symbolem niestandardowym na mapie. Właściwość textField
warstwy symboli wymaga określenia wyrażenia. W tym przypadku chcemy renderować właściwość temperature. Ponieważ temperatura jest liczbą, należy ją przekonwertować na ciąg. Ponadto chcemy dołączyć do niego ciąg "°F". Wyrażenie może służyć do tego łączenia; ['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', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/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]
}
}));
});
});
}
Porada
Zestaw SDK sieci Web Azure Maps udostępnia kilka dostosowywalnych szablonów obrazów, których można używać z warstwą symboli. Aby uzyskać więcej informacji, zobacz dokument How to use image templates (Jak używać szablonów obrazów ).
Warstwa symboli ma wiele dostępnych opcji stylów. W przykładzie Opcje warstwy symboli pokazano, jak różne opcje warstwy symboli wpływające na renderowanie. Aby uzyskać kod źródłowy dla tego przykładu, zobacz Kod źródłowy opcji warstwy symboli.
Porada
Jeśli chcesz renderować tylko tekst z warstwą symboli, możesz ukryć ikonę, ustawiając image
właściwość opcji ikony na 'none'
.
Dowiedz się więcej o klasach i metodach używanych w tym artykule:
Aby uzyskać więcej przykładów kodu do dodania do map, zobacz następujące artykuły: