openlayers快速入门
加载图层的方法有多种方法
实例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>
网页中body标签中的代码会在页面加载的时候进行执行,
而网页中head中的代码会先进行加载,然后在调用时进行编译,事件脚本代码都是在放在head中。
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 属性的值。 |