x5webview无法加载瓦片地图_webGIS实践：3_0_openlayer加载瓦片地图

最新推荐文章于 2024-07-16 14:29:32 发布

weixin_39943383

最新推荐文章于 2024-07-16 14:29:32 发布

阅读量229

点赞数

文章标签： x5webview无法加载瓦片地图

本文链接：https://blog.csdn.net/weixin_39943383/article/details/113325939

版权

本文介绍了如何使用OpenLayers在前端渲染地图，包括下载OpenLayers库、加载瓦片地图的步骤，以及在x5webview中遇到的问题。通过实例展示了加载腾讯底图和Geoserver发布的图层，并解释了如何调整参数以避免返回单个瓦片导致的注记冗余问题。

摘要由CSDN通过智能技术生成

本章开始地图的前端渲染。

因为geoserver内部嵌的前端是openlayer，所以先讲openlayer的使用。

但openlayer相对来说，还是要难一些，小众一些，所以不想用openlayer的，可以看后面的leaflet专题，脚本库不一样，实现效果一样。

本文主要看openlayer怎么加载地图。

一、js库代码下载

前端脚本库可以用网络资源，也可以下载下来，但openlayer官网不是很稳定，所以可以把examples、docs、sources都下载下来。

下载链接：https://openlayers.org/download/

openlayer的examples都是拿NodeJS构建的，想要本地看效果，还要部署环境，打包，有点麻烦。

为了简便，好理解，好学习，我们后续的前端页面，都只有一个HTML文件，引入的js库，只有ol.js和jquery.js，css文件只有ol.css。

Jquery下载：https://code.jquery.com/jquery/，版本很多，选一个常用的，点击uncompressed，复制src里的连接，https://code.jquery.com/jquery-1.7.2.js，把内容保存到本地。

二、加载瓦片地图

文件结构如下图，在html文件夹内，有ol文件夹，openlayer的js和css都放在这个文件夹下面，jquery放在html下，还有一个页面LoadTileMap.HTML。

在LoadTileMap.HTML中，我们加载了腾讯底图和geoserver发布的gismap:v6_time_cnty_pts_utf_wgs84图层。

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瓦片地图展示</title>
    <link rel="stylesheet" href="ol/ol.css">
    <script src="ol/ol.js"></script>
    <script src="jquery-1.7.2.js"></script>
    <style type="text/css">
        #map,
        html,
        body {
            height: 100%;
            width: 100%;
        }
        .content {
            width: 100px;
        }

    </style>
</head>

<body>
<div id="map"></div>
</body>
<script type="text/javascript">
    //页面
    var view = new ol.View({
        // 设置中心点坐标，因为加载的腾讯瓦片地图的坐标系是墨卡托投影坐标系（'EPSG:3857'），所以要对经纬度坐标点进行投影，ol.proj.transform既是openlayer自带的坐标系转换函数，支持WGS84和墨卡托投影的互换。
        center: ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'),
        // 比例尺级数为9
        zoom: 9
    });

    var layers = [
        // 加载腾讯瓦片底图
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: "http://rt{0-3}.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0"
            })
        }),
        // 加载geoserver发布的WTMS底图，其实数据源是4326坐标系的，但是geoserver会适配前端的坐标系。
        new ol.layer.Image({
            source: new ol.source.ImageWMS({
                ratio: 1,
                url: 'http://localhost:8080/geoserver/gismap/wms?',//这个可以打开geoserver的preview，看openlayer页面截取url
                // 请求参数
                params: {
                    'SERVICE': 'WMS',
                    'VERSION': '1.1.0',
                    'REQUEST': 'GetMap',
                    'FORMAT': 'image/png',
                    'TRANSPARENT': true,
                    'tiled': true,
                    'LAYERS': 'gismap:v6_time_cnty_pts_utf_wgs84',//图层，前面是工作空间，后面是图层名，
                    'exceptions': 'application/vnd.ogc.se_inimage',
                    'singleTile': true//单瓦片，渲染成一张图片
                }
            }),
        }),        
    ];
    //地图
    var map = new ol.Map({

        target: 'map',//指向div
        layers: layers,
        view: view
    });

</script>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }

    #map {
        width: 100%;
        height: 100%;
    }
</style>
</html>

效果如下：