d3.js неправильно отображает данные геойсона - PullRequest
Новая
       16

d3.js неправильно отображает данные геойсона

1 голос
/ 26 июня 2019

Я пытался заставить d3.js правильно отобразить данные geoJSON в SVG. Следующий JSFiddle показывает проблему

http://jsfiddle.net/8zjb3yrq/

Вы заметите, что результат скрипки создает белый объект на сером фоне, но вместо этого он должен показывать серый объект на белом фоне. В основном это показывает желаемую форму как отверстие в остальной части карты. Я пытался показать несколько таких фигур, но из-за этого они накладываются друг на друга, и я вижу только последнюю. Я извлекаю данные из поля географии в SQL Server, преобразовываю их в geoJSON и передаю на эту страницу. Некоторые формы отображаются правильно, а другие нет, и я еще не нашел шаблон. Я использовал http://geojsonlint.com/ и http://geojson.io для проверки geoJSON, и они показывают его правильно.

Мой код JavaScript выглядит так: 

$(function() {

var mapData = JSON.parse('{"type": "FeatureCollection", "features": 
[{"type": "Feature", "properties": {"name": "Bear Lake Schools"}, "geometry":{"type": "MultiPolygon","coordinates":[[[[-86.070382504247434,44.425073643644744],
...
[-86.171655793200145,44.374257397888158]]]] }}]}');

var svg = d3.select("svg");
var width = 960;
var height = 600;

var projection = d3.geoMercator().scale(4000).center([-83, 43]);
var path = d3.geoPath().projection(projection);

svg.attr("width", width).attr("height", height)

svg.append("g")
  .classed('map-layer', true)
  .selectAll("path")
  .data(mapData.features)
  .enter().append("path")
  .attr("d", path);
});

Что мне нужно сделать, чтобы это правильно отображалось?

1 Ответ

0 голосов
/ 26 июня 2019

В операторе SELECT при получении данных с SQL Server я добавил ReorientObject () к предложению, как показано ниже.Тогда мои фигуры появились правильно. 

SELECT Location.ReorientObject().STAsText() AS WKT FROM MyTable
...