axtoolbarcontrol加载图层后还是灰的_webGIS实践：3_0_openlayer加载瓦片地图

最新推荐文章于 2021-12-10 11:48:04 发布

weixin_39675963

最新推荐文章于 2021-12-10 11:48:04 发布

阅读量92

点赞数

文章标签： axtoolbarcontrol加载图层后还是灰的 geoserver发布瓦片 geoserver发布瓦片数据 jquery 加载中 jquery 重新加载js js加载本地shp数据到地图上

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

因为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>

效果如下：

三、单瓦片格式

在geoserver中发布一个带注记的面图层，将HTML中的加载瓦片地图的参数修改一下。

修改：

'LAYERS': 'gismap:v6_time_pref_pgn_utf_wgs84'

删掉：

'singleTile': true

效果如下：

可以看出地图内容返回的是一整张图片，而不是一个个小的方块。

在openlayer早期版本中，还需要设置'singleTile': true才能返回一整张图片，否则返回的是一个个小瓦片，就像腾讯底图的瓦片一样。因为整张图是由小瓦片拼接起来的，所以会有注记冗余的情况。

Openlayer修复了这个问题，注记冗余的问题，我们以后可以在leaflet中看。

加载地图和wms图层结束，接下来，我们看怎么渲染并查询矢量要素。

weixin_39675963

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
axtoolbarcontrol加载图层后还是灰的_webGIS实践：3_0_openlayer加载瓦片地图

本章开始地图的前端渲染。因为geoserver内部嵌的前端是openlayer，所以先讲openlayer的使用。但openlayer相对来说，还是要难一些，小众一些，所以不想用openlayer的，可以看后面的leaflet专题，脚本库不一样，实现效果一样。本文主要看openlayer怎么加载地图。一、js库代码下载前端脚本库可以用网络资源，也可以下载下来，但openlayer官网不是很稳定，所...
复制链接

扫一扫