أكثر

لماذا تتحرك مضلعات KML الخاصة بي أثناء التكبير / التصغير (باستخدام المنشور والنيازك باستخدام OpenStreetMap)؟

لماذا تتحرك مضلعات KML الخاصة بي أثناء التكبير / التصغير (باستخدام المنشور والنيازك باستخدام OpenStreetMap)؟


أنا أستخدم meteor.js و Lealet.js لإنشاء تطبيق بسيط يعرض مضلعات kml على طبقة خرائط شارع مفتوحة. يمكنني جعل المضلعات تظهر بشكل جيد ، ولكن أثناء عملية التكبير / التصغير ، تتحرك المضلعات ، وهو أمر مربك بشكل خاص للمستخدمين الذين يستخدمون جهاز التكبير / التصغير المحمول.

النقاط الفردية ليس لديها هذه المشكلة. يمكن لأي شخص لي نقطة في الاتجاه الصحيح؟

نسخة من الكود الخاص بي تعمل على newmaps.meteor.com

يرجى التحلي بالصبر ، خادم نيزك dev بطيء في التحميل. سترى خريطة بها مضلع وعلامة ، لاحظ الاختلاف في السلوك بين المضلع والمحدد أثناء عملية التكبير / التصغير.

تحرير: تم استبدال الموقع بنسخة غير مصغرة. map.js كالتالي:

// عند بدء التشغيل ، يتم تغيير حجم الحدث Meteor.startup (function () {$ (window) .resize (function () {$ ('# map'). css ('height'، window.innerHeight - 44)؛})؛ $ (window) .resize ()؛ // trigger resize event}) ؛ var numMaps ؛ var currentMapLayer ؛ خريطة فار معلومات فار Session.set ("mapName"، "Map01") ؛ Template.map.onRendered (function () {$ (window) .resize () ؛ // المشغل تغيير حجم الحدث map.invalidateSize () ؛}) ؛ نمط الوظيفة (ميزة) {return {weight: 2، opacity: 1، color: 'white'، dashArray: '3'، fillOpacity: 0.7، fillColor: 'blue' //getColor(feature.properties.density)}؛ } function highFeature (e) {var layer = e.target؛ layer.setStyle ({weight: 5، color: '# 666'، dashArray: "، fillOpacity: 0.7})؛ if (! L.Browser.ie &&! L.Browser.opera) {layer.bringToFront ()؛} info.update (layer.feature.properties)؛} إعادة تعيين الوظيفة (e) {currentMapLayer.resetStyle (e.target)؛ info.update ()؛} وظيفة zoomToFeature (e) {map.fitBounds (e.target.getBounds ( )) ؛} وظيفة onEachFeature (ميزة ، طبقة) {layer.on ({mouseover: highFeature، mouseout: resetHighlight، click: function (e) {resetHighlight (e)؛ lightFeature (e)؛} // click: zoomToFeature}) ؛} Template.map.rendered = function () {L.Icon.Default.imagePath ='pack / bevanhunt_leaflet / images '؛ // var map = L.map (' map '، {// doubleClickZoom: false، // }). setView ([- 27.974467340930417، 153.36855959147215]، 14)؛ map = L.map ('map'). setView ([- 27.974467340930417، 153.36855959147215، 14)؛ console.log ("RENDER")؛ L.tileLayer .provider ('OpenStreetMap.Mapnik'). addTo (map) ؛ // عنصر تحكم يعرض معلومات الحالة على hover info = L.control () ؛ info.onAdd = function (map) {this._d iv = L.DomUtil.create ('div'، 'info') ؛ this.update () ؛ إرجاع هذا. } ؛ info.update = function (props) {this._div.innerHTML = '

تفاصيل

"+ (الدعائم؟""+ props.name +"
'+ props.description:' اضغط على خاصية ') ؛ } ؛ info.addTo (خريطة) ؛ //polygon.getBounds (). getCenter () ؛ / * geojson = L.geoJson (StatesData، {style: style، onEachFeature: onEachFeature}). addTo (map)؛ * / Meteor.startup (الوظيفة () {if (currentMapLayer) map.removeLayer (currentMapLayer) ؛ map.setView ([51.505، -0.09]، 13)؛ L.marker ([51.5، -0.09]). addTo (map ) .bindPopup ("مرحبا بالعالم!
أنا نافذة منبثقة. "). openPopup ()؛ L.circle ([51.508، -0.11]، 500، {color: 'red'، fillColor: '# f03'، fillOpacity: 0.5}). addTo (map). bindPopup ("أنا دائرة.") ؛ L.polygon ([[51.509، -0.08]، [51.503، -0.06]، [51.51، -0.047]]). addTo (map) .bindPopup ("أنا أ مضلع. ") ؛}) ؛} ؛

خضعت عملية معالجة الكود لموضع العارضين المتجهين إلى العديد من التعديلات مؤخرًا ، انظر على سبيل المثال https://github.com/Leaflet/Leaflet/issues/3919.

أفضل رهان هو تحديث صفحة الويب الخاصة بك لاستخدام Leaflet 1.0.0-beta2 بدلاً من إصدار beta1 الخاص بك.


ربما فات الأوان ، لكن يبدو أن CSS لا يتطابق مع إصدار JS؟

يقول JS "Leaflet 1.0-dev (46d2d6a) ... الإصدار: '1.0-dev'" الذي يطابق Leaflet 1.0 beta 1.

يبدو أن CSS الخاص بك يتوافق مع Leaflet 0.7.4 (على سبيل المثال ، ليس به.leaflet-map-pane svgأو.leaflet-map-pane canvas


شاهد الفيديو: 11 - Image Maps التعامل مع الخرائط فى ال html