Openlayers生成底图和控件(1)

Openlayers生成地理底图

web地图有两种投影坐标系：
EPSG:4326 (WGS84)，EPSG:3857 (伪墨卡托投影)

 var map=new ol.Map({
            // 设置地图图层
            layers: [
              // 创建一个使用Open Street Map地图源的瓦片图层
              new ol.layer.Tile({source: new ol.source.OSM()})
            ],
            // 设置显示地图的视图
            view: new ol.View({
              //设置地图范围
              center: [104.06, 30.67],    // 定义地图显示中心于经度0度，纬度0度处
              zoom: 4 ,          
              projection:'EPSG:3857'
            }),
            // 让id为map的div作为地图的容器
            target: 'map', 
        });

添加地图控件

左移控件

 function move_to_left(){
            var view=map.getView();
            var  map_center=view.getCenter();
            map_center[0]-=50000;
            view.setCenter(map_center);
            map.render();
        }

右移控件

function move_to_right(){
           var view=map.getView();
           var map_center=view.getCenter();
           map_center[0]+=50000;      //数组类型，x为0，y为1
           view.setCenter(map_center);
           map.render();
        }

上移控件

function move_to_top(){
           //获取视图
           var view=map.getView();
           //获取视图的中心
           var map_center=view.getCenter();
           map_center[1]+=50000;
           //重设中心点
           view.setCenter(map_center);
           //地图渲染
           map.render();
        }

下移控件

function move_to_bottom(){
          var view=map.getView();
          var map_center=view.getCenter();
          map_center[1]-=50000;
          view.setCenter(map_center);
          map.render();
        }

移到成都

function move_to_chengdu(){
          var view=map.getView();
          //投影转换，将WGS84坐标转为伪墨卡托投影
          view.setCenter(ol.proj.transform([104.06, 30.67],'EPSG:4326', 'EPSG:3857'));      
          map.render();
        }

放大控件

function zoomin(){
          var view=map.getView();
          view.setZoom(view.getZoom()+1);
          map.render();
       }

缩小控件

function zoomout(){
         var view=map.getView();
         view.setZoom(view.getZoom()-1);
         map.render();
       }

缩放范围控件

var zoom_slider= new ol.control.ZoomSlider();    //缩放滑块
       map.addControl(zoom_slider);
       var zoom_to_extent= new ol.control.ZoomToExtent({      //缩放范围
         extent:[13100000,4290000,
                 13200000,5210000
                 ]
       });
       map.addControl(zoom_to_extent);

鼠标位置控件

var mouse_position_control=new ol.control.MousePosition({
              coordinateFormat:ol.coordinate.createStringXY(4),   //坐标格式（小数点后面的位数）
              projection:'EPSG:4326',
              className:'custom-mouse-position',   //坐标信息显示样式
              target:document.getElementById('mouse-position'),
              undefinedHTML:" ",
       });
       map.addControl(mouse_position_control);

比例尺控件

var scaleLineControl=new ol.control.ScaleLine({
         //设置比例尺度量单位
           units:"metric"
       })
       map.addControl(scaleLineControl);

鹰眼控件

var overviewMapControl=new ol.control.OverviewMap({
           className:"ol-overviewmap ol-custom-overviewmap",
           layers:[
             new ol.layer.Tile({
               source:new ol.source.OSM({
                 'url':'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',

               })
             })
           ],
           collapseLabel:'\u00BB',    //展开时功能按钮上的标识
           label:'\u00AB',           //折叠时功能按钮上的标识
           collapsed:false      //显示展开方式

      })
      map.addControl(overviewMapControl);

全屏显示控件

      var full_screen=new ol.control.FullScreen();
      map.addControl(full_screen);

HTML代码：

<div id="map">
      <div id="mouse-position"></div>
    </div>
    <button onclick="move_to_left()">左移</button>
    <button onclick="move_to_right()">右移</button>
    <button onclick="move_to_top()">上移</button>
    <button onclick="move_to_bottom">下移</button>
    <button onclick="move_to_chengdu()">移到成都</button>
    <button onclick="zoomin()">放大</button>
    <button onclick="zoomout()">缩小</button>

CSS代码：

   #map{
        width:100%;
        height:600px;
    }

    #mouse-position{
      float:right;
      position:absolute;
      top:5px;
      z-index:2000;
      width:200px;
      height:20px;

    }

最终结果