堆栈内存溢出
  简体   繁体   English

如何通过复选框在开放层 map 上添加层？

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

 原文  2018-04-23 08:33:11  9   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>

All the layers must be in form of a checkbox and on checking the box the following must be added to the map?所有层都必须采用复选框的形式，并且在选中该框时，必须将以下内容添加到 map？ All the layers must be in form of a checkbox and on checking the box the following must be added to the map?所有层都必须采用复选框的形式，并且在选中该框时，必须将以下内容添加到 map？ All the layers must be in form of a checkbox and on checking the box the following must be added to the map?所有层都必须采用复选框的形式，并且在选中该框时，必须将以下内容添加到 map？

3 个解决方案

解决方案1
 1 已采纳  2018-04-23 19:39:15

You need first (Layer Switcher Control) js+css, you can download them from this link: 首先需要（Layer Switcher Control）js + css，可以从此链接下载它们：

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

Then you can define your layers in the control switcher like this: 然后，您可以在控制切换器中定义图层，如下所示： 

//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)});

Define your map & control: 定义地图和控件： 

// 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] )

                });

And your map, should be like this: 您的地图应该是这样的：

在此处输入图片说明

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

If you want customize your own layer switcher you can do something along this path 如果您想自定义自己的图层切换器，则可以沿此路径进行操作 

// 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);
  }
})

Here is an example: https://jsfiddle.net/Svinjica/tqoLaLx8/ 这是一个示例： https : //jsfiddle.net/Svinjica/tqoLaLx8/

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

I am gonna explain just How to add a new map layer?我将解释如何添加新的 map 层？ Adding a checkbox or a select input to choose the layer is kinda easy添加一个复选框或 select 输入来选择图层有点容易

First of all, you will need to add ol-mapbox-style library.首先，您需要添加ol-mapbox-style库。 This library combines open layers with mapbox (map-related library which has a lot of layer styles).该库将开放图层与 mapbox（具有很多图层样式的地图相关库）结合在一起。

npm install ol-mapbox-style --save

Afterwards, once you have your map created, you apply the layer pulled from the url.之后，一旦创建了 map，就可以应用从 url 中提取的层。 You will need your mapbox token to use the api.您将需要您的 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 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地图 - Deconstructing an Open Layers 3 map 如何解决OPEN LAYERS 3地图中的“ za”错误？ - How to resolve 'za' error in OPEN LAYERS 3 map? 如何在打开的图层中添加搜索框 3 - How to add a search box in open layers 3 将地图标记添加到 Open Layers 6 - Adding map markers to Open Layers 6 打开图层地图不加载GeoJSON - Open layers map not loading GeoJSON 在地图上遍历WMS图层 - Looping through WMS Layers on a map 是否可以使用D3将svg元素添加到打开的图层地图？ - Is it possible to add an svg element to an open layers map with D3? 如何在“打开图层”中使用地理坐标校准地图图像？ - How to calibrate map image with geo coordinates in Open Layers? 复选框逻辑在打开的图层 js 文件中不起作用 - checkbox logic not working in open layers js file 如何添加 [UP] -3 [DOWN] 控件以在自定义地图上的图层之间切换？ - How to add [UP] -3 [DOWN] controls to switch between layers on a custom map?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM