Openlayers加载离线地图Arcgis瓦片

文章目录

一、介绍
二、快速入门
- 一、下载地图瓦片
- 二、OpenLayers加载离线Arcgis瓦片

一、介绍

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。从OpenLayers2.2版本以后，OpenLayers已经将所用到的Prototype.js组件整合到了自身当中，并不断在Prototype.js的基础上完善面向对象的开发，Rico用到地方不多，只是在OpenLayers.Popup.AnchoredBubble类中圆角化DIV。

官网地址：https://openlayers.org/

特征

支持平铺层：从OSM，Bing，MapBox，Stamen和您可以找到的任何其他XYZ源中拉出图块。还支持OGC映射服务和分层图层。
支持矢量层：渲染来自GeoJSON，TopoJSON，KML，GML，Mapbox矢量图块和其他格式的矢量数据。
运用先进技术：利用Canvas 2D，WebGL和HTML5的所有最新功能。开箱即用的移动支持。仅使用所需组件构建轻量级定制概要文件。
易于定制和扩展：使用简单的CSS样式化地图控件。连接到不同级别的API或使用第三方库自定义和扩展功能。

二、快速入门

一、下载地图瓦片

我这里下载的是高德地图的Arcgis瓦片，使用的太乐地图下载器下载的，安装破解教程前往==>太乐地图下载器5.0.5(破解版)

下载完毕后的目录如下：

二、OpenLayers加载离线Arcgis瓦片

ol.css和ol.js两个文件我们可以到官网去下载源文件。

输入网址，进入官网：

https://openlayers.org/

找到Get the Code菜单，下载代码。

选择最新版本v6.5.0版本的压缩包v6.5.0.zip。

将文件解压到本地，ol.css在css文件夹内，ol.js在build文件夹内。

创建一个文件夹，将下载的瓦片复制到该文件夹里面，将上述的ol.js和ol.css文件分别复制出来：

然后在新建一个html文件粘贴下述代码，引入下载的ol.css和ol.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>加载ArcGIS地图瓦片</title><link rel="stylesheet" href="css/ol.css"><script src="js/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">// 设置地图中心，此处进行坐标转换， 把EPSG:4326(经纬度坐标)，转换为EPSG:3857(WGS84网络墨卡托(辅助球))坐标，因为ol默认使用的是EPSG:3857坐标let centerPos = ol.proj.transform([117.27, 31.68], 'EPSG:4326', 'EPSG:3857');//创建地图let map = new ol.Map({view: new ol.View({center: centerPos,//地图中心位置zoom: 10,//地图初始层级maxZoom: 15,minZoom: 9}),target: 'map'});map.on('click', function (e) {// alert('X ; '+ e.clientX  + 'Y: '+e.clientY);let t = ol.proj.transform(map.getEventCoordinate(event), 'EPSG:3857', 'EPSG:4326');alert("鼠标点击处的经纬度：" + t);});//给8位字符串文件名补0function zeroFill(num, len, radix) {var str = num.toString(radix || 10);while (str.length < len) {str = "0" + str;}return str;}// ol.source.XYZ添加瓦片地图的层let tileLayer = new ol.layer.Tile({source: new ol.source.XYZ({tileUrlFunction: function (coordinate) {//alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);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'})});map.addLayer(tileLayer);//添加到map里面
</script>
</body>
</html>

在浏览器上访问html文件：

上面的代码里有点击事件，鼠标点击地图可以显示经纬度，下面我们再来说说在地图上绘图功能

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>绘图</title><link rel="stylesheet" href="css/ol.css" type="text/css"><script src="js/ol.js"></script>
</head>
<body>
<div id="map"></div>
<label>Shape type &nbsp;</label>
<select id="type"><option value="Point">Point</option><option value="LineString">LineString</option><option value="Polygon">Polygon</option><option value="Circle">Circle</option><option value="Square">Square</option><option value="Box">Box</option><option value="None">None</option>
</select>
<script>let centerPos = ol.proj.transform([117.29, 31.85], 'EPSG:4326', 'EPSG:3857');let vectorSource = new ol.source.Vector();let vectorLayer = new ol.layer.Vector({source: vectorSource});//给8位字符串文件名补0function zeroFill(num, len, radix) {var str = num.toString(radix || 10);while (str.length < len) {str = "0" + str;}return str;}let 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'})}),vectorLayer],view: new ol.View({center: centerPos,//地图中心位置zoom: 11,//地图初始层级maxZoom: 17,minZoom: 9}),});let typeSelect = document.getElementById('type');let draw;function addInteraction() {let type = typeSelect.value;if (type !== 'None') {let geometryFunction;switch (type) {case "Square":type = 'Circle';// 生成规则四边形的图形函数geometryFunction = ol.interaction.Draw.createRegularPolygon(4);break;case "Box":type = 'Circle';// 生成盒形状的图形函数geometryFunction = ol.interaction.Draw.createBox();break;default:break;}// 初始化Draw绘图控件draw = new ol.interaction.Draw({source: vectorSource,type: type,geometryFunction: geometryFunction});// 将Draw绘图控件加入Map对象map.addInteraction(draw);}}typeSelect.addEventListener('change', () => {// 移除Draw绘图控件map.removeInteraction(draw);addInteraction();});addInteraction();
</script>
</body>
</html>

Shift + 鼠标左键：手绘（free hand）模式