Question

我试图在carto featureClick上获取Lat和Long的各个值。我想点击某个功能并获取每个功能的各个纬度和经度值，但值是“未识别”，任何人都可以帮忙吗？我尝试过使用data.lat和data.latlng.lat等。

JS：

var lat;
var lon;
var geom;
var polygon;
var radius = 300000; // in meters
var geom1 = [];
var points;

// Create the map and center it on the US
var map = new L.Map('map', {
    center: [46.5444394,-86.3288595],
    zoom: 11,  
  });  

// Add the dark matter base map
 L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
      attribution: 'Dark matter'
    }).addTo(map);

var bases = cartodb.createLayer(map, {
  user_name: 'bobcowling',
  type: 'cartodb',
  sublayers: [{
    sql: "SELECT * FROM mirta_points",
    cartocss: '#mirta_points{marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 1.5; marker-width: 10; marker-fill: #3B007F; }'
  }]
}).on("done",function(lyr){

    lyr.on('featureClick', function(e, latlng, pos, data, lyr){
            lat = data.lat;
            lon = data.lon;
        console.log(lat, lon);

            // cartodb sql api
            var sql = new cartodb.SQL({ user: 'bobcowling'});

            // select the attribute tables to extract from CartoDB table
            sql.execute("WITH point as(SELECT ST_SetSRID(ST_Point('" + lon + "','" + lat + "'),4326) as the_geom)SELECT ST_asGeoJson(ST_Transform(ST_Buffer(ST_Transform(the_geom,3857),'" + radius + "'),4326)) as geom FROM point")
            .done(function(data){
              if(polygon){
                map.removeLayer(polygon);

              }
              geom = data.rows[0].geom;

              polygon = L.geoJson(JSON.parse(geom),{
                            style:{
                              color: "#000",
                              weight: 1,
                              fillColor: "#9999ff",
                              fillOpacity: 0.2
                            }
            });

            map.addLayer(polygon)

      }); // end sql api call
            var sql2 = new cartodb.SQL({ user: 'bobcowling'});

            // select the attribute tables to extract from CartoDB table
            sql2.execute("SELECT ST_asGeoJSON(the_geom) as geometry, country from ufosightings2015 WHERE country = 'USA'                         AND ST_Intersects((SELECT ST_Buffer(ST_Transform(ST_SetSRID(ST_Point('" + lon + "','" + lat + "'),4326),3857),'" + radius + "')),ST_Transform(the_geom,3857))")

            .done(function(data){
              if(points){
                points = [];
                map.removeLayer(points);
                geom1 = [];
              }

              for(i = 0; i < data.total_rows; i++){
                geom1 = data.rows[i].geometry;

                points = L.geoJson(JSON.parse(geom1),{
                            style:{
                              color: "#000",
                              weight: 2,
                              fillColor: "#fff"
                            }

                });

                 map.addLayer(points)
              }
      }); // end sql api call

    }); // end click map_object   

    bases = lyr;
    cartodb.vis.Vis.addInfowindow(map, lyr.getSubLayer(0), ['site_name']);
    bases.addTo(map);      
  })        

var sightings = cartodb.createLayer(map, {
  user_name: 'bobcowling',
  type: 'cartodb',
  sublayers: [{
    sql: "SELECT * FROM ufosightings2015",
    cartocss: '#mirta_points{marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 1.5; marker-width: 10; marker-fill: green; }'
  }]
}).on("done",function(lyr){    
    sightings = lyr;
    cartodb.vis.Vis.addInfowindow(map, lyr.getSubLayer(0), ['city', 'state', 'duration', 'shape']);
    sightings.addTo(map);      
  })

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>UFO Sightings Analysis</title>

        <!--put your external stylesheet links here-->
        <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/BootSideMenu.css">
        <link rel="stylesheet" href="css/style.css">
        <!--[if IE<9]>
            <link rel="stylesheet" href="css/style.ie.css">
        <![endif]-->
    </head>

    <body>
        <!--put your initial page content here-->
         <div id="map"></div>

        <!--put your external script links here-->
        <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
        <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="js/BootSideMenu.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </body>
</html>

CSS

html, body, #map {
  width: 100%;    
  height:100%;
  position: absolute;


}

Answer 1

终于明白了。不得不使用“sublayer.setInteractivity（”lat，lon“）;”我不得不为经纬度分层。如果您使用的是the_geom，首先必须通过查询从the_geom获取lat和lon。 Carto真的需要更好的文档。

LatLng即将上映尚未确定

1 个答案: