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

Makale
12/18/2024

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, haritadaki şekilleri ç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 DrawingToolbar 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 uygulayın.
Azure Haritalar çizim araçları modülünü yükleyin. İki yoldan biriyle yükleyebilirsiniz:
- Azure Haritalar hizmetleri modülünün genel olarak barındırılan Azure Content Delivery Network sürümünü kullanın. Dosyanın öğesinde <head> JavaScript ve CSS'ye başvuru 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>
```
- İsterseniz 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ükleyebilir ve ardından uygulamanızla 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 JavaScript'i bir kaynak dosyaya aktarın:
```
import * as drawing from "azure-maps-drawing-tools";
```
  Ayrıca, çeşitli denetimlerin doğru görüntülenmesi için CSS'yi de eklemeniz gerekir. Bağımlılıkları paketlemek ve kodunuzu paketlemek için bir JavaScript paketleyicisi kullanıyorsanız nasıl yapıldığına ilişkin paketleyicinizin belgelerine bakın. Web paketi için genellikle style-loader'da sağlanan belgelerle ve css-loader birleşimi style-loader aracılığıyla yapılır.
  
  Başlamak için style-loader ve css-loader'ı yükleyin:
```
npm install --save-dev style-loader css-loader
```
  Kaynak dosyanızın içinde atlas-drawing.min.css içeri aktar:
```
import "azure-maps-drawing-tools/dist/atlas-drawing.min.css";
```
  Ardından webpack yapılandırmasının modül kuralları bölümüne yükleyiciler ekleyin:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
  Daha fazla bilgi edinmek için bkz. Azure Haritalar eşleme denetimi npm paketini kullanma.

Çizim yöneticisini doğrudan kullanma

Çizim araçları modülü uygulamanıza yüklendikten sonra çizim yöneticisini kullanarak çizim ve düzenleme özelliklerini etkinleştirebilirsiniz. Çizim yöneticisinin örneğini oluştururken seçeneklerini belirtebilir veya alternatif olarak işlevini kullanabilirsiniz drawingManager.setOptions() .

Ç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 görüntü, çizim modunun bir örneğidir DrawingManager. Çokgen çizmeye başlamak için haritada herhangi bir yer seçin.

Çizim yöneticisinin çizim çizgisiyle gösterildiği New York'taki merkezi parkı gösteren haritanın ekran görüntüsü.

Etkileşim türünü ayarlama

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

click - Fareye veya dokunmaya tıklandığında koordinatlar eklenir.
freehand - Fare veya dokunma haritada sürüklendiğinde koordinatlar eklenir.
hybrid - Fareye veya dokunmaya tıklandığında veya sürüklendiğinde koordinatlar eklenir.

Aşağıdaki kod, çokgen çizim modunu etkinleştirir ve çizim yöneticisinin uyması freehandgereken çizim etkileşimi türünü ayarlar.

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

Çizim seçeneklerini özelleştirme

Önceki örneklerde Çizim Yöneticisi örneği oluştururken çizim seçeneklerinin nasıl özelleştirileceği gösterilmiştir. Ayrıca, işlevini kullanarak drawingManager.setOptions() Çizim Yöneticisi seçeneklerini de ayarlayabilirsiniz.

Çizim yöneticisi seçenekleri, işlevini kullanarak çizim yöneticisi için tüm seçeneklerin özelleştirmesini setOptions test etmek için kullanılabilir. Bu örneğin kaynak kodu için bkz . Çizim yöneticisi seçenekleri kaynak kodu.

Sol tarafta, harita üzerinde yaptıkları efektleri görmek için seçilebilen çizim yöneticisi seçeneklerini gösteren bir panel içeren Seattle haritasının ekran görüntüsü.

Şekli düzenleme moduna ekleme

Mevcut bir şekli çizim yöneticileri edit işlevine geçirerek program aracılığıyla düzenleme moduna geçirin. Şekil bir GeoJSON özelliğiyse, geçirmeden önce sınıfıyla atlas.Shape birlikte sarmalayın.

Bir şekli program aracılığıyla düzenleme modundan çıkarmak için çizim yöneticileri modunu olarak idleayarlayı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çirildiğinde, çizim yöneticisi tarafından tutulan veri kaynağına eklenir. Şekil daha önce başka bir veri kaynağındaysa, bu veri kaynağından kaldırılır.

Çizim yöneticisine şekiller ekleyerek son kullanıcının görüntüleyebilmesi ve düzenleyebilmesini ancak bunları program aracılığıyla düzenleme moduna almak istememesini sağlamak 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ü listelenmektedir.