代码之家 › 专栏 › 技术社区 › Milano

OpenLayers中的卫星视图-如何设置?

openlayers html javascript

Milano · 技术社区 · 3 年前

是否可以向OpenLayers添加卫星视图?

这是我初始化OpenLayers的方法:

setupMap() {
                    this.map = new OpenLayers.Map("mapdiv");
                    this.map.addLayer(new OpenLayers.Layer.OSM(
                        "OpenStreetMap", [
                            "https://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
                            "https://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
                            "https://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
                        ]))

                    var lonLat = new OpenLayers.LonLat(9.5788, 48.9773).transform(
                        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                        this.map.getProjectionObject() // to Spherical Mercator Projection
                    );
                    var zoom = 11;
                    this.map.setCenter(lonLat, zoom);
                }

我试过了,但上面写着 a is null :

            setupMap() {
                this.map = new OpenLayers.Map("mapdiv");

                this.map.addLayer(new OpenLayers.Layer.XYZ({
                    attributions: ['Powered by Esri',
                        'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
                    attributionsCollapsible: false,
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                    maxZoom: 23
                }))

                var lonLat = new OpenLayers.LonLat(9.5788, 48.9773).transform(
                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                    this.map.getProjectionObject() // to Spherical Mercator Projection
                );
                var zoom = 11;
                this.map.setCenter(lonLat, zoom);
            },

错误

TypeError: a is null
    format http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:59
    getURL http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:608
    queueTileDraw http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:1351
    triggerEvent http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:138
    draw http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:486
    draw http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:488
    initGriddedTiles http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:514
    moveTo http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:502
    moveTo http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:190
    setCenter http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:184
    setupMap http://127.0.0.1:8000/dashboard/?tab=realestates:2997
    mounted http://127.0.0.1:8000/dashboard/?tab=realestates:2373
    VueJS 7
    <anonymous> http://127.0.0.1:8000/dashboard/?tab=realestates:2250
vue.js:1897:15
    VueJS 10
    <anonymous> http://127.0.0.1:8000/dashboard/?tab=realestates:2250

0 回复 | 直到 3 年前

Mike 3 年前

OpenLayers 2 XYZ语法类似于OSM,但您为 attribution (单数), numZoomLevels (比1大 maxZoom 在OpenLayers 3中,缩放级别从0开始,标准球形mercator OSM兼容的图块网格。

            this.map.addLayer(new OpenLayers.Layer.XYZ(
                "Satellite", [
                    "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${z}/${y}/${x}"
                ], {
                    attribution: "Powered by Esri. " + 
                        "Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community",
                    numZoomLevels: 24,
                    sphericalMercator: true
                }))