data-visualization/ol3-graticule.html at master · QingyaFan/data-visualization · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <link href="./css/ol.css" rel="stylesheet"/>
      <link href="./css/common.css" rel="stylesheet"/>
      <title>OL3-地图网格</title>
  </head>
  <body>
      <div id="map"></div>

      <script src="./js/ol.js"></script>
      <script type="text/javascript">
          var osmLayer = new ol.layer.Tile({
              source: new ol.source.OSM()
          });
          var map = new ol.Map({
              target: 'map',
              layers: [osmLayer],
              view: new ol.View({
                  center: ol.proj.transform([116, 40],"EPSG:4326", "EPSG:3857"),
                  zoom: 9
              })
          });
          var graticuleLayer = new ol.Graticule({
  //            map: map,
              strokeStyle: new ol.style.Stroke({
                  color: 'rgba(12, 12, 12, 0.8)',
                  width: 0.6
              }),
              targetSize: 100
          });
          graticuleLayer.setMap(map);
      </script>
  </body>
</html>