定制地图logo
OpenLayers 3作为一个引擎,供开发者二次开发来发布产品,必然需要重新设置logo,具体怎么做?通过ol.Map
的API文档发现它的构造参数里面logo
的设置,简单动动手就能做出下面这样带自定义logo
的地图,注意右下角的猴子:
因为今年是猴年,所以就用了它,当然你也可以换成任何其他想要的logo
,代码如下:
<div id="map" style="width: 100%, height: 400px"></div>
<script>
new ol.Map({
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
// logo: false, // 不显示logo
// logo: 'face_monkey.png', // 用一个图片 face_monkey.png 作为logo
logo: {src: '../img/face_monkey.png', href: 'http://www.openstreetmap.org/'}, // 点击能跳转到对应页面
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
center: [0, 0],
zoom: 2
}),
target: 'map'
});
</script>
注意看代码中设置logo
参数的注释,演示了最复杂的情况,注释掉的代码是一些简单的用法。可自行尝试换成它们有什么效果。
除了logo
参数之外,我们还设置了controls
,算是这个例子夹带的私货,其大致的作用,从官网API文档可以了解到,是设置地图控件的。有什么作用?注意对比现在的地图和之前的地图的右下角,一个是i,一个是展开的一串信息。