Leaflet调用geoserver发布的矢量切片
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发布的矢量切片的更多相关文章
- Cesium调用Geoserver发布的 WMS、WFS服务
1 GeoServer服务发布 1.1 WMS服务 下载GeoServer安装版安装,同时安装geopackage扩展,以备使用.使用XX地图下载器下载地图,导出成GeoPackage地图文件. (1 ...
- openlayer调用geoserver发布的地图实现地图的基本功能
转自:http://starting.iteye.com/blog/1039809 主要实现的功能有放大,缩小,获取地图大小,平移,线路测量,面积测量,拉宽功能,显示标注,移除标注,画多边形获取经纬度 ...
- 【转】10.4新特性-ArcGIS 10.4矢量切片介绍
原文地址:http://zhihu.esrichina.com.cn/article/567 1.矢量切片简介GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像.但是切图 ...
- leaflet 结合 geoserver 实现地图空间查询(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet 结合 geoserver 实现地图属性查询(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- openlayer3 加载geoserver发布的WFS服务
转自原文 openlayer3加载geoserver发布的WFS服务 openlayers3调用GeoServer发布的wfs 1 参考一 1.1 问题 openlayer3加载WFS存在跨域问题,需 ...
- 使用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.使 ...
随机推荐
- python学习之模块-模块(三)
5.6 time 模块 已经知道的常用的time方法:time.time()获取当前时间的时间戳:time.sleep(num)线程推迟指定的时间(秒)后再继续往下运行. 时间的表示方式 大致可以分为 ...
- Java中File类的基本用法
File类的基本用法 java.io.File类:代表文件和目录.在开发中,读取文件.生成文件.删除文件.修改文件的属性时经常会用到此类. File类的常用构造方法:public File(Strin ...
- python基础--面向对象之封装
# 在python中用双下划线,开头的方式将属性隐藏起来(设置成私有的) # 但其实这只是一种变形操作,而且仅仅在类定义阶段会发生变形 # 类中所有双下划线开头的如__x都会在类定义的时候自动形成:_ ...
- token防爆破?
先尝试例如删除token 猜token的值等操作 不行就burp抓包 选择Pitchfork模式.选择要爆破的参数 线程设置为1显然只有获取上一个请求返回的taken值才能,做下一次请求 点击Ref ...
- 【VS开发】VC实现程序重启的做法
转载地址:http://blog.csdn.net/clever101/article/details/9327597 很多时候系统有很多配置项,修改了配置项之后能有一个按钮实现系统重启.所谓重启就是 ...
- mysql——前面内容——前期整理笔记00
), sname ), sage ), ssex ) ); ','zhaolei','1990-01-01','nan'); ','qiandian','1990-12-21','nan'); ',' ...
- 模板中用url_for的好处
from flask import Flask,render_template app = Flask(__name__) @app.route('/') def index(): return re ...
- 第五周课程总结&实验报告(三)
实验三 String类的应用 实验目的: (1)掌握类String类的使用: (2)学会使用JDK帮助文档: 实验内容: 1.已知字符串:"this is a test of java&qu ...
- urllib:处理网络异常
from urllib import request, error import ssl import urllib.request import socket import urllib.error ...
- 【字符串大模拟】潜伏者—— NOIP2009原题
洛谷连接 就一道黄题没啥可以说的……就是要细心…… 学到了神奇的优化 ios::sync_with_stdio(false); cin优化,能跑的比scanf快!棒!(不过要开std) 这题真的还挺简 ...