أكثر

Openlayer مثال بسيط للتحكم المخصص

Openlayer مثال بسيط للتحكم المخصص


يوجد على موقع OpenLayer الرسمي مثال للتحكم المخصص والذي يوضح أ قاعدة الطبقة يتحكم.

هل يمكن لأي شخص أن يعطي مثالاً على عنصر تحكم مخصص بسيط بدون استخدام الفصل؟

وفقًا لمواصفات ol.control.Control ، يجب أن يكون من الممكن إنشاء واحد باستخدام العبارة التالية

var myControl = new ol.control.Control ({element: myElement}) ؛

لكنني جديد تمامًا على جافا سكريبت ولا يمكنني معرفة كيفية استخدامه بعد.


// التحضير لعنصر التحكم المخصص: var anchor_element = document.createElement ('a') ؛ anchor_element.href = '#custom_href' ؛ anchor_element.className = 'custom_anchor' ، var this_ = this ؛ var handleCustomControl = function (e) {myControl.customFunction (e) ؛ } ؛ anchor_element.addEventListener ('click'، handleCustomControl، false) ؛ anchor_element.addEventListener ('touchstart' ، handleCustomControl ، false) ؛ var custom_element = document.createElement ('div') ، custom_element.className = 'myCustomControl ol-unselectable' ، custom_element.appendChild (anchor_element) ، myControl = new ol.control.Control ({className: 'myControl'، element: custom_element، target: document.getElementById ("myCustomControl")}) ؛

قاعدة CSS (لتتمكن من النقر فوق الارتباط التشعبي):

.custom_anchor: قبل {content: "Cycle"؛ }

لقد جربته سريعًا ويمكنني استخدام عنصر تحكم مخصص: http://jsfiddle.net/expedio/onn6g33c/

ربما يكون الخيار الأفضل لإعداد عنصر تحكم مثل هذا إذا كان أكثر تعقيدًا: http://jsfiddle.net/expedio/j4duqc9s/


فيما يلي نسخة مبسطة من مثال التحكم المخصص هذا.

var button = document.createElement ('زر') ؛ button.innerHTML = 'N' ؛ 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 RotateNorthControl = new ol.control.Control ({element: element}) ؛ map.addControl (RotateNorthControl) ؛

يمكنك رؤية الكود الكامل على http://jsfiddle.net/yaugenka/62y73Ls8/7/


شاهد الفيديو: Openlayers 6 Tutorial #9 - Interaction With Vector Features