openlayers快速入门(1)
2021/7/11 23:11:54
本文主要是介绍openlayers快速入门(1),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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 属性的值。 |
这篇关于openlayers快速入门(1)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?