OpenLayers 3自定义地图工具条（一）

对于一个WEB地图应用来说，地图工具条可以说是不可或缺的一个部分，但由于一些样式、功能往往并不能满足实际项目需要，所以仍要对此部分进行定制，从这里将说明如何利用Oplenayers 3根据项目要求做一个定制化的工具条。

1、工具条功能内容内容

全屏、取消全屏
视图放大、缩小
全图【全图范围，初始化地图到默认的层级，以及预先设定的中心点】
地图标绘【点、线、面】
地理定位【省份定位】
地图切换【影像地图、地形地图】

2、最终工具条效果图

3、具体实现

构建页面HTML元素

<div class="tool-container"><div class="t_close"></div><ul><li id="tfullscreen"><span class="t_1"></span><i>全屏</i></li><b></b><li id="tfullmap"><span class="t_2"></span><i>最大</i></li><b></b><li id="tzoomin"><span class="t_3"></span><i>放大</i></li><b></b><li id="tzoomout"><span class="t_4"></span><i>缩小</i></li><b></b><li id="draw"><span class="t_10"></span><i>标绘</i><em></em></li><b></b><li id="tpos"><span class="t_6"></span><i>定位</i><em></em></li><b></b><li id="tcgmap"><span class="t_7"></span><i>切换</i></li><b></b></ul>
</div>

建立CSS样式文件

/*此处略*/
.tool-container{}

全屏以及取消全屏的实现

var fullscreen = function() {var elem = document.body;if (elem.webkitRequestFullScreen) {elem.webkitRequestFullScreen()} else {if (elem.mozRequestFullScreen) {elem.mozRequestFullScreen()} else {if (elem.msRequestFullscreen) {elem.msRequestFullscreen()} else {if (elem.requestFullScreen) {elem.requestFullscreen()} else {alert("浏览器不支持全屏")}}}}
};var exitFullscreen = function() {var elem = parent.document;if (elem.webkitCancelFullScreen) {elem.webkitCancelFullScreen()} else {if (elem.mozCancelFullScreen) {elem.mozCancelFullScreen()} else {if (elem.cancelFullScreen) {elem.cancelFullScreen()} else {if (elem.msExitFullscreen) {elem.msExitFullscreen()} else {if (elem.exitFullscreen) {elem.exitFullscreen()} else {alert("浏览器不支持全屏")}}}}}
};

全图最大的实现

var fullmap = function() {map.setView(new ol.View({center: ol.proj.fromLonLat([95.23, 35.33]),zoom: 4}));}

放大以及缩小的实现

var zoomin = function() {var view = map.getView();var zoom = view.getZoom();view.setZoom(zoom + 1);}
var zoomout = function() {var view = map.getView();var zoom = view.getZoom();view.setZoom(zoom - 1);}

标绘页面需要增加的HTML结构，功能在后面再做介绍

<div class="draw_open"><ul><li><span class="t_5"></span><i class="pdl10">点</i></li><li><span class="t_8"></span><i class="pdl10">线</i></li><li><span class="t_9">                        </span><i class="pdl10">面</i></li></ul>
</div>

定位页面需增加的HTML结构。

<div id="citylist" class="city-list"><header class="city-header"><span class="city-current">省份列表</span></header><div class="city-province"><!--此处有后台获取省份、城市列表数据动态产生，或固定json串之类均可--></div>
</div>

说明：切换地图的实现，这里主要用了地图组的切换来实现，即ol.layer.Group的setVisible来实现。

OpenLayers 3自定义地图工具条（一）相关推荐

DOTA无法加载服务器指定的地图,Dota2自定义地图工具怎么安装_Dota2自定义地图工具常见问题处理方法...
Dota 2 创意工坊工具的早期测试(Alpha)版本已经发布,如果你有新奇的想法可以使用工具开发制作自己的地图,为Dota 2再添砖瓦. 如果是抱着"玩"的心态小编建议就不要下载 ...
工具条研究手记（5）- 自定义工具条的实现
/*****************************************************************/ /* 工具条研究手记(5)- 自定义工具条的实 ...
基于 Openlayers 实现的地图常用功能工具集合
基于 Openlayers 实现的地图常用功能工具集合地图工具介绍使用示例在项目开发中,经常会需要使用一些坐标做测试,或者手动标绘点线面,或者坐标转换等. 使用代码当然是可以做到的,但是有时候懒 ...
自定义报表预览控制工具条
说明:原有的VFP的打印预览用多了感觉真的不是很方便,在某些特定的要求下,她就显得很笨拙,尤其那个打印工具条上的打印机按纽,一点就打印了,有时候我们需要在那个时候进行有选择性的打印而不是全盘的打出来, ...
为Autodesk Viewer添加自定义工具条
如果你参加过我们近期的活动,你就会频繁的听到我们现在正在做的Autodesk Viewer大模型浏览器,这是一个不需要下载任何插件,基于WebGL技术的浏览器,可以支持几十种数据格式.同时viewer ...
Wince5.0自定义工具条
2007-3-18 Wince5.0自定义ToolBar 做WinCE的开发时,碰到一很头疼的事(Coolpad机器).它的菜单很难看,字体很大,样式也太简单,就选用了 CF2.0中的ToolBa ...
百度地图之鼠标绘制工具条库（开源库）
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
百度富文本编辑器UEditor如何自定义配置toolbars工具条
UE.getEditor('editor', {toolbars: [[//工具条'fullscreen', 'source', 'undo', 'redo', 'bold', 'italic','u ...
html自定义工具条,为Autodesk Viewer添加自定义工具条的更好方法
上一篇文章中我介绍了使用Autodesk Viewer的UI API来给viewer添加自定义工具条的方法,看起来很简单是吧.不过有个问题,就是关于自定义工具条的信息(包括按钮的文本.图标.样式.ca ...

OpenLayers 3自定义地图工具条（一）

1、工具条功能内容内容

2、最终工具条效果图

3、具体实现

OpenLayers 3自定义地图工具条（一）相关推荐

最新文章

热门文章