Çizim araçları modülünü kullanma

Makale
11/03/2021
Okumak için 3 dakika

Azure Haritalar Web SDK'sı bir çizim araçları modülü sağlar. Bu modül, fare veya dokunmatik ekran gibi bir giriş cihazı kullanarak harita üzerinde şekil çizmeyi ve düzenlemeyi kolaylaştırır. Bu modülün temel sınıfı çizim yöneticisidir. Çizim yöneticisi, harita üzerinde şekil çizmek ve düzenlemek için gereken tüm özellikleri sağlar. Doğrudan kullanılabilir ve özel araç çubuğu kullanıcı arabirimiyle tümleştirilmiştir. Yerleşik çizim araç çubuğu sınıfını da kullanabilirsiniz.

Çizim araçları modülünü web sayfasına yükleme

Yeni bir HTML dosyası oluşturun ve haritayı her zamanki gibi gerçekleştirin.
Azure Haritalar araçları modülünü yükleme. Bunu iki şekilde yükleyebilirsiniz:
- Azure Haritalar services modülünün genel olarak barındırılan Azure Content Delivery Network sürümünü kullanın. Dosyanın öğesinde JavaScript ve CSS stil <head> sayfası başvurusu ekleyin:
```
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
```
- Veya azure-maps-drawing-tools npm paketini kullanarak Azure Haritalar Web SDK'sı kaynak kodu için çizim araçları modülünü yerel olarak yük ardından uygulamanıza barındırabilirsiniz. Bu paket, TypeScript tanımlarını da içerir. Şu komutu çalıştırın:
  
  npm install azure-maps-drawing-tools
  
  Ardından dosyanın öğesinde JavaScript ve CSS stil sayfası <head> için bir başvuru ekleyin:
```
<link rel="stylesheet" href="node_modules/azure-maps-drawing-tools/dist/atlas-drawing.min.css" type="text/css" />
<script src="node_modules/azure-maps-drawing-tools/dist/atlas-drawing.min.js"></script>
```

Çizim yöneticisini doğrudan kullanma

Çizim araçları modülü uygulamanıza yüklendiktan sonra çizim yöneticisini kullanarak çizim ve düzenleme özelliklerini etkinleştirebilirsiniz. Çizim yöneticisi için, örneği hazırlarken seçenekleri belirtebilirsiniz veya alternatif olarak işlevini drawingManager.setOptions() kullanabilirsiniz.

Çizim modunu ayarlama

Aşağıdaki kod, çizim yöneticisinin bir örneğini oluşturur ve çizim modu seçeneğini ayarlar.

//Create an instance of the drawing manager and set drawing mode.
drawingManager = new atlas.drawing.DrawingManager(map,{
    mode: "draw-polygon"
});

Aşağıdaki kod, çizim yöneticisinin çizim modunu ayarlama işleminin eksiksiz bir çalışan örneğidir. Çokgen çizmeye başlamak için haritaya tıklayın.

Etkileşim türünü ayarlama

Çizim yöneticisi, şekil çizmek için haritayla etkileşim kurmanın üç farklı yolu destekler.

click - Fare veya dokunmaya tık olduğunda koordinatlar eklenir.
freehand - Fare veya dokunma haritaya sürüklendikten sonra koordinatlar eklenir.
hybrid - Fare veya dokunma tıklandı veya sürüklendikten sonra koordinatlar eklenir.

Aşağıdaki kod çokgen çizim modunu sağlar ve çizim yöneticisinin bağlı olması gereken çizim etkileşimi türünü freehand ayarlar.

//Create an instance of the drawing manager and set drawing mode.
drawingManager = new atlas.drawing.DrawingManager(map,{
    mode: "draw-polygon",
    interactionType: "freehand"
});

Bu kod örneği, harita üzerinde çokgen çizme işlevini uygulamaya almaktadır. Farenin sol düğmesini basılı tutun ve serbestçe sürüklemeniz gerekir.

Çizim seçeneklerini özelleştirme

Önceki örneklerde Çizim Yöneticisi'nin örneğini alırken çizim seçeneklerinin nasıl özelleştirebileceğinizi göstermişti. Işlevini kullanarak Çizim Yöneticisi seçeneklerini de drawingManager.setOptions() ayarlayabilirsiniz. Aşağıda, setOptions işlevini kullanarak çizim yöneticisi için tüm seçenekleri özelleştirmeyi test etmek için bir araç verilmiştir.

Şekli düzenleme moduna ekleme

Program aracılığıyla var olan bir şekli çizim yöneticileri işlevine aktararak düzenleme moduna edit alın. Şekil bir GeoJSON özelliği ise, geçirmeden atls.Shape önce sınıfıyla sarmalama.

Program aracılığıyla düzenleme modundan şekil almak için çizim yöneticileri modunu olarak idle ayarlayın.

//If you are starting with a GeoJSON feature, wrap it with the atlas.Shape class.
var feature = { 
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0,0]
        },
    "properties":  {}
};

var shape = new atlas.Shape(feature);

//Pass the shape into the edit function of the drawing manager.
drawingManager.edit(shape);

//Later, to programmatically take shape out of edit mode, set mode to idle. 
drawingManager.setOptions({ mode: 'idle' });

Not

Çizim yöneticisinin edit işlevine bir şekil geçiriken, çizim yöneticisi tarafından bakımı yapılan veri kaynağına eklenir. Şekil daha önce başka bir veri kaynağında yer alan bir veri kaynağından kaldırılır.

Son kullanıcının görüntüleyemez ve düzenleyemez, ancak program aracılığıyla düzenleme moduna almak istemeyebilirsiniz şekilde çizim yöneticisine şekil eklemek için, çizim yöneticisinden veri kaynağını alın ve şekillerinizi buna ekleyin.

//The shape(s) you want to add to the drawing manager so 
var shape = new atlas.Shape(feature);

//Retrieve the data source from the drawing manager.
var source = drawingManager.getSource();

//Add your shape.
source.add(shape);

//Alternatively, load in a GeoJSON feed using the sources importDataFromUrl function.
source.importDataFromUrl('yourFeatures.json');

Aşağıdaki tabloda, farklı şekil özellikleri türleri tarafından desteklenen düzenleme türü listele devam ediyor.