أكثر

كتيب: انقر فوق الميزة للحصول على رسم تخطيطي خارجي

كتيب: انقر فوق الميزة للحصول على رسم تخطيطي خارجي


أنا أعمل على أ منشور خريطة الويب التي تتلقى طبقة بها مضلعات من ESRI REST API.

أريد أن أنفذ هذا: عندما ينقر المستخدم على مضلع ، يجب أن يظهر رسم تخطيطي أسفل الخريطة. يجب أن يستخدم الرسم البياني سمات المضلع (في حالتي قياسات سنوات مختلفة).

المعرف عام 1990 عام 1991 عام 1992 عام 1993 ... 1 -0.3 +2.2 -0.2 + 0.5 ... 2 -4.3 -5 +6.8 + 0.4 ...

فكرت في نقل سمات المضلع إلى JSON وتصورها باستخدام D3.js.

هل هذا منطقي بالنسبة لك؟ كيف يمكنك حل هذا؟


يمكنك أخذ سمات الميزة وتسليمها إلى مكتبة الرسوم البيانية. إذا لم تكن بحاجة إلى تغيير الكثير في تصميم المخطط ، يمكنك أيضًا استخدام C3.js فقط مما يجعل البدء أسهل ؛)

هنا يمكنك مشاهدة مثال:

http://jsfiddle.net/expedio/vtck4uzk/

وهذا هو جزء js:

your_featureLayer.on ('click'، function (evt) {feature = evt.layer.feature؛ $ ("# chart"). blank ()؛ var chart = c3.generate ({data: {names: {data1: ' ارتفاع السقف ، البيانات 2: "SurfAdj" ، البيانات 3: "SURF_Elev" ، data4: "AVG Height" ، data5: "Area"} ، // أخذت للتو بعض الحقول العشوائية لتوضيح // كيفية رسم أعمدة الرسم البياني: [[ 'data1'، feature.properties.ROOF_ELEV]، ['data2'، feature.properties.SURF_ADJ]، ['data3'، feature.properties.SURF_ELEV]، ['data4'، feature.properties.AVG_HEIGHT * 5]، [ 'data5'، feature.properties.SHAPE_AREA / 10]] ، الأنواع: {data1: 'bar'، data2: 'bar'، data3: 'bar'، data4: 'bar'، data5: 'bar'}}، محور : {rotated: false، x: {label: {text: 'Your Topics'، position: 'outside-middle'}}، y: {label: {text: 'Your_Values'، position: 'external-center'}} }}) ؛}) ؛

إذا كنت تستخدم مكونات Esri الإضافية لـ Leaflet ، فلديك بالفعل مستمع للأحداث لاستخدامه وخصائص الميزة متاحة بالفعل عبر خصائص GeoJSON.

yourLayer = L.esri.featureLayer ({url: 'http: // yourserviceurl / arcgis / rest / services /… / MapServer / 0'}). addTo (خريطة)؛ yourLayer.on ('click'، function (evt) {console.log (evt.layer.feature.properties)؛})؛

شاهد الفيديو: Bode Plot EXAMPLE