Как преобразовать карту для использования файла topo json с использованием широты и долготы? - PullRequest
Новая
       54

Как преобразовать карту для использования файла topo json с использованием широты и долготы?

0 голосов
/ 13 июля 2020

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

Однако я не смог понять, как / где найти центроид для определения цвета окрестности на основе подсчета из csv. (Если это поможет, рабочая карта находится здесь https://www.waremail.ca/chart/map-cumulative-toronto-covid-19-sporadic-and-outbreak-cases-neighbourhoods. Мне не удалось найти файл geo json для области, которую я хочу отобразить.)

Это извлечение соответствующего кода для исходного приложения geo json. Буду признателен за любую помощь. 

d3.json(torontoMapGEOJSON, function(neighbourhoods) {
   d3.csv(torontoNeighbourhoodCSV, function(outbreaks) { 
      var svg1 = d3.select("#map")
      .append("svg")
      .attr("width", width)
      .attr("height", height);

      outbreaks.forEach(function(d, i) {
           neighbourhoods.features.forEach(function(e, j) {  
               if (d.NeighbourhoodName === e.properties.AREA_NAME) { 
                   e.properties.Name = d.Name;
                   e.properties.outbreakCases = +d.OutbreakCases;
                   e.properties.outbreakPercapita = +d.OutbreakPercapita;
                   e.domain = getOutbreakRange(+e.properties.outbreakPercapita); 
                   }
            })
          }
      ) // end forEach

// create a first guess for the projection
var center = d3.geo.centroid(neighbourhoods);
var s1  = widthTransform; // was 150 - no effect
var t1=[widthTransform,heightTransform];

var proj1 = d3.geo.mercator()
    .scale(s1)
    .center(center)
    .translate(t1);

// create the first path
var path1 = d3.geo.path()
  .projection(proj1);

// using the original path determine the bounds of the current map and use
// these to determine better values for the scale and translation
var bounds  = path1.bounds(neighbourhoods);
var hscale  = s1*width  / (bounds[1][0] - bounds[0][0]);
var vscale  = s1*height / (bounds[1][1] - bounds[0][1]);
var s2   = (hscale < vscale) ? hscale : vscale; // IMPORTANT
var t2  = [width + xAdjust - (bounds[0][0] + bounds[1][0])/2, 
               height + yAdjust - (bounds[0][1] + bounds[1] [1])/2]; 

 // new projection
proj2 = d3.geo.mercator()
 .center(center)
 .scale(s2)
 .translate(t2);

//draw scaled map of Toronto with neighbourhood boundaries
path2 = path1.projection(proj2);
var t2 = proj2.translate(); // the projection's revised translation
var s2 = proj2.scale(); // the projection's revised scale

var paths = svg1.append("g");

paths.selectAll("path2")
   .data(neighbourhoods.features)
   .enter()
   .append("path")
   .attr("d", path2)   
   .style("fill", function(d) {
          return colors(d.domain);
          } )    
    .style("opacity","0.8")
    .style("stroke-width", "2")
    .style("stroke", "grey");

// this is where to mark the centroid of each neighbourhood
paths.selectAll("path2")
    .data(neighbourhoods.features) 
    .enter()
    .append("path2")
    .attr("d", path2);


function getOutbreakRange(count) { 
    if (count > 1199) {
        return "1,200 or more";
    } else if (count > 999) { 
        return "1,000-1,199";
    } else if (count > 799) { 
        return "800 - 999";
    } else if (count > 599) { 
        return "600 - 799";
    } else if (count > 399) { 
        return "400 - 599";
    } else if (count > 199) { 
        return "200 - 399";
    } else {
        return "less than 200";
    }
 } // end getRange

}); // end of cases csv
}); // end of neighbourhoods.json
...