6.9 KiB
6.9 KiB
| title | date | author | tags | categories | ||||
|---|---|---|---|---|---|---|---|---|
| 公共网络地图服务 | 2020-10-20 | ac |
|
|
WebGIS最基础的工作就是将所需要的地图数据加载出来，然后才有后面和业务相关的操作。工作中常常数据是多种多样的，像KML、GeoJSON这类文件类型，栅格瓦片的WMTS服务类型，还有公共网络的地图服务，如百度地图，天地图等。
1. 简介
国内互联网上有像天地图、百度、高德等地图厂商，国外也有微软的Bing、Mapbox、Google等公司提供地图服务，这些服务都可以根据其提供的Web API接口进行调用。
2. 百度地图
示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/ol.css" type="text/css">
<style>
.map {
height: 800px;
width: 100%;
}
</style>
<script src="lib/ol.js"></script>
<title>ol加载百度地图</title>
</head>
<body>
<h2>ol加载百度地图</h2>
<div id="map" class="map"></div>
<script>
var resolutions = [];
for(var i=0;i<19;i++){
resolutions[i] = Math.pow(2,18 - i)
}
var map = new ol.Map({
target:"map",
layers:[
new ol.layer.Tile({
id:"BMap",
source:new ol.source.TileImage({
//设置坐标参考
projection:ol.proj.get('EPSG:3857'),
//设置分辨率
tileGrid:new ol.tilegrid.TileGrid({
origin:[0,0],
resolutions:resolutions
}),
//设置百度地图的瓦片地图请求地址
tileUrlFunction:function (tileCoord,pixelRatio,proj) {
if(!tileCoord){
return "";
}
var z = tileCoord[0];
var x = tileCoord[1];
var y = tileCoord[2];
if(x < 0){
x = "M" + (-x);
}
if(y < 0){
x = "M" + (-y);
}
return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&style=pl&udt=20151021&scale=1&p=1";
}
})
})
],
view:new ol.View({
center: [12698769.380277092, 2579510.250552084],
zoom: 11
})
});
</script>
</body>
</html>
3.天地图
示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="lib/ol.js"></script>
<title>Layer</title>
</head>
<body>
<h2>tdtDemo</h2>
<div id="map" class="map"></div>
<script>
var key = "bf156eb3c72350d62b008dc8a4ae1016";
var map = new ol.Map({
target:"map",
layers:[
new ol.layer.Tile({
id:"tdt_vec",
title:"天地图矢量图层",
source:new ol.source.XYZ({
// url:"http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk="+key,
url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk='+key,
crossOrigin:"anonymous",
wrapX:false
})
}),
new ol.layer.Tile({
id:"tdt_cva",
title:"天地图矢量注记图层",
source:new ol.source.XYZ({
url:"https://t2.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk="+key,
crossOrigin:"anonymous",
wrapX:false
})
})
],
view:new ol.View({
center: [12698769.380277092, 2579510.250552084],
zoom: 11
})
});
</script>
</body>
</html>
4. Mapbox
加载在线的矢量瓦片
矢量瓦片的本质是矢量地图，等效于在网页上绘制的栅格图片（矢量块）
矢量瓦片的常用数据格式：GeoJson、TopoJSON、PBF、MVT等。ol中提供了加载矢量瓦片的渲染器（Layer）、数据源（Source）、解析器（Format）:
ol.layer.VectorTileol.source.VectorTileol.format.MVT
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/ol.css" type="text/css">
<style>
.map {
height: 800px;
width: 100%;
}
</style>
<script src="lib/ol.js"></script>
<title>Layer</title>
</head>
<body>
<h2>ol加载矢量瓦片</h2>
<p>矢量瓦片是指不仅能够提供完整的样式设计灵活性，还能够快速渲染海量数据的矢量地图</p>
<p>矢量瓦片的本质是矢量地图，等效于在网页上绘制的栅格图片（矢量块）</p>
<p>矢量瓦片的常用数据格式：GeoJson、TopoJSON、PBF、MVT等</p>
<p>ol.layer.VectorTile + ol.source.VectorTile + ol.format.MVT</p>
<p>ol.format.MVT可以解析PBF、MVT格式的数据</p>
<div id="map" class="map"></div>
<script>
var key = "pk.eyJ1IjoicWl1c2hpamllIiwiYSI6ImNrYTYzNmlhdDAzb2YydG13YjZic2t2M3AifQ.XiCKl8HOEAy0MBo5v2yjvA";
var map = new ol.Map({
target:"map",
layers:[
new ol.layer.Tile({
id:"mapbox_v1",
source: new ol.source.XYZ({
url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}?access_token='+key
})
}),
new ol.layer.VectorTile({
declutter:true,
source:new ol.source.VectorTile({
url:"http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.mvt?access_token="+key,
format:new ol.format.MVT(),
// style:createMapboxStreesV6Style(ol.style.Style,ol.style.Fill,ol.style.Stroke,ol.style.Icon,ol.style.Text)
style:"mapbox://styles/mapbox/streets-v11"
})
}),
],
view:new ol.View({
center: [12698769.380277092, 2579510.250552084],
zoom: 11
})
});
</script>
</body>
</html>