在地面下绘制地图的一部分

时间:2017-10-03 14:32:47

标签: javascript plot mapbox plotly

我想使用plotly(javascript)可视化我的地理数据。我已在其上方绘制了一个曲面和一些数据点,如下所示: enter image description here 这是我的代码:

var x_completed = [];
    for (var i=0;i < column_count;i++) {
        x_completed.push(full_data_list[i].lng);
    }
    var y_completed = [];
    for (var i=0;i < row_count;i++) {
        y_completed.push(full_data_list[i*column_count].lat);
    }
    var z_completed = [];
    for (var i = 0; i < row_count; i++) {
        row = [];
        for (var j = 0; j < column_count; j++) {
            row.push(full_data_list[i*column_count+j].p_val);
        }
        z_completed.push(row);
    }

    x_org = [];
    y_org = [];
    z_org = [];
    for (var i = org_data.length - 1; i >= 0; i--) {
        dp = org_data[i];
        x_org.push(dp.lng);
        y_org.push(dp.lat);
        z_org.push(dp.p_val);
    }
    var trace = {
            x: x_org, 
            y: y_org, 
            z: z_org,
            mode: 'markers',
            name: 'Original Measurement',
            marker: {
              size: 5,
              line: {
              color: 'rgba(217, 217, 217, 0.14)',
              width: 0.5},
              opacity: 0.8},
            type: 'scatter3d'
          };

    var data_z = {x: x_completed, y: y_completed, z: z_completed, type: 'surface', name: 'Inferred Data using Matrix Completition'};
    var layout = {
        scene: {
            xaxis:{title: 'Latitude'},
            yaxis:{title: 'Longitude'},
            zaxis:{title: 'CO2'},
        },
        autosize: true,
        margin: {
            l: 0,
            r: 0,
            b: 50,
            t: 50,
            pad: 4
        },
    }   
    Plotly.newPlot('map', [data_z,trace],layout);

现在我的问题是我想在表面下绘制相应的地理区域,这样每个人都可以轻松地知道数据的来源。我试过谷歌搜索但我无法弄清楚如何将2D图像(或地图的一部分)包含到3D环境中。我看过scattermapbox,但它只允许2D地图。你能建议我吗? 非常感谢。

0 个答案:

没有答案