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
| <!DOCTYPE html>
| <html xmlns="http://www.w3.org/1999/xhtml">
| <head>
| <title>ol.html</title>
| <meta http-equiv="Expires" content="0" />
| <meta http-equiv="Cache" content="no-cache" />
| <meta http-equiv="Pragma" content="no-cache" />
| <meta http-equiv="Cache-control" content="no-cache" />
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| <link href="ol-5.3.3/ol.css" rel="stylesheet" />
| <script src="ol-5.3.3/ol.js"></script>
| <style type="text/css">
| body {
| margin: 0;
| padding: 0;
| }
|
| html, body, #map {
| width: 100%;
| height: 100%;
| }
| </style>
| <script>
| window.onload = function () {
| init();
| }
|
| function init() {
| var source = new ol.source.XYZ({
| url: '{z}/{x}/{y}.png'
| });
| var tileLayer = new ol.layer.Tile({
| title: '影像图',
| source: source
| });
|
| window.map = new ol.Map({
| target: 'map', // div的id
| controls: ol.control.defaults({
| attributionOptions: ({
| collapsible: true
| })
| }),
| layers: [
| tileLayer
| ],
| view: new ol.View({
| center: ol.proj.transform([112.95720152104428, 32.15963315155602], 'EPSG:4326', 'EPSG:3857'),
| //center: ol.proj.transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'), // 定位中国
| zoom: 8, // 当前级别
| minZoom: 8, // 最小级别
| maxZoom: 18, // 最大级别
| projection: "EPSG:3857" // Web墨卡托投影坐标系
| })
| });
| }
| </script>
| </head>
| <body>
| <div id="map"></div>
| </body>
| </html>
|
|
