WebGIS——OpenLayers 3 地图叠加自定义卫星/航拍/手绘地图（任意瓦片图）-优快云博客

本文链接：https://blog.youkuaiyun.com/zinechina/article/details/106165937

使用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="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/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中配置瓦片图访问的地址规则，如叠加百度地图：

https://blog.youkuaiyun.com/zxc13552314286/article/details/79594357

创建地图：

	  var map = new ol.Map({
        target: 'map',//指定渲染的div容器id
        layers: [
    		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({//瓦片图layer
  extent: 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//默认层级
    })

如此，大功告成