Openlayers 3 使用

最新推荐文章于 2024-11-11 19:29:13 发布

diaohu0796

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量110

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dongwy/p/6769483.html

版权

　　　Openlayers 3.11.1 前端地图框架，还是很好用的，被惊艳到了，还是我太落后了。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>map</title>
 5   <link rel="stylesheet" type="text/css" href="css/ol.css">
 6   <script type="text/javascript" src = "build/ol.js"></script>
 7   <style type="text/css">
 8     html,body{
 9       height: 100%;
10     }
11     #demo{
12       width: 100%;
13       height: 100%
14     }
15   </style>
16 </head>
17 <body>
18     <div id="demo"></div>
19     <script type="text/javascript">
20         map = new ol.Map({
21           target: 'demo',
22           layers: [  //图层加载
23           new ol.layer.Tile({
24                    source: new ol.source.OSM()
25                 }),
26             // new ol.layer.Tile({
27             //     source: new ol.source.XYZ({
28             //         url: "http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
29             //     })
30             // }),
31                 new ol.layer.Tile({
32                     source: new ol.source.XYZ({
33                         url: "http://t2.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}"
34                     })
35                 })
36           ],
37           view: new ol.View({
38             center: ol.proj.fromLonLat([116.4, 39.9]),//首次打开地图中心坐标
39             zoom: 12,//放大比例
40           }),
41             controls: ol.control.defaults().extend([
42                 new ol.control.FullScreen(), //全屏控件
43                 new ol.control.ScaleLine(), //比例尺
44                 new ol.control.OverviewMap(), //鹰眼控件   小地图
45                 new ol.control.Rotate(),
46                 new ol.control.MousePosition(), //鼠标坐标
47                 new ol.control.ZoomSlider(),  //缩放滑块
48              ]),
49         });
50     </script>
51 </body>
52 </html>