أكثر

OpenLayers 3 تبديل ميزة الرؤية

OpenLayers 3 تبديل ميزة الرؤية


بدا هذا بسيطًا في ظاهره ، لكنني غير قادر على معرفة كيفية تبديل رؤية ميزة العلامة باستخدام الإصدار 3 API من OpenLayers.

في وضعي ، أقوم بإضافة ميزات إلى طبقة متجه. كل ميزة هي رمز علامة تشير إلى مكان الاهتمام. عندما أنقر على مربع اختيار في مكان آخر على الصفحة ، أود أن تظهر الميزة على أنها تختفي (حسب الحالة). أنا أستخدم JQuery جنبًا إلى جنب مع OL3 ، لكن لا يهمني ما إذا كان الحل هو jquery أو javascript الفانيليا.

مقتطفات الشفرة:

var vectorSource = new ol.source.Vector ({projection: "EPSG: 4326"})؛ var vectorLayer = new ol.layer.Vector ({source: vectorSource، style: fieldIconStyle}) ؛ var map = new ol.Map ({layer: [osm، digitalglobe، vectorLayer]، // osm و digitalglobe موجودان في كود الهدف غير المقتبس: 'map'، controls: ol.control.defaults ({attributionOptions: / **type {olx.control.AttributionOptions} * / ({collapsible: false})}). extension ([mousePositionControl])، view: new ol.View ({center: [0، 0]، zoom: 2})})؛ function checkchanged (item) // item هي خانة الاختيار التي تم النقر عليها {// يتم استدعاء هذه الوظيفة بنجاح. //alert($(item).prop('checked ')) ؛ var المحدد = $ (item) .prop ('check') ؛ var id = $ (item) .val () ؛ vectorSource.forEachFeature (function (item) {var props = item.getProperties ()؛ if (props.FieldId = id) {item.setStyle ({visual: selected})؛ // لقد جربت العديد من الأشياء المختلفة هنا ، كل ذلك دون جدوى } })؛ }

لقد كنت أعاني من نفس المشكلة ، لكن يبدو أنني وجدت حلاً يعمل بشكل جيد.

في المستندات لا يوجدالرؤيةخيار نمط لميزات المتجهات. ولكن يمكنك ضبطالعتامةمنol.style.Iconأو ألفا منملءوالسكتة الدماغيةلol.style.Circleوol.style.RegularShape

كانت الطريقة التي حصلت عليها من العمل هي تعيين وظائف نمط لحالاتي المرئية وغير المرئية. فيما يلي بعض الخيارات للنقاط

// visual style var visualStyleIcon = {'Point': [new ol.style.Style ({image: new ol.style.Icon ({src: 'your_icon.png ">

لقد وجدت طريقة أبسط ، إنه يعمل فقط إذا كان لديك ميزة واحدة فقط مع نفس الصورة مضبوطة:

feature.getStyle (). getImage (). setOpacity (0) // Invisible feature.getStyle (). getImage (). setOpacity (1) // Visible // بعد القيام بذلك ، تحتاج إلى "تحديث" الخريطة. في Open Layers 3 ، يكون vectorLayer.changed ()

إذا كان هناك ميزتان أو أكثر تشتركان في نفس كائن الصورة ، فستختفيان في نفس الوقت.

آمل أن يساعد ذلك ، آسف على لغتي الإنجليزية ، فهي ليست لغتي الأم.


شاهد الفيديو: Leaflet Tutorial #1: Create a map with a marker using JavaScript