使用OpenLayers 3
第一步
首先创建Html文件的结构，在body中放入一个Div作为地图显示的容器，调整其宽度高度使其全屏显示
html页结构如下,其中id为map的div为显示地图的容器：
<body><div id="map"></div><input id="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="layer.setOpacity(this.value)"></body>
css:
html, body { margin:0; padding: 0; height: 100%; width: 100%; }body { width:100%; height:100%; background: #ffffff; }#map { position: absolute; height: 100%; width: 100%; }#slider { position: absolute; top: 10px; right: 10px; }
第二步
在html页中（head节点）引入ol3（OpenLayers 3）所需的css和js,此处使用cdn，你也可以官网下载：
<link rel="stylesheet" href="/ajax/libs/ol3/3.8.2/ol.min.css" type="text/css"><script src="/ajax/libs/ol3/3.8.2/ol.min.js" type="text/javascript"></script>
第三步
初始化地图，并加载OpenStreetMap地图或者google地图/百度地图的数据作为初始地图
创建一个ol.layer.Tile（瓦片图）对象，指定他的数据源为OSM (OpenStreetMap )
var osm = new ol.layer.Tile({source: new ol.source.OSM() //此处osm指OpenStreetMap的地图（瓦片图）数据});
此外，ol3还内置了以下地图数据源：
ol.source.BingMaps ，必应地图的切片数据，继承自ol.source.TileImage；
ol.source.MapQuest，MapQuest 提供的切片数据，继承自ol.source.XYZ；
ol.source.OSM，OpenStreetMap 提供的切片数据，继承自ol.source.XYZ；
ol.source.Stamen，Stamen 提供的地图切片数据，继承自ol.source.XYZ；
如果你想加载其他地图如谷歌/百度地图，也可以，方法网上有，比较简单，其思想就是获取到对应的瓦片图地址，然后在ol3中配置瓦片图访问的地址规则，如叠加百度地图：
/zxc13552314286/article/details/79594357
创建地图：
var map = new ol.Map({target: 'map',//指定渲染的div容器idlayers: [osm //osm就是OpenStreetMap地图瓦片图的layer],view: new ol.View({//view用于配置地图的显示属性，如中心点、显示区域、最大最小层级、默认显示层级center: ol.proj.fromLonLat([118.083114, 24.564743]),//中心点坐标minZoom: 15,//最小层级maxZoom: 18,//最大层级zoom: 15//打开时默认显示层级})});
获取卫星图/航拍图并分割瓦片图
从网上下载或者用无人机航拍得到对应区域的高清图片，并切割为瓦片图
我这里是先从天地图上下载到对应的tif格式的卫星图，该图自带wgs84坐标，因此无需再配准，如果只是得到一张高清的jpg/png图片，此时可以使用arcgis进行地理配准，此处不再做过多描述
带坐标的tif图片可以直接使用工具切割瓦片图，如果你有耐心的话可以用ps，先找到中心点……
当然你也可以用工具，推荐一个工具叫 Klokan MapTiler Plus v8.0，有个大神写了个工具可以免费版直接转加强版，自己上网搜一下
要先大概知道我们需要切的层级范围是多少，这点根据自己的卫星地图的区域大小和清晰程度来定，如果图清晰就可以切到更高的层级，如果区域大可以选择更小的层级开始
比如我切的是14-18层级，之后将切好的图放到网站目录下的map目录中
叠加卫星图层
第一步 创建卫星图layer
var layer = new ol.layer.Tile({//瓦片图layerextent: mapExtent,//范围，即卫星图的坐标边界，可以用arcgis打开tif文件即可查到source: new ol.source.XYZ({//attributions: [new ol.Attribution({html: 'IUE'})],//右下角版权显示的url: "map/{z}/{x}/{y}.png",//图片访问地址、规则， z代表zoom（层级）tilePixelRatio: 1.000000,minZoom: mapMinZoom,//最小层级maxZoom: mapMaxZoom//最大层级，超过最大、最小层级该图层将不会显示})});
第二步 修改地图显示的最大最小层级、范围
修改前文 “使用OpenLayers 3”章节第三步第二段代码中的view
view: new ol.View({center: ol.proj.fromLonLat([118.083114, 24.564743]),//中心点extent: mapExtent,//范围minZoom: mapMinZoom,//最小层级maxZoom: mapMaxZoom,//最大层级zoom: 15//默认层级})
如此，大功告成
