Question

我正在尝试在使用D3创建的地球上绘制一个线串，但不知怎的，它显示错误。

以下是设置投影和路径的方法

        _onButtonPress: function () {

         var xhr = new XMLHttpRequest();

        xhr.open('GET', this.getView().byId("sap_Responsive_Page_0-content-sap_ui_layout_form_SimpleForm-1476966827717-content-sap_m_Input-1476966871600").getValue(), true);
        xhr.send();
        xhr.onreadystatechange = processRequest;
        function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
    var response = (xhr.responseText);
    alert(response);    }
}},

然后我将它绘制到画布上（使用路径功能）

var projection = d3.geo.orthographic()
    .translate([width / 2, height / 2])
    .scale(scale)
    .clipAngle(90);

var path = d3.geo.path()
    .projection(projection)
    .context(context);

route 变量是一个GeoJSONn行字符串，我可以在传单地图上绘制路线，一切都按预期工作，但是当我尝试在地球上绘制它时，它只是出现了错误。

我认为它与预测有关，但我不是导致这种情况的原因。有谁知道如何纠正它？

Answer 1

而不是填充在画布上绘制的路径，而只需要抚摸它：

    // the route
    context.fillStyle = '#000';
    context.strokeStyle = '#000';
    context.beginPath();
    path(route);
    context.stroke();   // Just stroke the path
    //context.fill();   // You don't want to fill the path

这只会按预期绘制线条。看看这个工作Plunk。

Answer 2

或者，如果您需要指定填充，只需将其设置为背景颜色（此处为#ccc）

// the route 
context.fillStyle = '#ccc';
context.strokeStyle = '#000';
context.beginPath();
path(route);
context.fill();
context.stroke();

使用D3投影在画布上绘制GeoJSON线串

2 个答案: