openlayers3教程详细_openlayers3入门教程

window.onload = function () {

//实例化map对象并加载地图

var map = new ol.Map({

//存放地图目标容器

target: 'map',

//加载图层

layers: [

//新建一个瓦片地图图层

new ol.layer.Tile({

//瓦片地图数据源

source: new ol.source.OSM()

})

],

//初始化视图

view: new ol.View({

//视图中心点坐标

center: [12550000, 3680000],

//缩放等级

zoom: 8,

//最小缩放等级

minZoom: 6,

//最大缩放等级

maxZoom: 12,

//地图旋转30度

rotation: Math.PI/6

})

});

//获取地图的初始化信息

var view = map.getView();

var zoom = view.getZoom();

var center = view.getCenter();

var rotation = view.getRotation();

//地图缩小

document.getElementById("zoom-out").onclick = function () {

//获取地图当前视图

var view = map.getView();

//获取地图当前缩放等级

var zoom = view.getZoom();

//每单击一次地图的缩放等级减一，以实现地图缩小

view.setZoom(zoom - 1);

};

//地图放大

document.getElementById("zoom-in").onclick = function () {

//获取地图当前视图

var view = map.getView();

//获取地图当前缩放等级

var zoom = view.getZoom();

//每单击一次地图的缩放等级加一，以实现地图放大

view.setZoom(zoom + 1);

};

//地图平移

document.getElementById("panto").onclick = function () {

//获取地图当前视图

var view = map.getView();

//指定要平移到的位置的坐标

var position = ol.proj.fromLonLat([115.2341, 32.4652]);

//重设地图中心点，实现平移

view.setCenter(position);

};

//地图重置

document.getElementById("restore").onclick = function () {

//重置中心点位置为初始化位置

view.setCenter(center);

//重置旋转角度为初始化角度

view.setRotation(rotation);

//重置缩放等级为初始化缩放等级

view.setZoom(zoom);

};

}

/**

* Add a click handler to the map to render the popup.

*/

map.addEventListener('click', function(evt) {

var coordinate = evt.coordinate;

var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(

coordinate, 'EPSG:3857', 'EPSG:4326'));

content.innerHTML = '

你点击的坐标是：

' + hdms + '';

overlay.setPosition(coordinate);

map.addOverlay(overlay);

});

openlayers进阶学习——多标注显示/点击弹出框/图层控制/搜索定位/新增标注等

多标注显示