openlayers3入门——类、方法、属性详解2

//【*】 地图瓦片文件目录地址 ps：这个一定要设置正确的瓦片文件的位置，不然显示不出来

//var url = ‘../img/{z}/{y}/{x}.png’;//{z} {x} {y} 是占位符，ol会识别的 ps:这个是我用OLOffLineMapOpenEXE工具下载的地图数据的调用格式
var url = ‘../img/{z}/{z}_{y}_{x}.jpg’;//{z} {x} {y} 是占位符，ol会识别的
//【*】 地图设置中心  113.708003, 34.772622  同时用下载工具找个你要作为中心点的坐标
var center = ol.proj.transform([116.39749, 39.90753], ‘EPSG:4326’, ‘EPSG:3857’);
//默认的缩放级别
var zoomlevel = 14;

//鹰眼参数
var overviewMapControl = new ol.control.OverviewMap({
  className: ‘ol-overviewmap ol-custom-overviewmap’,
  layers: [
      new ol.layer.Tile({ 
      source: new ol.source.XYZ({
      url:’googlemaps/roadmap/{z}/{x}/{y}.png’
      }) 
      })
  ],
  collapseLabel: ‘\u00BB’,
  label: ‘\u00AB’,
  collapsed: false
});
//地图初始化
var map = new ol.Map({
  //An ol.View object represents a simple 2D view of the map
  view: new ol.View({
      center: center,//The initial center for the view.
      projecton: ‘EPSG:3857’,// Default is EPSG:3857
      zoomFactor: 2,//The zoom factor used to determine the resolution constraint. Default is 2.
      minZoom: 14,//缩放最小级别
      maxZoom: 18,//缩放最大级
      zoom:zoomlevel//缩放级别
  }),
  target: ‘map’,
  //基本的按钮操作在controls这里
  controls: ol.control.defaults({
      attributionOptions: ({ collapsible: true }),
      zoomOptions: ({
          duration: 250,//Animation duration in milliseconds. Default is 250.
          zoomInTipLabel: ‘放大’,//Text label to use for the button tip. Default is Zoom in
          zoomOutTipLabel: ‘缩小’,//Text label to use for the button tip. Default is Zoom out
          className: ‘ol-zoom’,//CSS class name. Default is ol-zoom.
          zoomInLabel: ‘+’,//Text label to use for the zoom-in button. Default is +.
          zoomOutLabel:’-‘,//默认 – 号，缩小按钮的标签内容
      })
  }).extend([
      overviewMapControl,//添加鹰眼
      //new ol.control.ScaleLine({minWidth:64}),//比例尺
      new ol.control.FullScreen({//全屏
          className: ‘ol-full-screen’,//css样式，默认ol-full-screen
          tipLabel:’全屏’,//鼠标放上后的提示内容
      })
  ]),
  layers: [
      new ol.layer.Tile({
          opacity: 0.5,//透明度  Default is 1.
          source: new ol.source.OSM({
              url:’googlemaps/roadmap/{z}/{x}/{y}.png’
          })
      })
  ]
});

上面的代码是给一个离线的瓦片地图添加基本的控件（包括鹰眼、全屏、放大、收缩）。

其中OverviewMap类，是设置鹰眼控件；FullScreen是设置全屏控件

转载自：https://blog.csdn.net/lsnaruto/article/details/53997733