Openlayers实战：加载OpenStreetMap（快速显示无加载不出状态）-白红宇

Openlayers实战：加载OpenStreetMap（快速显示无加载不出状态）

阅读量：800 次

发布时间：2023-02-24

本文共 1349 字，大约阅读时间需要 4 分钟。

Openlayers?Openstreetmap????


    
        Openlayers?Openstreetmap??????????????????????Openlayers????????????????????????????Openstreetmap???????????????????????????????????????????????????????
    
    
    Openlayers????
    
        Openlayers????????????????????????WGS84? Mercator??????????????????????????API???????????????????????Openlayers??????????????????????????????
    
    
    Openstreetmap???
    
        Openstreetmap???????????????????????????????????????????????????????Openstreetmap??????API???????????????????????????????????
    
    
            
     
        
            // Openlayers????
            const map = new ol.Map({
                view: new ol.View({
                    center: ol.proj.fromLonLat([0, 0]),
                    zoom: 2
                })
            });
            // Openstreetmap????
            fetch('https://tile.openstreetmap.org/tiles/{z}/{x}/{y}.png')
                .then(response => response.blob())
                .then(data => {
                    const url = URL.createObjectURL(data);
                    const img = document.createElement('img');
                    img.src = url;
                    document.body.appendChild(img);
                });
        
    
    
    
        ??????????????????????????Openlayers????????????????Openstreetmap????????????????????????????????????????