244 lines
6.9 KiB
Markdown
244 lines
6.9 KiB
Markdown
---
|
||
title: 公共网络地图服务
|
||
date: 2020-10-20
|
||
author: ac
|
||
tags:
|
||
- geojson
|
||
- kml
|
||
- OpenLayers
|
||
categories:
|
||
- GIS
|
||
---
|
||
|
||
> WebGIS最基础的工作就是将所需要的地图数据加载出来，然后才有后面和业务相关的操作。工作中常常数据是多种多样的，像KML、GeoJSON这类文件类型，栅格瓦片的WMTS服务类型，还有公共网络的地图服务，如百度地图，天地图等。
|
||
|
||
## 1. 简介
|
||
|
||
国内互联网上有像天地图、百度、高德等地图厂商，国外也有微软的Bing、Mapbox、Google等公司提供地图服务，这些服务都可以根据其提供的Web API接口进行调用。
|
||
|
||
## 2. 百度地图
|
||
|
||
<img src="./images/image-20210910203015252.png" alt="image-20210910203015252" style="zoom: 50%;" />
|
||
|
||
示例：
|
||
|
||
```html
|
||
<!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.天地图
|
||
|
||
<img src="./images/image-20210910203230554.png" alt="image-20210910203230554" style="zoom: 80%;" />
|
||
|
||
示例：
|
||
|
||
```html
|
||
<!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.VectorTile`
|
||
- ` ol.source.VectorTile`
|
||
- `ol.format.MVT`
|
||
|
||
```html
|
||
<!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>
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|