使用openlayers加载离线地图

什么是Openlayers?

简单来说，Openlayers是一个基于Javacript开发，免费、开源的前端地图开发库，使用它，可以很容易的开发出WebGIS系统。目前Openlayers支持地图瓦片、矢量数据等众多地图数据格式，支持比较完整的地图交互操作。目前OpenLayers已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架，在国内外的GIS相关行业中得到了广泛的应用。

基础类简单了解

Map

Map这个类代表一个地图容器，它拥有一个target属性，target属性设置的是地图要挂接到哪个dom节点上进行渲染。

Layer

Layer类，其实就是图层，图层就是空间数据可视化的一种表现

View

地图有放大、缩小、设置中心点的功能，Openlayers把这些关于视图变化的功能封装到了一个叫做View的类里面

示例代码

引入ol文件，路径改成自己本地或网络的：

<link rel="stylesheet" href="../openlayerJs/ol.css" type="text/css">
<script src="../openlayerJs/ol.js"></script>

css:

 * {margin:0; padding:0;}
    html,body{height:100%;}
      .map {
        height:100%;
        width: 100%;
      }

js:

	let mapUrl ='http://218.200.69.7:12000/CHN/googlemaps/satellite/{z}/{x}/{y}.jpg';	//离线地图地址
	let mapCenter=[112.286051,30.365276];
	let terrain = new ol.layer.Tile({
	  source: new ol.source.XYZ({
		  projection: "EPSG:3857",
		  url: mapUrl
	  })
	});
	var views = new ol.View({
	  projection: ol.proj.get('EPSG:3857'),
	  center: ol.proj.transform(mapCenter, 'EPSG:4326', 'EPSG:3857'),//无偏移时 ol.proj.fromLonLat([112.286051,30.365276]),
	  zoom: 15,
	  minZoom: 3,
	  maxZoom: 21
	});	
	var map = new ol.Map({
		target:'map',
		logo: 'false',
		// controls: ol.control.defaults({ attribution: false, zoom: false, rotate: false }).extend([
		// 	//添加比例尺控件
		// 	new ol.control.ScaleLine({
		// 		units: 'metric',
		// 		target: 'scalebar',
		// 		className: 'ol-scale-line'
		// 	})
		// ]),
		layers: [terrain],
		view:views
	});  
  }

完整实例地址
链接: https://download.csdn.net/download/weixin_43578304/86736923