GeoServer

Leaflet调用geoserver发布的矢量切片

by giser · 2019-04-02

geoserver如何发布切片就不写了,大家都可以查到。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport'
    content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href=' css/leaflet.css' rel='stylesheet' />
<script src="js/leaflet-src.js"></script>
<script src="js/leaflet.vectorgrid1.2.0.js"></script>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.11.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.11.1/build/ol.js"></script> -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
    <div id="map" style="height: 100%; width: 100%"></div>
</body>
</html>

js

//添加一个map
    var map = L.map('map', {
        crs : L.CRS.EPSG4326,
        center : {
            lon : 105,
            lat : 30
        },
        zoom:3
    });
    /*********WMTS服务,需要leaflet-tilelayer-wmts-src.js提供支持***********/
    var url = 'http://127.0.0.1:8080/geoserver/gwc/service/wmts';
    var emap = new L.TileLayer.WMTS(url, {
        layer : "test:gj",
        tilematrixSet : "EPSG:4326",
        tileSize : 256
    });
    map.addLayer(emap);
    /*********WMS服务***********/ 
    var wmsLayer = L.tileLayer.wms('http://127.0.0.1:8080/geoserver/gwc/service/wms?', {
        layers: 'test:gj'
    }).addTo(map);
    /*********TMS服务***********/ 
    var tmsLayer = L.tileLayer('http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/test:gj@EPSG:4326@png/{z}/{x}/{y}.png', {
        tms: true
    }).addTo(map);
    /*********openlayers3调用geoserver的pbf数据***********/  
    var vectortileAdminLayer = new ol.layer.VectorTile({
      // 矢量切片的数据源
      source: new ol.source.VectorTile({
        format: new ol.format.MVT(),
        tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
        tilePixelRatio: 1,
        // 矢量切片服务地址
        url: 'http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/test:gj@EPSG:4326@pbf/{z}/{x}/{-y}.pbf'
      }),
      // 对矢量切片数据应用的样式
      style: new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgb(140,137,129)'
        }),
        stroke: new ol.style.Stroke({
          color: 'rgb(220, 220, 220)',
          width: 1
        })
      })
    });
    /***leaflet1.0使用geoserver发布的pbf数据,需要leaflet.vectorgrid.js***/
    var localUrl = "http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/test:gj@EPSG:4326@pbf/{z}/{x}/{-y}.pbf";

        var localVectorTileOptions = {
            rendererFactory: L.canvas.tile,
            attribution: 'mycontributors',
            vectorTileLayerStyles: vectorTileStyling,
        };


        var localPbfLayer = L.vectorGrid.protobuf(localUrl, localVectorTileOptions).addTo(map);

转载自：https://blog.csdn.net/t514263710/article/details/62886933

相关推荐

Tags: geoserver Leaflet调用geoserver发布的矢量切片

You may also like...