إضافة شريط أدوات أدوات الرسم إلى خريطة
توضح لك هذه المقالة كيفية استخدام الوحدة النمطية "أدوات الرسم" وعرض شريط أدوات الرسم على الخريطة. يضيف عنصر تحكم DrawingToolbar شريط أدوات الرسم على الخريطة. سوف تتعلم كيفية إنشاء الخرائط باستخدام أداة رسم واحدة فقط وكيفية تخصيص عرض أشكال الرسم في مدير الرسم.
إضافة شريط أدوات الرسم
تقوم التعليمة البرمجية التالية بإنشاء مثيل لمدير الرسم وتعرض شريط الأدوات على الخريطة.
//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'
})
});
فيما يلي نموذج التعليمات البرمجية الكاملة للتشغيل للوظيفة أعلاه:
الحد من خيارات شريط الأدوات المعروضة
تقوم التعليمة البرمجية التالية بإنشاء مثيل لمدير الرسم وتعرض شريط الأدوات باستخدام أداة رسم مضلع فقط على الخريطة.
//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"]
})
});
فيما يلي نموذج التعليمات البرمجية الكاملة للتشغيل للوظيفة أعلاه:
تغيير نمط عرض الرسم
يمكن تخصيص نمط الأشكال التي يتم رسمها عن طريق استرداد الطبقات الأساسية لمدير الرسم باستخدام الدالات drawingManager.getLayers() ومن drawingManager.getPreviewLayers() ثم تعيين الخيارات على الطبقات الفردية. مقابض السحب التي تظهر للإحداثيات عند تحرير شكل هي علامات HTML. يمكن تخصيص نمط مقابض السحب عن طريق تمرير خيارات علامة HTML إلى dragHandleStylesecondaryDragHandleStyle وخيارات مدير الرسم.
تحصل التعليمة البرمجية التالية على طبقات العرض من مدير الرسم وتعدل خياراتها لتغيير نمط العرض للرسم. في هذه الحالة ، سيتم تقديم النقاط برمز علامة أزرق. ستكون الخطوط حمراء وعرضها أربعة بكسل. سيكون للمضلعات لون تعبئة أخضر ومخطط برتقالي. ثم يغير أنماط مقابض السحب لتكون أيقونات مربعة.
//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 editting.
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 hanle that represents mid-point coordinates that users can grab to add new cooridnates 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
}
});
فيما يلي نموذج التعليمات البرمجية الكاملة للتشغيل للوظيفة أعلاه:
ملاحظة
عندما تكون في وضع التحرير، يمكن تدوير الأشكال. يتم دعم الدوران من هندسة MultiPoint و LineString و MultiLineString و Polygon و MultiPolygonو Rectangle. لا يمكن تدوير هندسات النقطة والدائرة.
الخطوات التالية
تعرف على كيفية استخدام ميزات إضافية لوحدة أدوات الرسم:
تعرف على المزيد حول الفئات والأساليب المستخدمة في هذه المقالة: