描画ツールのツールバーをマップに追加する
この記事では、描画ツール モジュールを使用する方法、およびマップ上に描画ツールバーを表示する方法について説明します。 Drawing ツール バー コントロールでは、マップ上に描画ツール バーが追加されます。 描画ツールを 1 つのみ、およびすべて使用してマップを作成する方法と、描画マネージャーで描画図形のレンダリングをカスタマイズする方法について説明します。
描画ツール バーの追加
次のコードでは、描画マネージャーのインスタンスが作成され、ツールバーがマップ上に表示されます。
//Create an instance of the drawing manager and display the drawing toolbar.
drawingManager = new atlas.drawing.DrawingManager(map, {
toolbar: new atlas.control.DrawingToolbar({
position: 'top-right',
style: 'dark'
})
});
描画ツール バーをマップに追加する方法を示す完全な作業サンプルについては、「Azure Maps サンプル」の「描画ツール バーをマップに追加する」を参照してください。 このサンプルのソース コードについては、マップへの描画ツールバーの追加のソース コードを参照してください。
表示するツールバー オプションの制限
次のコードでは、描画マネージャーのインスタンスが作成され、多角形描画ツールだけを含むツールバーがマップ上に表示されます。
//Create an instance of the drawing manager and display the drawing toolbar with polygon drawing tool.
drawingManager = new atlas.drawing.DrawingManager(map, {
toolbar: new atlas.control.DrawingToolbar({
position: 'top-right',
style: 'light',
buttons: ["draw-polygon"]
})
});
次のスクリーンショットは、マップ上に 1 つの描画ツールのみを含むツール バーを表示する描画マネージャーのインスタンスのサンプルを示しています。
描画のレンダリング スタイルの変更
描画される図形のスタイルは、drawingManager.getLayers() および drawingManager.getPreviewLayers() 関数を使用し、個々のレイヤーのオプションを設定することによって、描画マネージャーの基になるレイヤーを取得することによりカスタマイズできます。 図形の編集時に座標に表示されるドラッグ ハンドルは HTML マーカーです。 ドラッグ ハンドルのスタイルは、描画マネージャーの dragHandleStyle オプションおよび secondaryDragHandleStyle オプションに HTML マーカー オプションを渡すことによってカスタマイズできます。
次のコードでは、描画マネージャーからレンダリング レイヤーを取得し、それらのオプションを変更することで、描画のレンダリング スタイルを変更します。 この場合、ポイントは青いマーカー アイコンで描画されます。 線は、赤色の 4 ピクセル幅になります。 多角形は、緑色で塗りつぶされ、枠線がオレンジ色になります。 次に、ドラッグ ハンドルのスタイルが四角形のアイコンに変更されます。
//Get rendering layers of drawing manager.
var layers = drawingManager.getLayers();
//Change the icon rendered for points.
layers.pointLayer.setOptions({
iconOptions: {
image: 'marker-blue'
}
});
//Change the color and width of lines.
layers.lineLayer.setOptions({
strokeColor: 'red',
strokeWidth: 4
});
//Change fill color of polygons.
layers.polygonLayer.setOptions({
fillColor: 'green'
});
//Change the color of polygon outlines.
layers.polygonOutlineLayer.setOptions({
strokeColor: 'orange'
});
//Get preview rendering layers from the drawing manager and modify line styles to be dashed.
var previewLayers = drawingManager.getPreviewLayers();
previewLayers.lineLayer.setOptions({ strokeColor: 'red', strokeWidth: 4, strokeDashArray: [3,3] });
previewLayers.polygonOutlineLayer.setOptions({ strokeColor: 'orange', strokeDashArray: [3, 3] });
//Update the style of the drag handles that appear when editing.
drawingManager.setOptions({
//Primary drag handle that represents coordinates in the shape.
dragHandleStyle: {
anchor: 'center',
htmlContent: '<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" style="cursor:pointer"><rect x="0" y="0" width="15" height="15" style="stroke:black;fill:white;stroke-width:4px;"/></svg>',
draggable: true
},
//Secondary drag handle that represents mid-point coordinates that users can grab to add new coordinates in the middle of segments.
secondaryDragHandleStyle: {
anchor: 'center',
htmlContent: '<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" style="cursor:pointer"><rect x="0" y="0" width="10" height="10" style="stroke:white;fill:black;stroke-width:4px;"/></svg>',
draggable: true
}
});
レンダリング レイヤーにアクセスして描画マネージャーの描画図形のレンダリングをカスタマイズする方法を示す完全な作業サンプルについては、「Azure Maps サンプル」の「描画レンダリング スタイルを変更する」を参照してください。 このサンプルのソース コードについては、描画のレンダリング スタイルの変更のソース コードを参照してください。
Note
編集モードでは、図形を回転できます。 回転は、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、Rectangle の各ジオメトリからサポートされています。 Point および Circle ジオメトリは回転できません。
次のステップ
描画ツール モジュールのその他の機能の使用方法を確認します。
この記事で使われているクラスとメソッドの詳細については、次を参照してください。