堆棧內存溢出
  簡體   English   中英

如何通過復選框在開放層 map 上添加層？

[英]How to add layers on open layers map through a checkbox?

 原文  2018-04-23 08:33:11  1   3    javascript

問題描述

 <html> <head> <title>Single Image WMS</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css"> <.-- The line below is only needed for old environments like Internet Explorer and Android 4:x --> <script src="https.//cdn.polyfill.io/v2/polyfill.min?js,features=requestAnimationFrame.Element.prototype,classList:URL"></script> <script src="https.//openlayers.org/en/v4.6.4/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <script> var layers = [ new ol.layer:Tile({ source. new ol.source.OSM() new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//': params: {'LAYERS', '//'}: ratio, 1: serverType, 'geoserver' }) }). new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//': params: {'LAYERS', '//'}: ratio, 1: serverType, 'geoserver' }) }). new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//': params: {'LAYERS', '//'}: ratio, 1: serverType, 'geoserver' }) }). new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//': params: {'LAYERS', '//'}: ratio, 1: serverType, 'geoserver' }) }). new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//': params: {'LAYERS', '//'}: ratio, 1: serverType, 'geoserver' }) }). new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//s': params: {'LAYERS', '//'}: ratio, 1: serverType, 'geoserver' }) }). new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//': params: {'LAYERS', '//'}: ratio, 1: serverType; 'geoserver' }) }) ]. var map = new ol:Map({ layers, layers: target, 'map': view. new ol:View({ center. ol.proj.fromLonLat([73,6608. 29,8820]): zoom; 9 }) }); </script> </body> </html>

所有層都必須采用復選框的形式，並且在選中該框時，必須將以下內容添加到 map？ 所有層都必須采用復選框的形式，並且在選中該框時，必須將以下內容添加到 map？ 所有層都必須采用復選框的形式，並且在選中該框時，必須將以下內容添加到 map？

3 個解決方案

解決方案1
 1 已采納  2018-04-23 19:39:15

首先需要（Layer Switcher Control）js + css，可以從此鏈接下載它們：

https://github.com/GitiFarazPishro/ol3-ext/tree/gh-pages/control

然后，您可以在控制切換器中定義圖層，如下所示： 

//for the baselayer
       var Base = {}

    Base['1'] = new ol.layer.Tile({
        source: new ol.source.OSM(),
        baseLayer: true,
        displayInLayerSwitcher: true,
        visible: true,
        title: "Base Layer"
    });

//for the other layers:

    var questionLayers = {};

    questionLayers['1'] =  new ol.layer.Tile({
        source: new ol.source.OSM(),
        visible: false,
        title: "1"
    });

    questionLayers['2'] =  new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "2"
    });

    questionLayers['3'] =  new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "3"
    });

    questionLayers['4'] =  new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "4"
    });

    questionLayers['5'] =  new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "5"
    });

    questionLayers['6'] =  new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "6"
    });
    questionLayers['7'] =   new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "7"
    });

    questionLayers['8'] = new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "8"
    });

    var stack = new ol.layer.Group({
        title: 'Question Layers',
        openInLayerSwitcher: false,
        visible: false,
        layers: Object.values(questionLayers)});

定義地圖和控件： 

// this function to take the layers as array and add them into the switcher
        function LayersToArray(layer) {
                var array = [];
                for( key in layer)
                 array[array.length]= layer[key];
                return array;
            }

        var map = new ol.Map({
                    target: 'map',
                    logo:false,
                    view: new ol.View({
                  center: ol.proj.fromLonLat([73.6608, 29.8820]),
                  zoom: 9
                    }),

                 controls: ol.control.defaults().extend([
                        new ol.control.LayerSwitcher,
    ]),
                    layers:  LayersToArray(Base).concat( [stack] )

                });

您的地圖應該是這樣的：

在此處輸入圖片說明

解決方案2
 0  2018-04-24 08:12:48

如果您想自定義自己的圖層切換器，則可以沿此路徑進行操作 

// adding layer into variable
var osmBasic = new ol.layer.Tile({
  source: new ol.source.OSM()
});
// adding/removing layer
$('#customCheck1').on('change', function() {
  var isChecked = $(this).is(':checked');
  if (isChecked) {
    map.addLayer(osmBasic)
  } else {
    map.removeLayer(osmBasic);
  }
})

這是一個示例： https : //jsfiddle.net/Svinjica/tqoLaLx8/

解決方案3
 0  2022-08-26 04:53:34

我將解釋如何添加新的 map 層？ 添加一個復選框或 select 輸入來選擇圖層有點容易

首先，您需要添加ol-mapbox-style庫。 該庫將開放圖層與 mapbox（具有很多圖層樣式的地圖相關庫）結合在一起。

npm install ol-mapbox-style --save

之后，一旦創建了 map，就可以應用從 url 中提取的層。 您將需要您的 mapbox 令牌才能使用 api。

import { apply } from 'ol-mapbox-style';

apply('map', 'https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=YOUR_MAPBOX_TOKEN');

The 'map' is the map object from open layers and the 'bright-v9' in the url is the actual layer applied to the map

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 解構一個開放的圖層3地圖 如何解決OPEN LAYERS 3地圖中的“ za”錯誤？ 如何在打開的圖層中添加搜索框 3 將地圖標記添加到 Open Layers 6 打開圖層地圖不加載GeoJSON 在地圖上遍歷WMS圖層 是否可以使用D3將svg元素添加到打開的圖層地圖？ 如何在“打開圖層”中使用地理坐標校准地圖圖像？ 復選框邏輯在打開的圖層 js 文件中不起作用 如何添加 [UP] -3 [DOWN] 控件以在自定義地圖上的圖層之間切換？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM