أكثر

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

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


أنا أعمل على مشروع رسم الخرائط حيث أريد أن يتمكن المستخدم النهائي من تصفية البيانات. أعطاني هذا البرنامج التعليمي (http://docs.cartodb.com/tutorials/toggle_map_view.html) طريقة للقيام بذلك ، بحيث يمكن للمستخدم النهائي التصفية بفعالية من خلال النقر على الأزرار. حيث أكون عالقًا الآن هو أن خريطتي بها طبقتان (واحدة للنقاط والأخرى للخطوط) ، وأريد أن ينطبق الزر على كلتا الطبقتين بدلاً من واحدة فقط. ما هي أجزاء الكود التي أحتاج إلى تغييرها لتحقيق ذلك ، وما هي التغييرات التي أحتاج إلى إجرائها؟

الجزء الذي أنظر إليه بشكل خاص من البرنامج التعليمي هو:

var sublayer = [] ؛ cartodb.createLayer (map، layerUrl). addTo (map). on ('done'، function (layer) {// غيّر الاستعلام عن الطبقة الأولى var subLayerOptions = {sql: "SELECT * FROM ne_10m_populated_places_simple"، cartocss: " # ne_10m_populated_places_simple {marker-fill: # F84F40؛ marker-width: 8؛ marker-line-color: white؛ marker-line-width: 2؛ marker-clip: false؛ marker-allow-interap: true؛} "} var sublayer = layer.getSubLayer (0) ؛ sublayer.set (subLayerOptions) ؛ sublayers.push (الطبقة الفرعية) ؛}). on ('error'، function () {// log the error})؛ // نحدد الاستعلامات التي سيتم تنفيذها عند النقر على الأزرار ، عن طريق تعديل SQL الخاص بطبقتنا var LayerActions = {all: function () {sublayers [0] .setSQL ("SELECT * FROM ne_10m_populated_places_simple") ؛ العودة صحيح }، capitals: function () {sublayers [0] .setSQL ("SELECT * FROM ne_10m_populated_places_simple WHERE featurecla = 'Admin-0 capital'")؛ العودة صحيح }، megacities: function () {sublayers [0] .set ({sql: "SELECT * FROM ne_10m_populated_places_simple WHERE megacity = 1"، // كما يُقال ، يمكنك أيضًا إضافة بعض كود CartoCSS لجعل نقاطك تبدو مثلك تريد الاستعلامات المختلفة // cartocss: "# ne_10m_populated_places_simple {marker-fill: black؛}"})؛ العودة صحيح }}

تحرير: في الوقت الحالي ، يبدو أنه يمكنني تحقيق ذلك من خلال جعل وظائف الزر تقوم بإجراءين (على سبيل المثال ، حدد x من جدول واحد ، حدد x من الجدول الآخر). هل هذا ممكن؟ إذا كان الأمر كذلك ، فكيف؟


لا أعرف ما إذا كانت هذه هي أفضل طريقة لحل هذه المشكلة ، لكنني تمكنت من جعلها تعمل بالرجوع إلى CartoDB وعمل خريطتين منفصلتين بدلاً من وجود خريطة واحدة بطبقتين. (كنت أواجه مشكلات مع النقاط والخطوط التي تظهر مرتين وتصفيتها جزئيًا ، وما إلى ذلك) قمت بتكرار النصف الأول (على سبيل المثال varlayerURL -> سجل الخطأ) وأضفت "2" في كل مكان:

var layer2Url = 'https://myusername.cartodb.com/ap/blahblahblah' ؛ var sublayers2 = [] ؛ cartodb.createLayer (map، layer2Url) .addTo (map). on ('done'، function (layer) {var subLayer2Options = {sql: "SELECT * FROM my_map_name"، cartocss: "#my_map_name {marker-fill-opacity: 0.9 ؛ لون خط العلامة: #FFF ؛ عرض خط العلامة: 1 ؛ عتامة خط العلامة: 1 ؛ وضع العلامة: نقطة ؛ نوع العلامة: القطع الناقص ؛ عرض العلامة: 10 ؛ تعبئة العلامة: # F11810؛ marker-allow-interap: true؛} "} var sublayer2 = layer.getSubLayer (0)؛ sublayer2.set (subLayer2Options)؛ sublayers.push (sublayer2) ؛}). on ('error'، function () { // تسجيل الخطأ}) ؛

ثم قمت بتعديل النصف الثاني عن طريق تغيير هذا:

var LayerActions = {all: function () {sublayer [0] .setSQL ("SELECT * FROM ne_10m_populated_places_simple")؛ العودة صحيح } ،

ل

var LayerActions = {all: function () {sublayer [0] .setSQL ("SELECT * FROM ne_10m_populated_places_simple")؛ الطبقات الفرعية [1] .setSQL ("SELECT * FROM next_layer_name") ؛ العودة صحيح } ،

شاهد الفيديو: Visualizing Fulcrum Video Tracks With CartoDB