أكثر

إنشاء أزرار جديدة وإزالة الأزرار الافتراضية - Openlayer-3


أحاول إنشاء أزرار جديدة ولكن يبدو أنني أستخدم الوظيفة الخاطئة. لحذف الأزرار الافتراضية أضفت الكود التالي:

var map = new ol.Map ({target: 'map'، controls: []، الطبقات: [new ol.layer.Tile ({… etc)

هذا يعمل بشكل رائع. أحاول الآن توصيل زر أنشأته باستخدام HTML (id = btnZoomOut) بوظيفة Zoom:

var buttonZoomOut = new ol.control.Control ({element: $ ('# btnZoomOut')}) ؛ map.addControl (new ol.control.Zoom ({target: buttonZoomOut})) ؛

لكن يبدو أن هذا لا يعمل ويظهر خطأ:

خطأ في النوع غير معلوم: (قيمة وسيطة) (قيمة وسيطة) (قيمة وسيطة). appendChild ليس دالة

كيف تفعل هذا بشكل صحيح؟


لتغيير أزرار التكبير:

map.addControl (new ol.control.Zoom ({className: 'custom-zoom'})) ؛

CSS ، الأمر متروك لك:

.custom-zoom {bottom: .5em؛ اليسار: .5em ؛ }. زر التكبير المخصص {لون الخلفية: rgba (40، 40، 40، .7)؛ نصف قطر الحدود: 50٪ ؛ }

لإنشاء عناصر تحكم جديدة: Openlayers مثال بسيط للتحكم المخصص


إذا كنت تريد استخدام أيقونات رائعة للخط إذن

var button = document.createElement ('زر') ؛ button.innerHTML = '"؛ var handleRotateNorth = function (e) {map.getView (). setRotation (0) ؛ } ؛ button.addEventListener ('click' ، handleRotateNorth ، false) ؛ عنصر var = document.createElement ('div') ؛ element.className = 'rotate-north ol-uncelectable ol-control' ؛ element.appendChild (زر) ؛ var map = new ol.Map ({الطبقات: [new ol.layer.Tile ({source: new ol.source.OSM ()})]، target: 'map'، view: new ol.View ({center: [0، 0]، zoom: 2، rotation: 0})، controls: ol.control.defaults (). extension ([new ol.control.Control ({element: element})])})؛

كود العمل jsfiddle