openlayers加载天地图

使用openlayers加载天地图的小demo。

运行效果

image.png

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/openlayers/8.1.0/ol.min.css" type="text/css">
  <style>
    .map {
      height: 400px;
      width: 100%;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/8.1.0/dist/ol.js"></script>
  <title>OpenLayers example</title>
</head>

<body>
  <h2>My Map</h2>
  <div id="map" class="map"></div>
</body>
<script type="text/javascript">
  let key = `这里填写你的天地图密钥，可自行去官网申请`

  // _w表示球面墨卡托投影，_c表示经纬度投影
  // 如img_w：影像底图球面墨卡托投影，img_c：影像底图经纬度投影

  var img_w = new ol.layer.Tile({
    title: "影像图",
    source: new ol.source.XYZ({
      url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + key + "",
    }),
  });
  // var vec_w = new ol.layer.Tile({
  // 	title: "矢量底图",
  // 	source: new ol.source.XYZ({
  // 		url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key + "",
  // 	}),
  // });
  // var ter_w = new ol.layer.Tile({
  // 	title: "地形图",
  // 	source: new ol.source.XYZ({
  // 		url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=" + key + "",
  // 	}),
  // });
  var cia_w = new ol.layer.Tile({
    title: "影像图文字标注",
    source: new ol.source.XYZ({
      url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + key + "",
    }),
  });
  // var cva_w = new ol.layer.Tile({
  // 	title: "矢量图文字标注",
  // 	source: new ol.source.XYZ({
  // 		url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key + "",
  // 	}),
  // });
  // var cva_w = new ol.layer.Tile({
  // 	title: "地形图文字标注",
  // 	source: new ol.source.XYZ({
  // 		url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=" + key + "",
  // 	}),
  // });
  // cva_w.setVisible(false);   // 可以控制是否显示这个图层
  // cia_w.setVisible(false);


  let view = new ol.View({
    center: ol.proj.fromLonLat([111.32034, 38.27778]),
    zoom: 12,
    // minZoom: 12,
    // maxZoom: 18.5,
  })

  var map = new ol.Map({
    target: 'map',
    // logo: false,  // 隐藏右下角的logo
    layers: [img_w, cia_w],
    view: view,

    // 加载控件到地图容器中
    // controls: ol.control.defaults({
    //   zoom: false,  // 隐藏缩放按钮
    //   rotate: false,  // 隐藏方向按钮
    //   attribution: false  // 隐藏右下角logo
    // })
  });
</script>

</html>