时间戳

首页 > 解决方案 > OpenLayers 中的卫星视图 - 如何设置？

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

问题描述

是否可以向 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

标签： javascripthtmlopenlayers

解决方案

OpenLayers 2 XYZ 语法类似于 OSM，但您添加了attribution（单数）选项（numZoomLevels比maxZoomOpenLayers 3 大 1，因为缩放级别从 0 开始，标准球形墨卡托 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
                }))

推荐阅读