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已运用现代的设计模式从...
  • GISShiXiSheng
  • GISShiXiSheng
  • 2015年07月04日 17:05
  • 7177

openlayers3中三种动画实现

一、.在div中使用CSS3动画,以overlay的形式添加 1.先为一个div创建css,我的css不太好,直接引用别人的css.css_animation{ height:50px...
  • u014529917
  • u014529917
  • 2016年09月12日 17:02
  • 6668

【学习笔记之Openlayers3】初次接触openlayers3(第一篇)

将自己学习到的一些关于openlayers3的知识总结一下,以便自己后期的回顾。 一、 Openlayers3下载:首先下载openlayers3的开发包,步骤如下: 访问openlayers官网 h...
  • u013420816
  • u013420816
  • 2016年11月27日 15:57
  • 1184

动态标绘演示系统1.0(for OpenLayers3)

动态标绘演示系统1.4,基于动态标绘API 1.4。实现功能包括:1、标绘符号绘制(PlotDrawTool);2、标绘符号编辑(PlotEditTool);3、标绘符号样式编辑(参见演示系统源码);...
  • GISpace
  • GISpace
  • 2014年10月07日 20:00
  • 18302

OpenLayers3参考API

OpenLayers3参考API sf2gis@163.com 2015年6月17日   1 框架 1.1 地图:ol.Map。 目标:配置地图窗口的全部属性。 方法:配置map。 图...
  • sf2gis2
  • sf2gis2
  • 2015年06月30日 23:33
  • 4321

OpenLayers3 学习心得(二)——开发配置

由于ol是js类库,因此在开发时只需要将ol引用到页面中。 1 类库下载 编译好的类库可以到ol的官网下载,但是由于国内屏蔽了github 可能下载不了,解决方法:  可以重新定向host; ...
  • xiaohou66
  • xiaohou66
  • 2014年11月20日 12:47
  • 3868

[OpenLayers 3] 一个简单的地图

html xmlns=http://www.w3.org/1999/xhtml> head> meta http-equiv=Content-Type co...
  • u010251897
  • u010251897
  • 2016年10月11日 17:21
  • 1205

Openlayers3事件体系详解

地图上的各种事件触发到底是怎么回事?熟悉前端的肯定知道 JavaScript 的事件机制,openlayers 既然是 javascript 实现的,那么它就也不例外,也遵循 W3C 的标准,只不...
  • lsnaruto
  • lsnaruto
  • 2017年01月03日 16:32
  • 551

openlayers3加图标定位

首先想说的是我也是刚刚接触openlayers,因为公司的需求所以开始学习openlayers,刚开始想学openlayers2,但是试过几次发现openlayers2的浏览效果不好,还存在一些浏览卡...
  • mashang666
  • mashang666
  • 2016年06月23日 20:12
  • 6010

【学习笔记之Openlayers3】查询分析篇(第五篇)

这篇主要讲到基于openlayers3实现查询分析功能主要包括:属性查询,几何对象查询,位置关系查询这三类。 开发环境:openlayers3 geoserver postgresql+pos...
  • u013420816
  • u013420816
  • 2017年02月12日 15:18
  • 1510
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:openlayers3入门——类、方法、属性详解2
举报原因:
原因补充:

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