Carto v4 + StoryMap - 如何将 Carto 图层标记数据链接到 StoryMap 场景

如何解决Carto v4 + StoryMap - 如何将 Carto 图层标记数据链接到 StoryMap 场景

我一直在开发一个适用于 Carto.js v4 的 StoryMap 可视化（根据：https://github.com/jakobzhao/storymap/ 和特别是这个例子：https://bl.ocks.org/oriolbx/c2bd7fd47ffd448909daec58f88c28ae）。我已经能够设置标记弹出窗口以及一堆其他很酷的东西，比如它们之间的线条和俯冲箭头。不幸的是，当我尝试将这些标记放在不同的场景中时，我一直无法成功添加代码。

在下面的代码中，我设置了一个 Carto 图层，例如“const carLayer = new carto...”并将其添加到图层定义（图层：client.getLeafletLayer）中，然后在 StoryMap 部分中添加了对它的引用(layers.cartoLayer.layer.addTo(map2).

这适用于我放置它的任何场景中名为 cartoLayer 的图层。但是，当我想取出 cartoLayer 并使用“LisgooldLayer”Carto 图层在“Lisgoold”场景中使用特定标记时，然后使用 StoryMap 部分不会识别图层定义。我检查了 Carto.js 文档，但找不到定义图层的方法，以便 StoryMap 可以引用它。我可以让“layer4”显示没有问题，但不能显示 lisgooldLayer，其他示例项目中的大多数其他图层定义都使用 GEOJson。

这段代码中是否有我遗漏的内容？

提前致谢。

     // set CARTO client
       const client = new carto.Client({
         apiKey: '{CARTO-KEY}',username: '{CARTO-USER}'
       });
       const source = new carto.source.sql('
           SELECT * FROM CARTOSOURCE
       ');
       const sourceLisgoold = new carto.source.sql('
           SELECT * FROM CARTOSOURCE
           WHERE scene='Lisgoold'
       ');
       // define CartoCSS code to style data on map
       const style = new carto.style.CartoCSS('
         #layer{
             marker-fill: #336699;
             marker-allow-overlap: false;
         }
         #layer
           #layer[scene = "overview"]{
               marker-fill: #fbb4ae;
               marker-allow-overlap: false;
           }
           #layer[scene = "Lisgoold"]{
             marker-width: 20;
               marker-fill: #fbb4ae;
               marker-allow-overlap: false;
           }
           #layer[scene = "Salesman"]{
               marker-fill: #b3cde3;
               marker-allow-overlap: false;
           }
           #layer[scene = "England"]{
               marker-fill: #ccebc5;
               marker-allow-overlap: false;
           }
           #layer[scene = "SalesmanReturn"]{
               marker-fill: #333333;
               marker-allow-overlap: false;
           }
           #layer[scene = "USjourney"]{
               marker-fill: #ffffff;
               marker-allow-overlap: false;
           }
           #layer[scene = "WorkCanada"]{
               marker-fill: #336699;
               marker-allow-overlap: false;
           }
           #layer[scene = "LifeInChicago"]{
               marker-fill: #ff0000;
               marker-allow-overlap: false;
           }
           #layer[scene = "WorkUS"]{
               marker-fill: #fbfbfb;
               marker-allow-overlap: false;
           }
           #layer[scene = "TravelToUs"]{
               marker-fill: #fafafa;
               marker-allow-overlap: false;
           }
           #layer[scene = "FamilyTragedy"]{
               marker-fill: #ccc333;
               marker-allow-overlap: false;
           }

       ');
// create CARTO layer from source and style variables
const cartoLayer = new carto.layer.Layer(source,style,{
 featureOverColumns: (['scene','location_address','landmark_not_on_gis'])
});
const lisgooldLayer = new carto.layer.Layer(sourceLisgoold,'landmark_not_on_gis'])
});
// add CARTO layer to the client
client.addLayers([cartoLayer,lisgooldLayer]);
// define layers that will be used on the map
var layers = {
           basemap: {
               layer: L.tileLayer('https://cartocdn_{s}.global.ssl.fastly.net/base-antique/{z}/{x}/{y}.png')
           },cartoLayer: {
               layer: client.getLeafletLayer()
           },lisgooldLayer: {
              layer:  lisgooldLayer
           },layer4: {  //https://github.com/wbkd/leaflet-swoopy
            layer: L.swoopyArrow([53.4120954,-3.056141],[56.9900112,-31.7339369],{
              text: 'All aboard for Quebec!',weight: 10,opacity: 0.2,fontSize: 20,factor: -0.9,color: "#bb0017",iconAnchor: [0,0],iconSize: [200,150],textClassName: "arrow-label"
          })
          },layer5: {  //https://github.com/wbkd/leaflet-swoopy
           layer: L.swoopyArrow([54.5945837,-32.0337078],[54.5945837,-39.0337078],{
              text: 'worlds',weight: 2,opacity: 0.7,color: "#ffea00",0]
          })
          },};
// define scenes
let scenes = {
           overview: { lat: 51.9735556,lng: -152255582,zoom: 4,layers: [],name: "Home" },Home: { lat: 51.9735556,layers: ['basemap','cartoLayer'],Lisgoold: { lat: 51.9735556,lng: -8.2255582,zoom: 10,'lisgooldLayer'],name: "Lisgoold" },Salesman: { lat: 52.484837,lng: -8.2613306,zoom: 7,name: "Salesman" },England: { lat: 52.5945837,lng:-2.0337078,zoom: 9,name: "England" },SalesmanReturn: {lat: 51.9735556,name: "SalesmanReturn" },USjourney: {lat: 52.5945837,lng:-30.0337078,zoom: 5,name: "USjourney" },WorkCanada: {lat: 48.7321991,lng:-79.7597816,name: "WorkCanada" },TravelToUS: {lat: 47.0151458,lng:-94.7614612,zoom: 6,name: "TravelToUS" },WorkUS: {lat: 41.8333925,lng:-88.0121484,name: "WorkUS" },Marriage: {lat: 41.8270076,lng:-87.6455073,zoom: 14,name: "Marriage" },LifeInChicago: {lat: 41.8333925,zoom: 11,name: "LifeInChicago" },FamilyTragedy: {lat: 41.9028448,lng:   -87.6857373,name: "FamilyTragedy"},CrossingAtlantic: {lat: 52.5945837,'cartoLayer','layer4'],name: "CrossingAtlantic" },FamilyGraves: {lat: 41.8333925,name: "FamilyGraves"},StillInChicago: {lat: 41.8333925,name: "StillInChicago"}
};
// initializaze storymap
$('#storymap').storymap({
           scenes: scenes,layers: layers,baselayer: layers.basemap,legend: true,loader: true,flyto: false,credits: "Built with Carto,StoryMap and Leaflet,2021",scalebar: true,scrolldown: true,progressline: true,navwidget: true,createMap: function () {
   let map2 = L.map($(".storymap-map")[0],{ zoomControl: false }).setView([30,3);
   const popup = L.popup({closeButton: true});
cartoLayer.on('featureClicked',featureEvent => {
           var popup = L.popup()
           .setLatLng(featureEvent.latLng)
           let content = '';
             if (featureEvent.data.scene) {
                content += '<p>';
                content += featureEvent.data.scene;
                content += '</p><p>';
                content += featureEvent.data.landmark_not_on_gis;
                content += '</p><p>';
                content += featureEvent.data.location_address;
              }
            var line = L.polyline([
              [51.9674951,-8.2364881],[52.2662119,-8.2786411],[52.3745288,-7.9340018],[52.6801578,-7.8111139],[52.8555496,-7.5954776],[52.9628186,-7.7504342],[52.9391769,-7.6398531],[52.9942281,-7.4757189],[53.0426599,-7.3258656],[53.1674088,-6.9202995],[53.1443264,-6.8470534],[53.1062715,-6.0733409],[53.3242381,-6.3857864],[53.3288689,-6.2392783],[53.2650105,-6.1237033],[53.1970187,-6.1308245],[52.9825088,-6.0602595],[52.7950711,-6.1748422],[52.8581642,-6.2179385],[52.8824992,-6.2431992],[52.6757346,-6.303057],[52.5058482,-6.5894459],[52.5031391,-6.5624348],[52.3945888,-6.9615096],[52.2474998,-7.1480493],[52.0914087,-7.6386446],[51.9534288,-7.8755096],[51.9674951,-8.2364881]
            ]);
 map2.addLayer(line);
 var animatedMarker = L.animatedMarker(line.getLatLngs());
 map2.addLayer(animatedMarker);
 // add values to Leafet popup element
 popup.setContent(content).openOn(map2);
});
 // add basemap
 this.baselayer.layer.addTo(map2);
 // add carto layer
 layers.cartoLayer.layer.addTo(map2);
 //layers.lisgooldLayer.layer.addTo(map2);
 return map2;
}
});

解决方法

我认为你没有在 const where 上转义你的引号；

const sourceLisgoold = new carto.source.SQL(' 从CARTOSOURCE中选择* WHERE scene='Lisgoold' ');