openlayers快速入门（1）

2024-01-30 12:41:59

openlayers快速入门

加载图层的方法有多种方法

第一种：基础的map对象中对属性进行赋值

实例map对象的方法写在body标签中

        //实例化map对象加载地图
        var map = new ol.Map({
            target: 'mapCon', //地图容器div的id
            loadTilesWhileInteracting: true,
            //地图容器中加载的图层
            layers: [ ],
            //地图视图设置
            view: new ol.View({
                center: [0, 0], //地图初始中心点
                zoom: 3  //地图初始显示级别
            }),
            controls: ol.control.defaults().extend([
      new ol.control.FullScreen()  //加载全屏显示控件（目前支持非IE内核浏览器）
            ])
        });

map实例创建的时候可以将属性值直接赋予，也可以在创建好了之后进行赋予。

就比如使用 map.addLayer(layers1);map.addLayer(layers2);方法添加

第二种：将实例的创建放在函数中

这个函数一般都是写在head中，然后再body中进行函数的调用

<body onl oad="init();">
    <div id=map></div>
</body>

JavaScript知识点

网页中body标签中的代码会在页面加载的时候进行执行，

而网页中head中的代码会先进行加载，然后在调用时进行编译，事件脚本代码都是在放在head中。

openlayers控件使用方法

controls：是map的一个参数

使用是控件本身作为一个参数放入到controls中：

controls: ol.control.defaults().extend([
      new ol.control.FullScreen()  //加载全屏显示控件（目前支持非IE内核浏览器）
            ])

将控件实例化好了之后，将控件采用map.addControl()的方法进行添加

var zoomslider=new ol.control.ZoomSlider();
map.addControl(zoomslider);
var zoomToExtent=new ol.control.ZoomToExtent({
    extent:[13100000,4290000,13200000,5210000]
});
map.addControl(zoomExtent);

ZoomSlider 地图导航条控件

ZoomToExtent地图缩放控件

将导航栏放置在放大缩小之间

 /*地图缩放导航栏的样式设置*/
        #mapCon  .ol-zoom .ol-zoom-out {margin-top:204px;
        }
        #mapCon  .ol-zoomslider {background-color:transparent;top:2.3em;}
        #mapCon  .ol-touch .ol-zoom .ol-zoom-out{margin-top:212px;}
        #mapCon  .ol-touch .ol-zoomslider{top:2.75em;}
        #mapCon  .ol-zoom-in.ol-has-tooltip:hover[role=tooltip],
        #mapCon  .ol-zoom-in.ol-has-tooltip:focus[role=tooltip]{top:3px;}
        #mapCon  .ol-zoom-out.ol-has-tooltip:hover[role=tooltip],
        #mapCon  .ol-zoom-out.ol-has-tooltip:focus[role=tooltip]{top:232px;}
        /*zoomToExtent控件样式的设置*/
        #mapCon  .ol-zoom-extent{top:280px;}

wrapX:true ,这样图可以在x方向循环，false是不可以循环

API解释是：对于-180°和180°子午线上的矢量编辑图形时，false不会重复平铺，true会重复

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

可能的值

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

码农公寓