1：经纬度底图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>天地图矢量经纬度底图</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"type="text/css"><script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script><style>#map {position: absolute;width: 100%;height: 100%;}</style><script>function onLoad() {var layers = [new ol.layer.Tile({title: "天地图矢量经纬度底图",source: new ol.source.XYZ({projection: 'EPSG:4326',url: "http://124.193.68.246:12081/DataServer?T=vec_c&x={x}&y={y}&l={z}"})})];var map = new ol.Map({layers: layers,target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [116.38, 39.93],zoom: 3}),controls: ol.control.defaults({attributionOptions: {collapsible: false}})});}</script>
</head><body onload='onLoad()'><div id='map'></div>
</body></html>效果展示：
2：墨卡托底图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>天地图矢量墨卡托底图</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"type="text/css"><script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script><style>#map {position: absolute;width: 100%;height: 100%;}</style><script>function onLoad() {var layers = [new ol.layer.Tile({title: "天地图矢量墨卡托底图",source: new ol.source.XYZ({projection: 'EPSG:900913',url: "http://124.193.68.246:12081/DataServer?T=vec_w&x={x}&y={y}&l={z}"})})];var map = new ol.Map({layers: layers,target: 'map',view: new ol.View({projection: 'EPSG:900913',center: ol.proj.fromLonLat([116.38, 39.93]),zoom: 3}),controls: ol.control.defaults({attributionOptions: {collapsible: false}})});}</script>
</head><body onload='onLoad()'><div id='map'></div>
</body></html>效果展示：
