OpenLayers 3 primer
博客专区 > RealPari 的博客 > 博客详情
OpenLayers 3 primer
RealPari 发表于6个月前
OpenLayers 3 primer
  • 发表于 6个月前
  • 阅读 9
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

  • 1.new一个map之后,默认只显示+和-按钮zoom缩放,如果要显示zoomSlider,需要加上这句代码

var zoomslider = new ol.control.ZoomSlider();

map.addControl(zoomslider);

  • 2.默认zoom control 显示在左侧,如何显示到右侧呢?How to let openlayers3 zoom control show up to right side?

.ol-zoom ,.ol-zoomslider{
     left: unset;
     right: 8px;
  }

或者

.ol-zoom ,.ol-zoomslider{
     left: auto;
     right: 8px;
  }

  • 3.unset是什么意思呢

unset是CSS3的一个样式属性值,它的含义是:如果该样式是能被继承的,则其值为继承的值;如果该样式是不能被继承的,则其值为CSS规范指定的值.

  • 4.如何隐藏右下角的logo呢

.ol-logo-only{display:none}加上这个样式就ok了。

  • 5.为openlayers3添加全局控件
var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        controls: ol.control.defaults().extend([
          new ol.control.FullScreen()
        ]),
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
共有 人打赏支持
粉丝 2
博文 49
码字总数 15143
×
RealPari
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: