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);

Leaflet调用geoserver发布的矢量切片的更多相关文章

  1. Cesium调用Geoserver发布的 WMS、WFS服务

    1 GeoServer服务发布 1.1 WMS服务 下载GeoServer安装版安装,同时安装geopackage扩展,以备使用.使用XX地图下载器下载地图,导出成GeoPackage地图文件. (1 ...

  2. openlayer调用geoserver发布的地图实现地图的基本功能

    转自:http://starting.iteye.com/blog/1039809 主要实现的功能有放大,缩小,获取地图大小,平移,线路测量,面积测量,拉宽功能,显示标注,移除标注,画多边形获取经纬度 ...

  3. 【转】10.4新特性-ArcGIS 10.4矢量切片介绍

    原文地址:http://zhihu.esrichina.com.cn/article/567 1.矢量切片简介GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像.但是切图 ...

  4. leaflet 结合 geoserver 实现地图空间查询(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  5. leaflet 结合 geoserver 实现地图属性查询(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  6. leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  7. leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  8. openlayer3 加载geoserver发布的WFS服务

    转自原文 openlayer3加载geoserver发布的WFS服务 openlayers3调用GeoServer发布的wfs 1 参考一 1.1 问题 openlayer3加载WFS存在跨域问题,需 ...

  9. 使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务 | Publishing and Calling WMTS, Vector Tile Service Using GeoServer + OpenLayers

    Web GIS系列: 1.搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 2.使用GeoServer+QGIS发布WMTS服务 3.使 ...

随机推荐

  1. 【HTTP】三、HTTP状态保持机制（Cookie和Session）

      前面我们提到HTTP协议的特点:无连接.无状态.无连接带来的时间开销随着HTTP/1.1引入了持久连接的机制得到了解决.现在来关注其"无状态"的特点.   所谓的无状态,就是指 ...

  2. 【神经网络与深度学习】如何将别人训练好的model用到自己的数据上

    caffe团队用imagenet图片进行训练,迭代30多万次,训练出来一个model.这个model将图片分为1000类,应该是目前为止最好的图片分类model了. 假设我现在有一些自己的图片想进行分 ...

  3. 简述前后端项目RSA+AES加解密

    一.登录机制 在项目中,我们可以大致得出一个登录的过程,主要分为  登录验证.登录保持.退出三个部分.登录验证是指客户端提供用户名和密码,向服务器提出登录请求,服务器判断客户端是否可以登录并向客户端确 ...

  4. 网站换VPS wdcp操作记录

    http://www.wdlinux.cn/bbs/thread-2795-1-1.html 分种情况1 从别的环境迁移到wdcp的环境2 从老的wdcp迁移到新的wdcp环境 对于第一个,没有较好的 ...

  5. 如何在linux下安装idea

    [通过官方安装包安装] 在 http://www.jetbrains.com/ 官网下载对应版本. ultimate 旗舰版 community 社区版 然后解压到本地对应目录,打开idea目录下的b ...

  6. Linux系统管理和调优（内存、CPU、磁盘IO、网络）

    系统管理 Author:Rich七哥 查看 CPU 负载相关工具,找出系统中使用 CPU 最多的进程 查看 Memory 运行状态相关工具,找出系统中使用内存最多的进程 查看 IO 运行状态相关工具, ...

  7. [转帖]数据库默认驱动、URL、端口

    超详细的各种数据库默认驱动.URL.端口总结 http://database.51cto.com/art/201906/598043.htm 学习了解一下.  概述 今天主要对各种数据库默认端口和UR ...

  8. 移动端 h5 适配之必知必会

    建议大家先去看看这篇文章 https://juejin.im/post/5cddf289f265da038f77696c?utm_source=gold_browser_extension(来自掘金: ...

  9. 断言（assert）

    断言是编程术语,表示为一些布尔表达式,程序员相信在程序中的某个特定点该表达式值为真,可以在任何时候启用和禁用断言验证,因此可以在测试时启用断言而在部署时禁用断言. 简单点说,断言指的就是,将结果判断说 ...

  10. oracle函数nvl,nvl2的区别，nullif函数，coalesce函数

    在oracle中用nvl和nvl2函数来解决为空的情况,例如,如果奖金为空,则为它指定一个数.也就是nvl(奖金字段,指定的奖金),但是两个的类型要一致. 1)nvl()函数 SQL> sele ...