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>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|