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

原创 2017年01月03日 20:37:24

//【*】 地图瓦片文件目录地址 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是设置全屏控件

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

OpenLayers3基础教程——OL3基本概念

OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它的落后。 OL3已运用现代的设计模式从...

OpenLayers 3 之 地图视图(View) 详解

初始化一幅地图,必备的三要素之一就是视图(view),这个对象主要是控制地图与人的交互,如进行缩放,调节分辨率、地图的旋转等控制。也就是说每个 map对象包含一个 view对象部分,用于控制与用户的交...

OpenLayers 3实践与原理探究2-ol3基础入门案例

0.实例在OpenLayers3官网的下载页面下载我们在开发工程中需要的文件(如:v3.17.1-dist.zip),实际工程中包含两个文件ol.js,ol.css 先看一个实例代码如下: ...

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

// 创建地图 new ol.Map({ // 设置地图图层 layers: [ // 创建一个使用Open S...

OpenLayers3中wfs的属性查询

OpenLayers3中wfs的属性查询

OpenLayers3入门篇-点的扩散效果

点的扩散效果原理与点在线上的运动类似,先根据传入的坐标先创建一个layer,然后绑定一个addfeature的事件(flush函数),在这个事件里面随着时间的推移不断的对这个layer的style进行...

OpenLayers3入门篇-点在线上的运动

点在线上的移动 基本思路就是先将这条线切割成很多的坐标,然后这个点沿着这些坐标前进 这个代码是直接从业务代码Copy下来的,但是稍作了修改,加上注解,便于参考时理解 function MoveOnL...

OpenLayers3入门篇-单击事件

单击事件的绑定 第一步:var selectClick = new ol.interaction.Select({ condition: ol.events.condition.click, styl...

OpenLayers 3 入门指南

从使用OpenLayers 3到现在有差不多一年的时间了,OpenLayers是web端比较好的一个GIS引擎,广受大家的青睐,最开始我以为这是一个比较小众的引擎,没想到后面发现有很多人使用,并且还有...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:openlayers3入门——类、方法、属性详解2
举报原因:
原因补充:

(最多只允许输入30个字)