Проблемы с добавлением векторов d3 на карту листовки - PullRequest
Новая
       10

Проблемы с добавлением векторов d3 на карту листовки

0 голосов
/ 08 октября 2018

Я пытаюсь получить очки для наложения на карту листовки.

Я создаю элемент Map в html, строю карту листовки, читаю данные.

Вот где меня срывают.Я хотел бы отобразить точки на карте - я уже успешно отобразил эти точки на карте d3, но я хочу повторно отобразить их на приведенной выше карте листовки.Вместо того, чтобы извлекать lat / longs, как я видел в примерах листовок d3 +, я подумал, что просто буду использовать функцию генератора пути, которую я успешно использовал ранее, для добавления точек к листовке.

Последовательность кода здесь: 

    <div id="map" class="sf" style="width: 600px; height: 400px"></div>

     function ready(error) {

         //Build Leaflet map
         L.mapbox.accessToken = 

'pk.eyJ1Ijoic3RhcnJtb3NzMSIsImEiOiJjaXFheXZ6ejkwMzdyZmxtNmUzcWFlbnNjIn0.IoKwNIJXoLuMHPuUXsXeug';
                var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}';
                //var accessToken = 'pk.eyJ1Ijoic3RhcnJtb3NzMSIsImEiOiJjam13ZHlxbXgwdncwM3FvMnJjeGVubjI5In0.-ridMV6bkkyNhbPfMJhVzw';
                var map = L.map('map').setView([37.7701177, -122.40], 13);
                    mapLink = 
                '<a href="http://openstreetmap.org">OpenStreetMap</a>';
                 L.tileLayer(
        'https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
            tileSize: 512,
            zoomOffset: -1,
            attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);

  // Read in the json data          
 d3.json("data/SanFrancisco_CoWorkingTenants.json", 
 function(SFData) {
     var SFData = SFCoworking.features
     console.log(SFData) // this prints successfully
    })


  var mapSVG = d3.select( "#map").select("svg")
  mapG = mapSVG.append("g");

   // Define d3 projection
   var albersProjectionBay = d3.geoAlbers()
        .scale( 282000)
        .rotate ( [122.4077441,] )
        .center( [0, 37.7701177] )

    // Define d3 path
    var geoPathBayArea = d3.geoPath()
        .projection( albersProjectionBay );


   var SFData = SFCoworking.features
       console.log(SFData)

    // draw points on map with d3 path generator 
    var feature = mapG.selectAll("path")
            .data(SFCoworking.features)
            .enter().append("path")
            .style("stroke", "black")  
            .style("opacity", .6) 
            .style("fill", "red")
            .attr("r", 20)
            .attr( "d", geoPathBayArea )
            console.log(feature) // nothing prints!

        }

Пока SFdata отображается в консоли, функции, при выводе на консоль, просто отображаются в виде пустого массива.Это наводит меня на мысль, что может быть проблема в том, как я добавляю элемент svg на карту?

1 Ответ

0 голосов
/ 10 октября 2018

Спасибо всем - похоже, сработало. 

        var svgLayer = L.svg();
            svgLayer.addTo(map);

            var svgMap = d3.select("#map").select("svg");
            var g = svgMap.select('g');

        d3.json("data/SanFrancisco_CoWorkingTenants.json", function(SFData) {
            var SFData = SFCoworking.features
            console.log(SFData)
            })
        SFData.forEach(function(d) {
            d.latLong = new L.LatLng(d.properties.Latitude,
                                    d.properties.Longitude);
            //console.log(d.LatLng)
        })
        var feature = g.selectAll("circle")
            .data(SFData)
            .enter().append("circle")
            .style("stroke", "black")
            .style("opacity", .4)
            .style("fill", "red")
            .attr("r", 20)
            .attr("class", 'features')
...