Openlayers 2.X加载天地图

概述:

在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何在Openlayers 2.X的版本中加载天地图,并添加自己的wms服务。

效果:

地图

影像

地形

去掉本地wms

实现:

1、天地图服务

在天地图的官方网站上,我们可以看到如下所示的:

页面上列出了我们可调用的图的url,网站地址为:http://www.tianditu.com/guide/index.html。

2、加载天地图

在openlayers中加载天地图可用OpenLayers.Layer.XYZ来实现,在此,我将之封装成了两个函数,getBaseLayer和getAnnoLayer,分别实现基础底图和标注图层,代码如下:

            function getBaseLayer(layername, layer){
                return new OpenLayers.Layer.XYZ(
                        layername,
                        [
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"

                        ],
                        {
                            isBaseLayer: true,
                            displayInLayerSwitcher:true
                        }
                );
            };
            function getAnnoLayer(layername, layer, visiable){
                return new OpenLayers.Layer.XYZ(
                        layername,
                        [
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"

                        ],
                        {
                            isBaseLayer: false,
                            visibility:visiable,
                            displayInLayerSwitcher:false
                        }
                );
            };

调用方式为:

            var baseLayers = ["vec_c","img_c","ter_c"];
            var vecLayer = getBaseLayer("地图",baseLayers[0]);
            var imgLayer = getBaseLayer("影像",baseLayers[1]);
            var terLayer = getBaseLayer("地形",baseLayers[2]);

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

完整代码如下:

<!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="http://200.200.200.222/OpenLayers-2.12/theme/default/style.css"/>
    <style type="text/css">
        html, body, #map{
            padding:0;
            margin:0;
            height:100%;
            width:100%;
        }
    </style>
    <script type="text/javascript" src="http://200.200.200.222/OpenLayers-2.12/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
        function init(){
            function getBaseLayer(layername, layer){
                return new OpenLayers.Layer.XYZ(
                        layername,
                        [
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"

                        ],
                        {
                            isBaseLayer: true,
                            displayInLayerSwitcher:true
                        }
                );
            };
            function getAnnoLayer(layername, layer, visiable){
                return new OpenLayers.Layer.XYZ(
                        layername,
                        [
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
                            "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"

                        ],
                        {
                            isBaseLayer: false,
                            visibility:visiable,
                            displayInLayerSwitcher:false
                        }
                );
            };

            var baseLayers = ["vec_c","img_c","ter_c"];
            var vecLayer = getBaseLayer("地图",baseLayers[0]);
            var imgLayer = getBaseLayer("影像",baseLayers[1]);
            var terLayer = getBaseLayer("地形",baseLayers[2]);

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


            map = new OpenLayers.Map({
                div: "map",
                projection: "EPSG:4326",
                layers: [vecLayer,imgLayer,terLayer],
                numZoomLevels:20,
                center: [103.847, 36.0473],
                zoom: 4
            });
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());

            var wms = new OpenLayers.Layer.WMS(
                    "省级行政区",
                    "http://200.200.200.220:8080/geoserver/wms",
                    {
                        LAYERS: "pro",
                        transparent:true
                    },
                    {
                        singleTile: false,
                        ratio: 1,
                        isBaseLayer: false,
                        visibility:true,
                        yx : {'EPSG:4326' : true}
                    }
            );
            map.addLayer(wms);
            map.addLayers([vecAnno]);
        }
    </script>
</head>
<body onload="init()">
    <div id="map"></div>
</body>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

RFID入门:Mifare1智能水卡破解分析

文章的最开始,先来致敬RadioWar。一直手痒RFID这个领域,准备了一段时间,开始入门RFID。 先来普及一下基础知识: RFID即为射频识别。NFC近场...

1.2K70
来自专栏Seebug漏洞平台

VxWorks Fuzzing 之道:VxWorks 工控实时操作系统漏洞挖掘调试与利用揭秘

来自404实验室安全研究团队的对于VxWorks 工控实时操作系统进行的 Fuzzing 与漏洞挖掘调试、利用的安全探究。 0x00 前言 关于VxWorks,...

60650
来自专栏FreeBuf

简谈渗透测试各阶段我常用的那些“神器”

本人所有文章都很用心的写作完成,并时常总结如何分享更有用的东西给朋友们。这篇更是如此,晚上准备到凌晨四点开始写作,为了需要的朋友而写,不喜欢的右上角点叉不要像上...

68530
来自专栏SDNLAB

新三网融合——计算存储与网络

网络转发设备用于传输流量,不同类型的流量对网络的需求是不同的。数据中心中有三大类资源,计算、存储和网络,之前讲过的数据网络都是用来传输用户到用户的应用流量的,这...

39260
来自专栏Java学习网

网页开发之目前流行的五大浏览器内核介绍

浏览器的内核是分为两个部分的,一是渲染引擎,另一个是JS引擎。现在JS引擎比较独立,内核更加倾向于说渲染引擎。

30730
来自专栏玄魂工作室

使用yo-get下载视频网站视频或其

前言 很多时候随时随地在线看视频不是那么容易,尤其是YouTube的视频(你懂得),所以遇到好的视频下载下来还是有必要的。今天给大家介绍就是一款下载视频站视频的...

68750
来自专栏腾讯大数据的专栏

全民拥抱Docker云--Lhotse系统经验分享

前言 “只要站在风口,猪也能飞起来”,这碗心灵鸡汤不知道激励了多少英雄豪杰踏上寻风口之路。而现如今,Docker这阵龙卷风呼啸来袭,更让众人生起迎风而上、直冲云...

29390
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(八):数据库字段的定义(下)

努力与运动兼备~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

36220
来自专栏友弟技术工作室

工欲善其事,必先利其器之------MAC工具类

前面分享了一篇《工欲善其事,必先利其器之------Ubuntu工具类》,今天分享MAC的工具。 由于我是一个程序员可能,工具偏开发一点。 ? 通用类的工具 ...

38380
来自专栏向治洪

移动端跨平台技术总结

概述 曾经大家以为在手机上可以像桌面那样通过 Web 技术来实现跨平台开发,却因为性能或其他问题而放弃,不得不针对不同平台开发多个版本。这也违背了跨平台开发的初...

34150

扫码关注云+社区

领取腾讯云代金券