OpenLayers 2.10 Beginners Guide 阅读笔记（第三章）

最新推荐文章于 2023-05-12 18:50:29 发布

我有明珠一颗

最新推荐文章于 2023-05-12 18:50:29 发布

阅读量232

点赞数

分类专栏： GIS 文章标签： OpenLayers 2.10 Beginners Guid 阅读笔记

本文链接：https://blog.csdn.net/m0_37738114/article/details/87949180

版权

GIS 专栏收录该内容

4 篇文章 5 订阅

订阅专栏

1、openlayers可以同时定义很多个layer（图层），这些layer之间是相互独立的，当然layer越少性能越好，最大能定义的layer数量取决于用户机器的性能，通常大型的地图（如google地图）就定义了非常少的layer。

2、两种图层：base layer 和 overlay layer

base layer是每一个地图必须至少要定义的一个基础图层，除了基础图层以外的图层都是在其之上的图层，都属于overlay layer（覆盖图层）

3、base layer的设置：基础图层默认是你添加的第一个图层，你也可以通过设置isBaseLayer值为true来手动设置某个图层为base layer；同一时间只能有一个base layer，当你设置某个图层为base layer时，原先的base layer便不再是base layer了

4、layer的顺序：后添加的layer默认在最上层，layer的顺序可以改变，但是base layer一定是最底层的那个图层

<!DOCTYPE html>
<html lang="ch-cn">
<head>
    <meta charset="utf-8">
    <title>my openlayers map</title>
    <script type="text/javascript" src="../OpenLayers.js"></script>
    <script type="text/javascript">
        var map;

        function init() {
            map = new OpenLayers.Map('map');
            var wms_layer_map = new OpenLayers.Layer.WMS('Base layer', 'http://vmap0.tiles.osgeo.org/wms/vmap3', {layers: 'basic'}, {isBaseLayer: true});
            var wms_layer_labels = new OpenLayers.Layer.WMS('Location Labels', 'http://vmap0.tiles.osgeo.org/wms/vmap3', {
                layers: 'clabel,ctylabel,statelabel',
                transparent: true
            }, {opacity: 0.5});
            //也可以一次性向wms服务请求所有需要的图层放在我们自定义的一个图层内
//            wms_layer_map = new OpenLayers.Layer.WMS('Base layer', 'http://vmap0.tiles.osgeo.org/wms/vmap3',
//                {layers: 'basic,clabel,ctylabel,statelabel'},
//                {isBaseLayer: true}
//                );
            var wms_state_lines = new OpenLayers.Layer.WMS('State Line Layer', 'http://labs.metacarta.com/wms/vmap0',
                {layers: 'stateboundary', transparent: true},
                {displayInlayerSwitcher: false, minScale: 13841995.078125}
            );
            var wms_water_depth = new OpenLayers.Layer.WMS(
                'Water Depth',
                'http://labs.metacarta.com/wms/vmap0',
                {layers: 'depthcontour',
                    transparent: true},
                {opacity:0.8}
            );
            var wms_roads = new OpenLayers.Layer.WMS(
                'Roads',
                'http://labs.metacarta.com/wms/vmap0',
                {layers: 'priroad,secroad,rail',
                    transparent: true},
                {transistionEffect:'resize'}
            );
            map.addLayers([wms_layer_map, wms_layer_labels, wms_state_lines, wms_water_depth, wms_roads]);
            map.addControl(new OpenLayers.Control.LayerSwitcher({}));  //右上角的加号，点开可以选择是否显示某个覆盖图层
            map.setCenter(new OpenLayers.LonLat(118.34, 32.06));
            map.zoomTo(1);
            if (!map.getCenter()) {
                map.zoomToMaxExtent();
            }
        }
    </script>
</head>
<body onload="init()">
<div id='map' style="height: 800px; width: 1900px"></div>
</body>
</html>

5、一些参数

opacity 透明度（[0,1]）	isBaseLayer 是否为基础图层（true/false）
visibility 设置是否可见（true/false）
displayInlayerSwitcher(true/false)：设置是否在图层开关表单里面显示

6、瓦片(tile)的由来：如果将一整张地图作为一个图片返回，层级变大时，这张图片会是一个巨大的图片文件，因此将地图且分为多个小瓦片，每次改变层级时返回对应的界面内需要展示的少量瓦片，默认256*256像素

7、视口(viewport)的定义:整块地图中你所看到的部分，也就是后台返回给你的瓦片拼接成的整体部分

8、Layer.Grid (网格)：该类负责安排好各个tile瓦片所放的位置，WMS就是继承自它

9、Layer.Image：这也是一个图层类，可以用于构建非真实地图的图层

name：图层名

url：图片路径

extent：{OpenLayers.Bounds} 图片最大边界范围

size：{OpenLayers.Size} 像素大小

options：其他设置

<!DOCTYPE html>
<html lang="ch-cn">
<head>
    <meta charset="utf-8">
    <title>my openlayers map</title>
    <script type="text/javascript" src="../OpenLayers.js"></script>
    <script type="text/javascript">
        var map;

        function init() {
            map = new OpenLayers.Map('map');
            var image_layer = new OpenLayers.Layer.Image(
                'Wallpaper',
                'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3068877173,891597122&fm=27&gp=0.jpg',
                new OpenLayers.Bounds(-180, -112.5, 180, 112.5),
                new OpenLayers.Size(1920, 1200),
                {
                    numZoomLevels: 7,
                    maxResolution: .625
                }
            );
            var image_layer_2 = new OpenLayers.Layer.Image(
                'Wallpaper 2',
                'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=198098317,3843373275&fm=27&gp=0.jpg',
                new OpenLayers.Bounds(-180, -112.5, 180, 112.5),
                new OpenLayers.Size(1920, 1200),
                {
                    numZoomLevels: 7,
                    maxResolution: .625,
                    isBaseLayer: false,
                    opacity: 0.3
                }
            );
            map.addLayers([image_layer, image_layer_2]);
            map.addControl(new OpenLayers.Control.LayerSwitcher({}));  //右上角的加号，点开可以选择是否显示某个覆盖图层
            if (!map.getCenter()) {
                map.zoomToMaxExtent();
            }
        }
    </script>
</head>
<body onload="init()">
<div id='map' style="height: 800px; width: 1900px"></div>
</body>
</html>

10、Layer.TileCache 瓦片缓存机制

11、Layer.Vector 绘制各种要素，包括点，多边形等

12、Layer.WFS 不建议使用

13、Layer.WMS 继承自Layer.Grid, 是常用类

14、layer的一些方法

setName

addOptions(option) 添加额外的option配置

redraw() 当向Vector图层添加图形要素时，则需要调用此方法，返回true表示添加成功

getVisibility() 判断是否可见

setVisibility(visibility) 设置是否可见

calculateInRange() 本图层分辨率是否在地图分辨率可接受范围内

setIsBaseLayer(is_base) 设置为基底图层

setOpacity(opacity) 设置透明度

我有明珠一颗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
OpenLayers 2.10 Beginners Guide 阅读笔记（第三章）

1、openlayers可以同时定义很多个layer（图层），这些layer之间是相互独立的，当然layer越少性能越好，最大能定义的layer数量取决于用户机器的性能，通常大型的地图（如google地图）就定义了非常少的layer。2、两种图层：base layer 和 overlay layerbase layer是每一个地图必须至少要定义的一个基础图层，除了基础图层以外的图层都是在其...
复制链接

扫一扫