地图数据来源于 OpenStreetMap（OSM）开放数据集，高程数据基于 Cesium Ion（https://cesium.com/ion/）提供的公开资源，两者均为免费开源数据（使用需遵守各自授权协议）。

 

以下是离线环境下的代码示例，离线数据需要请自己下载

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- openlayer v10.6.0  -->
		<link href="https://www.hl0109.cn/webapp/web-js-lib/openlayer/v10.6.0/ol.css" rel="stylesheet" type="text/css"  />
		<script src="https://www.hl0109.cn/webapp/web-js-lib/openlayer/v10.6.0/ol.js" type="text/javascript" charset="utf-8"></script>
		<!-- ol-ext 4.0.33  -->
		<link href="https://www.hl0109.cn/webapp/web-js-lib/ol-ext/4.0.33/ol-ext.min.css" rel="stylesheet" type="text/css"  />
		<script src="https://www.hl0109.cn/webapp/web-js-lib/ol-ext/4.0.33/ol-ext.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- cesium 1.92.0  -->
		<script src="https://www.hl0109.cn/webapp/web-js-lib/cesium/1.92.0/Cesium/Cesium.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				border: 0;
				width: 100%;
				height: 100%;
			}
			#map{
				width: 100%;
				height: 100%;
			}
			.mousePositionControl{
				display: none !important;
			}
		</style>
	</head>
	<body>
		<div id="map" ></div>
		<div id="jwh" style="display: inline-block;min-width: 300px;height: 50px;background-color: cornflowerblue;color: #fff;position: absolute;bottom: 0;right: 0;line-height: 50px;padding: 0 20px"></div>
	</body>
	<script type="text/javascript">
		(function(){
			//初始化地图
			var map = new ol.Map({
				target: 'map',
				layers: [
					// new ol.layer.Tile({
     //        source: new ol.source.XYZ({
     //          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
     //        })
     //      })
     //个人地图服务数据以下是一个案例
          new ol.layer.Tile({
            source: new ol.source.XYZ({
              url:'./mapdata/google_tms/{z}/{x}/{y}.png'
            })
          })
				],
				view: new ol.View({
					center: ol.proj.fromLonLat([110, 33]),
					zoom: 3
				})
			});
			//初始化Cesium
      //Cesium.Ion.defaultAccessToken="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwZWI2ZmVjMi1jOTliLTRlMGYtYmY2YS1lMzVjYmIwZWQ2ODYiLCJpZCI6MTI4Njg3LCJpYXQiOjE3NTU5OTk2Mzd9.46gU8gJYYFX-MnNiQW9O-qBNAY5r-cT_0_WB-d_RnGM"
			
      var terrainProvider =  new Cesium.CesiumTerrainProvider({url:"https://自己的高程服务地址treeain格式",requestVertexNormals:true})
			function getHeight(roadPath,callback){
				var positions=[]
				var points=roadPath
				points.forEach(function(pos){
					var jd=pos[0]
					var wd=pos[1]
					pos && positions.push(Cesium.Cartographic.fromDegrees(jd,wd))
				})
        try{
          var promise=Cesium.sampleTerrainMostDetailed(terrainProvider,positions)
          Cesium.when(promise,function(params){
          	callback(params)
          })
        }catch(e){
          console.log(e)
        }
			}
			var mousePositionControl = new ol.control.MousePosition({
				coordinateFormat:function(jwd){
					getHeight([jwd],function(params){
						var height=Number(params[0].height).toFixed(2)
						document.getElementById("jwh").innerHTML=jwd[0].toFixed(2)+" , "+jwd[1].toFixed(2)+" , "+height
						//console.log("height",height)
            document.getElementById("jwh").innerHTML="经度："+jwd[0].toFixed(2)+" , 纬度："+jwd[1].toFixed(2)+"高程："+height
					})
					return jwd[0].toFixed(2)+" , "+jwd[1].toFixed(2)
				},
				projection:"EPSG:4326",
				className:'custom-mouse-position mousePositionControl'
			})
			map.addControl(mousePositionControl)
		})()
	</script>
</html>

 

 

openlayer加载加载离线ArcGis瓦片方式

//给8位字符串文件名补0
			function zeroFill(num, len, radix) {
				var str = num.toString(radix || 10);
				while (str.length < len) {
					str = "0" + str;
				}
				return str;
			}
			var map = new ol.Map({
				target: 'map',
				layers: [
					new ol.layer.Tile({
						source: new ol.source.XYZ({
							tileUrlFunction: function(coordinate) {
								var x = 'C' + zeroFill(coordinate[1], 8, 16);
								var y = 'R' + zeroFill(-coordinate[2] - 1, 8, 16);
								var z = 'L' + zeroFill(coordinate[0], 2, 10);
								return 'hefei/' + z + '/' + y + '/' + x + '.png'; //这里可以修改地图路径
							},
							projection: 'EPSG:3857'
						})
					})
				],
				view: new ol.View({
					center: ol.proj.fromLonLat([117.27, 31.68]),
					zoom: 4
				})
			});

var map = new ol.Map({
				target: 'map',
				layers: [
					new ol.layer.Tile({
						source: new ol.source.XYZ({
							url:'./mapdata/google_tms/{z}/{x}/{y}.png'
						})
					})
				],
				view: new ol.View({
					center: [117.27, 31.68],
					projection: 'EPSG:4326',  // EPSG:4326格式的经纬度
					zoom: 4
				})
			});