openlayers3添加地图控件

简介:

//添加属性控件
map.addControl(new ol.control.Attribution());
//添加鼠标定位控件
map.addControl(new ol.control.MousePosition({
    undefinedHTML: 'outside',
    projection: 'EPSG:4326',
    coordinateFormat: function(coordinate) {
        return ol.coordinate.format(coordinate, '{x}, {y}', 4);
        }              
    })
);
//添加缩略图控件
map.addControl(new ol.control.OverviewMap({
    collapsed: false  
    }));
//添加旋转控件
map.addControl(new ol.control.Rotate({
    autoHide: false
    }));
//添加比例尺控件
map.addControl(new ol.control.ScaleLine());
//添加缩放控件
map.addControl(new ol.control.Zoom());
//添加缩放滑动控件
map.addControl(new ol.control.ZoomSlider());
//添加缩放到当前视图滑动控件
map.addControl(new ol.control.ZoomToExtent());
//添加全屏控件
map.addControl(new ol.control.FullScreen());



相关文章
|
9月前
|
定位技术
百度地图开发(8):地图覆盖物实现纵横交错的交通网络
百度地图开发(8):地图覆盖物实现纵横交错的交通网络
30 0
百度地图开发(8):地图覆盖物实现纵横交错的交通网络
|
9月前
|
定位技术 API
Cesium开发:常用地图事件
Cesium开发:常用地图事件
216 0
|
前端开发 JavaScript 定位技术
基于OpenLayers实现导航地图上(起/终)点的交互式图标显示
基于OpenLayers实现导航地图上(起/终)点的交互式图标显示
229 0
基于OpenLayers实现导航地图上(起/终)点的交互式图标显示
|
定位技术 API
Leaflet中如何限制地图的拖动范围
本文讲解了在Leaflet中如何进行地图范围的控制,并通过代码的方式进行示例,并展示了最终效果。
571 0
Leaflet中如何限制地图的拖动范围
|
定位技术 开发者
地图控件|学习笔记
快速学习地图控件
77 0
地图控件|学习笔记
|
定位技术
SwiftUI—使用MapKit里的地图视图
SwiftUI—使用MapKit里的地图视图
380 0
SwiftUI—使用MapKit里的地图视图
|
API 定位技术 网络架构
leaflet地图介绍
本文将介绍有关于leaflet地图组件在web中的应用 什么是leaflet? leaflet是一个轻量级的开源js地图组件,适用于移动设备,用法简单性能优越,如果你曾经使用过高德或者百度的地图api的话,相信你可以很轻易的上手更加简单的leaflet leaflet是怎么运作的? leaflet的工作方法和高德百度之类的并不一样,由于leaflet是个开源项目,所以它本身只有地图组件并不提供地图内容,也就是说,我们不需要为了使用leaflet而去注册key。
2229 0
|
定位技术
openlayers控制地图显示范围
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/83108903 openlaye...
2783 0
|
定位技术
openlayers加载bing地图
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/82961448 openlaye...
1440 0
|
定位技术
leaflet之地图缩放
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/82782160 leaflet之...
2640 0