zoukankan      html  css  js  c++  java
  • OpenLayers.2.10.Beginners.Guide---第一章

    从网上下载openlayers2,解压取得img theme 文件夹和openlayes.js文件。放在同一文件夹下用phpstorm打开。

    创建index.html-------------每一行都有注释

    <!DOCTYPE html>
    <html lang='en'>
    <head>
        <meta charset='utf-8'/>
        <title>My OpenLayers Map</title>
        <script type='text/javascript' src='OpenLayers.js'></script>//载入库文件
        <script type='text/javascript'>//js脚本,可以单独创建js文件,载入到html
            var map;//创建一个名为map的全局变量。
            function init() {
                map = new OpenLayers.Map('map_element', {});//从地图上创建一个映像对象类
                //第一个参数--map_element显示地图的html文件中的ID  第二个参数是地图的选项
                var wms = new OpenLayers.Layer.WMS(//创建一个层对象映射到使用WMS层类的子类。
                        'OpenLayers WMS',//层的标题,在控制层列表增加可读性
                        'http://vmap0.tiles.osgeo.org/wms/vmap0',//URL是第二个参数,期望获得的WMS层类。
                        {layers: 'basic'},//键值对 返回"basic"层
                        {}
                );//WMS,代表网络地图服务  一个国际标准定义的开放地理联盟(OGC)。
                map.addLayer(wms);//将图层添加到地图
                if (!map.getCenter()) {//定义地图的范围
                    map.zoomToMaxExtent();//地图缩放地图的最大程度
                    /**
                     * 其他控制大小的方法
                     * map.zoomToExtent(new OpenLayers.Bounds([minx,miny,maxx,maxy]);
                     *
                     * map.setCenter(new OpenLayers.LonLat(x,y));
                     * map.zoomTo(5);//x,y是经度/纬度值,5是你想放大的缩放级别。
                     *
                     */
                }
            }
        </script>
    </head>
    <body onload='init();'>
    <div id='map_element' style=' 500px; height: 500px;'>
    </div>//为地图创建HTML元素
    </body>
    </html>
    View Code
  • 相关阅读:
    angularjs 默认选中ng-repeat的一个
    AngularJs中directive的延迟加载
    AngularJS的angucomplete-alt
    Bootstrap Multiselect中文
    input[file]标签的accept=”image/*”属性响应很慢的解决办法
    全局安装cnpm
    实现鼠标悬浮内容自动撑开的过渡动画
    table表格 css样式
    IntelliJ idea 的破解
    浏览器使用谷歌搜索
  • 原文地址:https://www.cnblogs.com/lxwy1992/p/5113721.html
Copyright © 2011-2022 走看看