Haritaya çizgi katmanı ekleme
Çizgi katmanı, ve MultiLineString
özelliklerini haritada yol veya yol olarak işlemek LineString
için kullanılabilir. Ve özelliklerinin ana hatlarını Polygon
MultiPolygon
işlemek için bir çizgi katmanı da kullanılabilir. Veri kaynağı, işlenmek üzere veri sağlamak için bir çizgi katmanına bağlanır.
İpucu
Çizgi katmanları varsayılan olarak çokgenlerin koordinatlarını ve veri kaynağındaki çizgileri işler. Katmanı yalnızca LineString özelliklerini işleyebilecek şekilde sınırlamak için, katmanın ['==', ['geometry-type'], 'LineString']
özelliğini veya ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']]
MultiLineString özelliklerini de eklemek istiyorsanız olarak ayarlayınfilter
.
Aşağıdaki kodda bir satırın nasıl oluşturulacağı gösterilmektedir. Satırı bir veri kaynağına ekleyin, ardından LineLayer sınıfını kullanarak bir çizgi katmanıyla işleyin.
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
//Create a line and add it to the data source.
dataSource.add(new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]));
//Create a line layer to render the line to the map.
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
strokeColor: 'blue',
strokeWidth: 5
}));
Aşağıdaki ekran görüntüsünde yukarıdaki işlevlerin bir örneği gösterilmektedir.
Çizgi katmanları LineLayerOptions ve Use data-driven style ifadeleri kullanılarak stillendirilebilir.
Çizgi boyunca simge ekleme
Aşağıdaki örnekte harita üzerinde bir çizgi boyunca ok simgelerinin nasıl ekleneceği gösterilmektedir. Sembol katmanı kullanırken seçeneğini olarak line
ayarlayınplacement
. Bu seçenek, çizgi boyunca simgeleri işler ve simgeleri döndürür (0 derece = sağ).
function InitMap()
{
var map = new atlas.Map('myMap', {
center: [-122.135, 47.65],
zoom: 11,
view: "Auto",
//Add authentication details for connecting to Azure Maps.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
}
});
var datasource;
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Load the custom image icon into the map resources.
map.imageSprite.add('arrow-icon', '/images/icons/purpleArrowRight.png').then(function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create a line and add it to the data source.
datasource.add(new atlas.data.Feature(new atlas.data.LineString([
[-122.18822, 47.63208],
[-122.18204, 47.63196],
[-122.17243, 47.62976],
[-122.16419, 47.63023],
[-122.15852, 47.62942],
[-122.15183, 47.62988],
[-122.14256, 47.63451],
[-122.13483, 47.64041],
[-122.13466, 47.64422],
[-122.13844, 47.65440],
[-122.13277, 47.66515],
[-122.12779, 47.66712],
[-122.11595, 47.66712],
[-122.11063, 47.66735],
[-122.10668, 47.67035],
[-122.10565, 47.67498]
])));
//Add a layers for rendering data.
map.layers.add([
//Add a line layer for displaying the line.
new atlas.layer.LineLayer(datasource, null, {
strokeColor: 'DarkOrchid',
strokeWidth: 3
}),
//Add a symbol layer for rendering the arrow along the line.
new atlas.layer.SymbolLayer(datasource, null, {
//Specify how much space should be between the symbols in pixels.
lineSpacing: 100,
//Tell the symbol layer that the symbols are being rendered along a line.
placement: 'line',
iconOptions: {
image: 'arrow-icon',
allowOverlap: true,
anchor: 'center',
size: 0.8
}
})
]);
});
});
}
Bu kod aşağıdaki gibi görünen bir harita oluşturur:
Not
Yukarıdaki örnekte kullanılan görüntü dosyasının bir kopyası için bkz . GitHub'da purpleArrowRight.png .
İpucu
Azure Haritalar web SDK'sı, simge katmanıyla kullanabileceğiniz çeşitli özelleştirilebilir görüntü şablonları sağlar. Daha fazla bilgi için Görüntü şablonlarını kullanma belgesine bakın.
Çizgiye kontur gradyanı ekleme
Çizgiye tek bir vuruş rengi uygulayabilirsiniz. Bir çizgi kesiminden sonraki çizgi kesimine geçişi göstermek için bir çizgiyi renk gradyanı ile de doldurabilirsiniz. Örneğin, çizgi gradyanları zaman ve mesafe içindeki değişiklikleri veya bağlı bir nesne hattındaki farklı sıcaklıkları göstermek için kullanılabilir. Bu özelliği bir çizgiye uygulamak için, veri kaynağının lineMetrics
seçeneği olarak true
ayarlanmalıdır ve ardından çizgi seçeneğine strokeColor
bir renk gradyanı ifadesi geçirilebilir. Vuruş gradyan ifadesinin ['line-progress']
hesaplanmış çizgi ölçümlerini ifadeye sunan veri ifadesine başvurması gerekir.
Haritadaki bir çizgiye vuruş gradyanını uygulamayı gösteren tam işlevsel bir örnek için, Azure Haritalar Örnekleri'ndeki Kontur Gradyanı ile Çizgi bölümüne bakın. Bu örneğin kaynak kodu için bkz . Stroke Gradyan kaynak kodu ile çizgi.
Çizgi katmanını özelleştirme
Çizgi katmanında çeşitli stil seçenekleri vardır. Çizgi seçeneklerini etkileşimli olarak gösteren tam işlevsel bir örnek için Azure Haritalar Örnekleri'ndeki Çizgi Katmanı Seçenekleri'ne bakın. Bu örneğin kaynak kodu için bkz . Satır Katmanı Seçenekleri kaynak kodu.
Sonraki adımlar
Bu makalede kullanılan sınıflar ve yöntemler hakkında daha fazla bilgi edinin:
Haritalarınıza eklenecek daha fazla kod örneği için aşağıdaki makalelere bakın: