OpenLayers3 学习心得（二）——开发配置

最新推荐文章于 2024-07-20 16:35:33 发布

GISerHou

最新推荐文章于 2024-07-20 16:35:33 发布

阅读量7.8k

点赞数

分类专栏： Openlayers

本文链接：https://blog.csdn.net/xiaohou66/article/details/41311063

版权

Openlayers 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

由于ol是js类库，因此在开发时只需要将ol引用到页面中。

1 类库下载

编译好的类库可以到ol的官网下载，但是由于国内屏蔽了github 可能下载不了，解决方法：

可以重新定向host；
也可以到csdn上下载：http://download.csdn.net/download/longshengguoji/8053751
没有积分的可以到网盘：http://yunpan.cn/cAreGWFvrcTkE 访问密码 f994

2 文件引用

实测至少引用：ol-debug.js和base.js两个文件，因为本人使用了自带的样式因此引用的文件如下：

3 开发方式

可以直接使用html页面方式；
使用j2ee方式；
使用asp.net方式：
使用其他方式……；

顺便推荐一款js的ide：webstorm 智能索引很好用。

4. 实例

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ol3</title>
<link rel="stylesheet" href="css/ol.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="css/layout.css">
<script type="text/javascript" src="ol3/ol-debug.js"></script>
<script type="text/javascript" src="goog/base.js"></script>
<style >
    a.skiplink{
        position: absolute;
        clip: rect(1px,1px,1px,1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;

    }
    a.skiplink:focus{
        clip: auto;
        height: auto;
        width: auto;
        background-color: #ffffff;
        padding: 0.3em;
    }
</style>


    <script type="text/javascript">
        function init(){
            var map=new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        //source: new ol.source.MapQuest({layer: 'sat'})
                        source: new ol.source.Stamen({
                            layer: 'watercolor'
                        })
                    })

                ],
                view: new ol.View({
                	center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
                    zoom: 4
                })
            });
            //添加比例尺，单位m
            var scaleLineControl=new ol.control.ScaleLine();
            scaleLineControl.setUnits(ol.control.ScaleLineUnits.METRIC);
            map.addControl(scaleLineControl);
            //缩放工具条
            var zoomSilder=new ol.control.ZoomSlider();
            map.addControl(zoomSilder);

        }
    </script>
</head>
<body οnlοad="init()">
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="./"><img src="images/logo.png" alt="">Openlayers 3 Examples</a>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <a class="skiplink" href="#map">Go to map</a>
            <div id="map" class="map" tabindex="0"/>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <h4 id="title">Accessibility example</h4>
            <p id="shordesc">Example of an accessible map.</p>
            <div id="docs">
                <p>This page's <code>map</code> element has its <code>tabindex</code> attribute set to <code>"0"</code>, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the <code>map</code> element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.</p>
                <p>When clicked the "Zoom in" and "Zoom out" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.</p>
                <p>See the <a href="accessible.js" target="_blank">accessible.js source</a> to see how this is done.</p>
            </div>
            <div id="tags">accessibility,tabindex</div>
        </div>
    </div>
</div>

</body>
</html>

点击页面，效果如下：

GISerHou

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
OpenLayers3 学习心得（二）——开发配置

由于ol是js类库，因此在开发时只需要将ol引用到页面中。1 类库下载编译好的类库可以到ol的官网下载，但是由于国内屏蔽了github 可能下载不了，解决方法： 可以重新定向host； 也可以到csdn上下载：http://download.csdn.net/download/longshengguoji/8053751 没有积分的可以到网盘：http://yunpan.
复制链接

扫一扫

专栏目录