不多说,直接上代码,直接复制换上发布的服务地址
下载高德地图转成ARCGISTile瓦片
<!DOCTYPE html>
<html>
<head>
<title>离线高德+点</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var vectorLayer = new ol.layer.Vector({
source:new ol.source.Vector()
})
// 初始化地图
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 'http://localhost:8003/gd_alllayers/' + z.toUpperCase() + '/' + y.toUpperCase() + '/' + x.toUpperCase() + '.png';// 这里可以修改地图路径
},
projection: 'EPSG:3857'
})
}),vectorLayer
],
view: new ol.View({
center: ol.proj.transform([118.79108,32.04967], 'EPSG:4326', 'EPSG:3857'),
zoom: 14,
minZoom:5,
maxZoom:18
})
});
// 给8位字符串文件名补0
function zeroFill(num, len, radix) {
var str = num.toString(radix || 10);
while (str.length < len) {
str = "0" + str;
}
return str;
}
// 绘制点
var start = ol.proj.fromLonLat([118.79108,32.04967]);
var startStyle = new ol.style.Style({
image: new ol.style.Icon({
src: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
})
});
var startFeature = new ol.Feature({
geometry: new ol.geom.Point([start[0], start[1]])
});
startFeature.setStyle(startStyle);
vectorLayer.getSource().addFeature(startFeature);
</script>
</body>
</html>