73 lines
2.6 KiB
HTML
73 lines
2.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>openlayers 加载martin的矢量瓦片</title>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
|
|||
|
|
<script src="https://openlayers.org/en/v7.4.0/examples/resources/mapbox-streets-v6-style.js"></script>
|
|||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">
|
|||
|
|
<style>
|
|||
|
|
html,body,#map{
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
height: 100vh;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="map"></div>
|
|||
|
|
<script>
|
|||
|
|
// 添加失败，切图策略不同，xyz出错
|
|||
|
|
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://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: ol.proj.fromLonLat([112.39747,22.908823]),
|
|||
|
|
zoom: 8
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
const style = new ol.style.Style({
|
|||
|
|
fill: new ol.style.Fill({
|
|||
|
|
color: 'rgba(255, 255, 255, 0.6)',
|
|||
|
|
}),
|
|||
|
|
stroke: new ol.style.Stroke({
|
|||
|
|
color: '#319FD3',
|
|||
|
|
width: 1,
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
const vtl = new ol.layer.VectorTile({
|
|||
|
|
|
|||
|
|
source: new ol.source.VectorTile({
|
|||
|
|
format: new ol.format.MVT(),
|
|||
|
|
tileSize:512,
|
|||
|
|
url: 'http://127.0.0.1:3000/zhujiang_river/{z}/{x}/{y}',
|
|||
|
|
}),
|
|||
|
|
style: style,
|
|||
|
|
})
|
|||
|
|
map.addLayer(vtl);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|