Openlayers加载离线地图Arcgis瓦片-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

Bhbvhbbgg

1006

文章

604401

访问

+关注

分类

暂无分类

日期归档

2024-11(2)

Openlayers加载离线地图Arcgis瓦片

发布于2021-05-30 11:54 阅读(1139) 评论(0) 点赞(0) 收藏(4)

一、介绍

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位字符串文件名补0
    function 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位字符串文件名补0
    function 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>