Skip to content

Latest commit

 

History

History
78 lines (71 loc) · 2.11 KB

10-04.md

File metadata and controls

78 lines (71 loc) · 2.11 KB

自定义控件

有了前面的基础介绍,自定义控件就变得相对简单了,共分为两个步骤,第一步是构建界面,第二步是用代码实现功能。 下面自定义了一个分享当前地图的功能:

<script type="text/javascript" src="../src/js/zepto.min.js" charset="utf-8"></script> <script type="text/javascript" src="../src/ol3.13.1/ol.js" charset="utf-8"></script>
<script type="text/javascript"> var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', view: new ol.View({ center: ol.proj.transform( [104, 30], 'EPSG:4326', 'EPSG:3857'), zoom: 10 }) });
var viewport = map.getViewport();
$(viewport).append('<div id="share" class="share">分享地图</div>');

document.getElementById('share').onclick = function() {
	alert('分享当前地图给朋友');
}
</script>

对应的代码如下:

<div id="map" style="width: 100%"></div>
<script type="text/javascript">
	var map = new ol.Map({
		layers: [
		  new ol.layer.Tile({
		    source: new ol.source.OSM()
		  })
		],
		target: 'map',
		view: new ol.View({
		  center: ol.proj.transform(
		      [104, 30], 'EPSG:4326', 'EPSG:3857'),
		  zoom: 10
		})
	});

	// 在viewport节点下添加一个分享按钮
	var viewport = map.getViewport();
	$(viewport).append('<div id="share" class="share">分享地图</div>');

	// 监听按钮点击事件,执行相关操作
	document.getElementById('share').onclick = function() {
		alert('分享当前地图给朋友');
	}
</script>

结合注释理解代码,对于分享按钮的外观都是由css来定义:

.share {
	position: absolute;
	top: 10px;
	right: 10px;
	border: 1px;
	border-color: #333;
	background-color: #339999;
	color: #fff;
	box-shadow: 0px 0px 2px #666;
	cursor: pointer;
	padding: 0 4px 0 4px;
}

由此可见,自定义控件也是一件非常简单的事。