0
点赞
收藏
分享

微信扫一扫

Openlayers学习笔记——StylingControls

乱世小白 2022-05-27 阅读 29

此节介绍前我们先来点网页设计知识准备:



一 CSS(层叠样式表)


CSS是层叠样式表英文单词 Cascading Style Sheets的首字母缩写,它是一种指定HTML元素表现形式的标记语言。


HTML、CSS、javascript这三种语言都有不同的服务特点,


HTML是用来创建我们所看到的网页的结构和内容的;


CSS是用来控制网站站点中元素的展现的;


javascript是处理网站站点上逻辑部分的。


因此在构建网站时需要具备这三方面的能力。



二 OpenLayers and CSS



Openlayers几乎为每个创建的HTML元素引用类名、IDs,因此要我们知道怎么使用类名、IDs就能定制个人地图的UI。



1.OpenLayers样式--themes


在Openlayers中,主题themes是被用来控制UI元素的外观的,一套主题是由一个Css文件和相关UI图片组成的,Openlayers默认在用户地图应用了多种样式,这套主题命名为default。创建自己的主题也是很容易的。


在定制用户地图自己的UI样式前,需要创建个文件夹theme_floder来保存CSS文件和UI图片。引用UI样式的三个步骤:


% 在地图页面上添加CSS文件的引用路径;


% 在Openlayers中指定地图中引用的UI图片位置;


% 在地图map对象中指定theme属性。


map=new Openlayers.Map(‘map_element’,{theme:'theme_folder'});




2创建自己的主题(themes)


%在页面引入CSS文件;


<link rel='stylesheet' href='control_style.css' />


%创建地图map对象


map = new OpenLayers.Map('map_element', {


controls: [new OpenLayers.Control.Navigation()]


});


%创建Controls对象


map.addControl(new OpenLayers.Control.ScaleLine());


%修改默认类名的样式


.olControlNavToolbar {


top: 0;


}


.olControlNavigationItemInactive {


background: #787878 !important;


border: 2px solid #232323;


cursor: pointer;


left:0 !important;


top:0 !important;


}


.olControlNavigationItemActive {


background: #dedede !important;


border: 2px solid #787878;


cursor: pointer;


left:0 !important;


top:0 !important;


}


%在地图上添加Controls


map.addControl(new Openlayers.Control.OverviewMap());


举报

相关推荐

0 条评论