Question

我想创建一个离线地图，使用topoJSON和openlayers来生成地图。

我将JSON作为blob放入indexeddb并尝试将blob转换回JSON。一切正常，直到我想要将blob转换回来。我收到错误：[object％20Promise]无法加载资源：服务器响应状态为404（未找到），

（Dexie只是一个indexeddb包装器）

＆＃13;

    var db = new Dexie("json_db");
db.version(1).stores({
    jsons: '++id'
});

getBlobAndPutInDB("https://openlayers.org/en/v4.6.5/examples/data/topojson/world-110m.json");

function initMap() {

    var style = new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.6)'
        }),
        stroke: new ol.style.Stroke({
            color: '#319FD3',
            width: 1
        })
    });

    var vector = new ol.layer.Vector({
        source: new ol.source.Vector({

            url: blobToJSON(),
            format: new ol.format.TopoJSON({
                layers: ['countries']
            }),
            overlaps: false
        }),
        style: style
    });

    var map = new ol.Map({
        layers: [vector],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 1
        })
    });

}

async function blobToJSON() {

    let blob = await db.jsons.get(2);
    var file = new File([blob], "map.json", { type: "application/json", lastModified: Date.now() });
    return file;
}

function getBlobAndPutInDB(url) {

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function (e) {
        if (this.status === 200) {
            var myBlob = this.response;
            db.jsons.put(myBlob);
        }
    };
    xhr.send();
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Map</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="OfflineMap.js"></script>
</head>
<body>
    <div id="map" class="map"></div>
    <script>initMap();</script>
</body>
</html>

＆＃13;

也许有人知道该怎么做：）

Answer 1

您在此处为网址分配了一个承诺：网址：blobToJSON()。您需要先解决承诺才能使用结果。

脱机映射，使用indexeddb和JSON文件

1 个答案: