A1.0.2 离线瓦片用ol3显示多功能地图

最新推荐文章于 2020-10-16 09:59:36 发布

文刀木由

最新推荐文章于 2020-10-16 09:59:36 发布

阅读量2k

点赞数 1

分类专栏：【GIS地图】文章标签： ol3 离线瓦片使用多功能地图多功能gis

本文链接：https://blog.csdn.net/U_9_5/article/details/50357793

版权

【GIS地图】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

昨天写了如何下载瓦片并且贴了如何调用瓦片的html代码，今天来一个稍微全面些的。
参考魏经理和openlayers官方网站API写了这么多。
能实现什么？
1.地图放大缩小，全屏。并且可自由更改参数(已写入参数)
2.鹰眼。
3.公里尺
4.作者信息如何添加
5.自动加载默认位置(不用说肯定的)
先预览截图：

这里写图片描述

废话少说，代码才是王道。

example0.3 多功能离线瓦片.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>GIS 0.1</title>
    <meta name="description" content="GIS1.1 测试版" />
    <meta name="author" content="刘壮 20151219" />
    <!--Openlayers 3-->
    <link href="../js/ol3.2.0/ol.css" rel="stylesheet" />
    <script src="../js/ol3.2.0/ol.js"></script>
</head>
<body scroll="no">
    <div id="map" style="width:100%"></div>

    <script src="../js/myScript/map.js"></script>
</body>
</html>

../js/myScript/map.js

//******************************************//
//本GIS由Openlayers 3插件支持，请注意引用正确的js，css文件
//编者：刘壮 20151219
//1. 第一次使用，请配置这里
//   【*】标识为必须修改的参数，请确保正确
//******************************************//

//【*】 地图瓦片文件目录地址 ps：这个一定要设置正确的瓦片文件的位置，不然显示不出来
//var url = '../img/{z}/{y}/{x}.png';//{z} {x} {y} 是占位符，ol会识别的 ps:这个是我用OLOffLineMapOpenEXE工具下载的地图数据的调用格式
var url = 'http://192.168.0.71:8080/{z}/{z}_{y}_{x}.jpg';//{z} {x} {y} 是占位符，ol会识别的 ps：这个是魏经理下载的地图数据个调用格式
//【*】 地图设置中心  113.708003, 34.772622  同时用下载工具找个你要作为中心点的坐标
var center = ol.proj.transform([113.708003, 34.772622], 'EPSG:4326', 'EPSG:3857');
// 默认的缩放级别
var zoomlevel = 12;

//******************************************//
//2. 下面的代码基本设置好了，基本不需要更改 
//    ps:可根据需求选择性修改，各种参数也写了很全
//    只需要找到对应的参数位置修改参数值就行
//    部分英文注释是从Openlayers英文官网贴过来的，原注释
//******************************************//
//鹰眼参数
var overviewMapControl = new ol.control.OverviewMap({
    className: 'ol-overviewmap ol-custom-overviewmap',
    layers: [
        new ol.layer.Tile({ source: new ol.source.OSM({ url: url }) })
    ],
    collapseLabel: '\u00BB',
    label: '\u00AB',
    collapsed: false
});
//地图初始化
var map = new ol.Map({
    //An ol.View object represents a simple 2D view of the map
    view: new ol.View({
        center: center,//The initial center for the view.
        projecton: 'EPSG:3857',// Default is EPSG:3857
        zoomFactor: 2,//The zoom factor used to determine the resolution constraint. Default is 2.
        minZoom: 0,//缩放最小级别
        maxZoom: 19,//缩放最大级
        zoom:zoomlevel//缩放级别
    }),
    target: 'map',
    //基本的按钮操作在controls这里
    controls: ol.control.defaults({
        attributionOptions: ({ collapsible: true }),
        zoomOptions: ({
            duration: 250,//Animation duration in milliseconds. Default is 250.
            zoomInTipLabel: '放大',//Text label to use for the button tip. Default is Zoom in
            zoomOutTipLabel: '缩小',//Text label to use for the button tip. Default is Zoom out
            className: 'ol-zoom',//CSS class name. Default is ol-zoom.
            zoomInLabel: '+',//Text label to use for the zoom-in button. Default is +.
            zoomOutLabel:'-',//默认 - 号，缩小按钮的标签内容
        })
    }).extend([
        overviewMapControl,//添加鹰眼
        new ol.control.ScaleLine({minWidth:64}),//比例尺
        new ol.control.FullScreen({//全屏
            className: 'ol-full-screen',//css样式，默认ol-full-screen
            tipLabel:'全屏',//鼠标放上后的提示内容
        })
    ]),
    layers: [
        new ol.layer.Tile({
            opacity: 0.5,//透明度  Default is 1.
            source: new ol.source.OSM({
                attributions: [new ol.Attribution({ html: '&copy; 刘壮 2015-12-19' })],//Author Information
                url:url
            })
        })
    ]
});

//添加一个使用离线瓦片地图层
var offlineMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url:url
    })
});
//把离线地图瓦片添加到地图层上
map.addLayer(offlineMapLayer);