使用openlayers3来加载天地图卫星图和标注图层，GeoServer发布地图，一并用openlayers测试加载出来，顺便实现了7种地图控件。下面直接贴代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<meta name="apple-mobile-web-app-capable" content="yes">

<title>OpenLayers MapQuest Demo</title>

    <link rel="stylesheet" type="text/css" href="css/ol.css"/>

    <style type="text/css">

        html, body, #map{

            padding:0;

            margin:0;

            height:100%;

            width:100%;

        }

        .mouse-position-wrapper{

            width:300px;

            height:29px;

            color:#FF00FF;

            position:absolute;

            right:20px;

            bottom:6px;

            z-index:999;

          }

          .ol-rotate{

            right:40px;

          }

          .ol-scale-line {

            left:180px;

          }

          .ol-zoomslider{

            top:120px;

            left: 9px;

          }

    </style>

    <script type="text/javascript" src="build/ol.js"></script>

    <script type="text/javascript">

        var map;

        function init(){

            //封装底图函数

            function getBaseLayer(layername, layer){

                return new ol.layer.Tile({

                     title:layername,

                     source:new ol.source.XYZ({

                         url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}"

                     })

                });

            };  

            //封装标注图层

            function getAnnoLayer(layername, layer, visiable){

                return new ol.layer.Tile({

                     title:layername,

                     source:new ol.source.XYZ({

                      url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}"

                     })

                });

            };  

            //天地图图层

            var baseLayers = ["vec_w","img_w","ter_w"];

            var vecLayer = getBaseLayer("地图",baseLayers[]);

            var imgLayer = getBaseLayer("影像",baseLayers[]);

            var terLayer = getBaseLayer("地形",baseLayers[]);

            var vecAnno = getAnnoLayer("地图标注", "cva_w", true); 

            //使用GeoServer发布的地图

            function getWMSLayer(){

                return new ol.layer.Image({

                    source:new ol.source.ImageWMS({

                        url:'http://localhost:8080/geoserver/wms',

                        params: {'LAYERS': 'topp:testpoly_landmarks','VERSION':'1.1.1'},

                        serverType: 'geoserver'

                    })

                })

            }

            //GeoServer中图层范围BBOX范围值

              var extent=[-74.047,40.68,-73.908,40.882];  

              //地图投影类型

              var projection=new ol.proj.Projection({

                  code:'EPSG:4326',

                 units:'degrees',

                  extent:extent

              });  

            var geoServerTest=getWMSLayer();

            map = new ol.Map({

                controls:ol.control.defaults().extend([

                    new ol.control.FullScreen(),

                    new ol.control.MousePosition({

                        coordinateFormat: ol.coordinate.createStringXY(4),

                        projection: 'EPSG:4326',

                        className: 'custom-mouse-position',

                        target: document.getElementById('mouse-position')

                    }) ,

                    new ol.control.OverviewMap({  }),

                    new ol.control.Rotate({

                        autoHide:false

                    }),

                    new ol.control.ScaleLine({  }),

                    new ol.control.ZoomSlider({  }),

                    new ol.control.ZoomToExtent({  })

                ]),

                view:new ol.View({

                    projection:projection,

                    center: ol.extent.getCenter(extent),

                    minZoom:1,

                    maxZoom:5,

                    zoom:1

                }),

                target: 'map',

                layers: [geoServerTest],

            });  

        }

    </script>

</head>

<body onload="init()">

    <div id="map"></div>

    <div  id="mouse-position" class="mouse-position-wrapper">

    <div class="custom-mouse-position"></div>

</div>

</body>

使用openlayers 3 在线加载天地图及GeoServer发布的地图的更多相关文章

  1. （转）Openlayers 2.X加载天地图

    http://blog.csdn.net/gisshixisheng/article/details/44621923 概述: 在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何 ...

  2. cesium加载WFS服务(GeoServer发布)

    需求: 为了便于前端渲染数据,自定义图层渲染. 思路: 获取地图服务中的要素进行渲染. 工具: GeoServer 2.6.4,cesium, 思路有了就开始找资料写代码,cesium有接口可以加载W ...

  3. 【ArcGis for javascript从零开始】之一 ArcGis加载天地图

    最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.Ar ...

  4. OpenLayers学习笔记（一）—在线加载谷歌影像地图&离线加载本地瓦片地图

    实现根据在线离线判断加载地图, 在线加载谷歌影响地图, 离线加载本地瓦片地图 作者: 狐狸家的鱼 Github: 八至 html代码 <div id="map" tabind ...

  5. openlayers加载天地图过程中遇到跨域问题

    // 采用openlayers加载天地图 var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ // crossOrigin: 'An ...

  6. （转）Openlayers 2.X加载高德地图

    http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...

  7. ArcGis Javascript API (V3.6)加载天地图

    Arcgis的Javascript api开发很活跃,不知不觉都发布了3.6的版本了.该版本基于dojo 1.8.3开发的. 从dojo 1.8开始,AMD机制用得越来越多了,而且require([& ...

  8. ArcGIS API for Javascript 加载天地图（经纬度投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. ArcGIS API for Javascript 加载天地图（墨卡托投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. JVM探秘4---垃圾收集器介绍

    Java虚拟机有很多垃圾收集器 下面先来了解HotSpot虚拟机中的7种垃圾收集器:Serial.ParNew.Parallel Scavenge.Serial Old.Parallel Old.CM ...

  2. 普通程序员转型AI免费教程整合，零基础也可自学

    普通程序员转型AI免费教程整合,零基础也可自学 本文告诉通过什么样的顺序进行学习以及在哪儿可以找到他们.可以通过自学的方式掌握机器学习科学家的基础技能,并在论文.工作甚至日常生活中快速应用. 可以先看 ...

  3. 五一 DAY2

    DAY 2 比如:依次输入 3 1 5 4 2                                        插入 6 这里FZdalao有一个很巧妙的构造,直接吧输入的数字排成一个二 ...

  4. 每日linux命令学习-head命令和tail命令

    本节主要学习了linux文件浏览的相关命令,包括cat.less.more.read.tail等,由于本人经常使用cat.less.more命令,已经较为熟悉,所以本节重点学习head命令和tail命 ...

  5. MyEclipse如何清除废弃的工作空间

    1.MyEclipse如何清除废弃的工作空间Windows--->Preferences--->General--->Startup and Shutdown--->Works ...

  6. EL和jstl(概念和使用方法)

    概念: 1 .  JSP 标签 是用来替换java代码的技术,容器遇到标签后会将其转换成java代码,jsp标签类似于开始标记.属性.结束标记.标签体. EL表达式是一套简单的运算规则,用于给jsp标 ...

  7. svn钩子

    #!/bin/sh #修改为服务编码 export.UTF-8 #Set variable REPOS="$1" REV="$2" #svn安装脚本目录 SVN ...

  8. python简说（五）操作文件

    f = open('users.txt',encoding='utf-8') #读文件的时候,必须存在在才可以读 文件对象,或者文件句柄res = f.read()print(res)f.close( ...

  9. 前端基础小标签3 H5新标签

    第二部分H5的新标签一.<!-- mark标签             1.用于显示页面中需要重点关注的内容,就像看书需要用荧光笔划重点一样             2.浏览器通常会用黄色显示m ...

  10. ubuntu查看文件和文件夹大小

    在实际使用ubuntu时候,经常要碰到需要查看文件以及文件夹大小的情况. 有时候,自己创建压缩文件,可以使用 ls -hl 查看文件大小.参数-h 表示Human-Readable,使用GB,MB等易 ...