Openlayers 2.X加载高德地图

概述:

前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍Openlayers 2.X下加载高德地图。

实现效果:

高德地图

高德影像

图中:蓝色的省市边界为我本机发布的,能够与高德地图很好地结合在一起。

实现:

实现很简单的,主要是要获取地图的url,在Arcgis for js加载百度地图一文(http://blog.csdn.net/gisshixisheng/article/details/44853709)中做了介绍,在此不再赘述,实现代码如下:

<!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(){
            var vecLayer = new OpenLayers.Layer.XYZ("高德矢量", [
                "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",
                "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",
                "http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",
                "http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}"
            ], {
                isBaseLayer: true,
                visibility: true,
                displayInLayerSwitcher: true
            });
            var imgLayer = new OpenLayers.Layer.XYZ("高德栅格", [
                "http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}",
                "http://webst02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}",
                "http://webst03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}",
                "http://webst04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}"
            ], {
                isBaseLayer: true,
                visibility: true,
                displayInLayerSwitcher: true
            });

            map = new OpenLayers.Map("map",{
                projection: "EPSG:900913",
                displayProjection: "EPSG:4326",
                units: 'm',
                layers: [vecLayer, imgLayer],
                numZoomLevels:20,
                center: [11858238.665397, 4762368.6569168],
                zoom: 5
            });
            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);
        }
    </script>
</head>
<body onload="init()">
    <div id="map"></div>
</body>

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏顶级程序员

Python 2要凉了,RedHat也正式宣布弃坑

源 / 顶级程序员 文 / An先生 (RedHat 官网截图) 近日,Red Hat 宣布,它的企业级发行版 RHEL 下个大版本将用 Python...

38980
来自专栏张善友的专栏

XCodeGhost表明:为了安全,开发工具应该从官方网站下载

今天的热门话题就是XCode编译器,这个神器在火热的移动互联网浪潮下也被人利用了,据文章分析 (XCode编译器里有鬼 - XCodeGhost样本分析)htt...

201100
来自专栏编程

033Python爬虫学习笔记-1从入门到爬取豆瓣书评影评

1.什么是爬虫 可以理解为抓取、解析、存储互联网上原始信息的程序工具,Google、Baidu底层都是爬虫。 2.为什么学Python和爬虫 从2013年毕业入...

360100
来自专栏Jerry的SAP技术分享

SAP S4CRM和C4C的技术比较

如果您对SAP S/4HANA for Customer Management(以下简称S4CRM)和SAP Cloud for Customer(以下简称C4...

45570
来自专栏安恒网络空间安全讲武堂

从零开始的CTF学习过程

在上大学之前,我是从来没有学习过任何编程知识的。不过我喜欢计算机,甚是喜欢这折腾的过程,从刚开始的学习使用、玩游戏、找外挂辅助,到后来的维修计算机。

25120
来自专栏DeveWork

WordPress免插件仅修改代码去掉评论/留言里的链接

这篇文章名为技术技巧篇,但也算是一个通告吧:即日起,Jeff的阳台为了规范评论,将移除评论员里面的网站链接。同时,一切在评论里夹带链接的,将以垃圾评论处理。如有...

20960
来自专栏SDNLAB

SDN实战团分享(三十一):Segment Routing meet SDN

一、介绍 ? 在1990年代Yakov, Eric Rosen, Kompella很多业界先驱(仅列举了Juniper公司的MPLS业界领袖,其他公司也有 很多...

806160
来自专栏康怀帅的专栏

Mac OS X 背后的故事(下)

Mac OS X 背后的故事(九)半导体的丰收 半导体的丰收(上)   在美国宾夕法尼亚州的东部,有一个风景秀美的城市叫费城。在这个城市诞生了一系列改变世界的奇...

49670
来自专栏华章科技

如何从互联网采集海量数据?租房,二手房,薪酬...

不少朋友看了沙漠君的文章后,都会问:那几十万条租房,二手房,薪酬,乃至天气数据都是从哪里来的?其实我还没告诉你这些数据在十几分钟内就可以采集到!

7820
来自专栏Guangdong Qi

苹果审核被拒 2.3.10

26240

扫码关注云+社区

领取腾讯云代金券