标签：控件 ol 入门 map mapCon zoom tooltip openlayers 快速
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 属性的值。 |
标签：控件,ol,入门,map,mapCon,zoom,tooltip,openlayers,快速 来源： https://www.cnblogs.com/ju-ruo/p/15000057.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。