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>

时间: 2024-07-30 23:40:04

Openlayers 2.X加载高德地图的相关文章

openLayers加载高德地图

之前用openlayers对高德,百度,腾讯,bing,supermap,天地图,arcgis,google等地图进行了对接,今天简单介绍一下openlayers+高德: 在Openlayers.Layer.XYZ.js中有如下更改:(百度兴趣点下载工具:http://www.cnblogs.com/songjiang6940/p/baiduPOI.html) 1 * bounds - {<OpenLayers.Bounds>} 2 * 3 * Returns: 4 * {String} A

OpenLayers 3 之 加载天地图

要使用 OpenLayers 3 加载天地图,首先要弄清楚天地图发布的原理,以及遵循的发布规范,上一篇中我们提到了使用 OpenLayers 3 加载百度地图,我们提到一般网络地图为了加快访问速度,都采用缓存切片地图的方式,天地图也不例外,而且原理极其类似,但是其切片的索引组织方式还是有一些不同,虽然都是切片,但是切片的起始坐标原点不一致,百度地图是屏幕的左下角,而天地图是屏幕的左上角(与谷歌地图一致),且所在的坐标系是球形墨卡托投影坐标系(EPSG:3857). 针对这种形式发布的地图切片,O

ArcGIS Javascript API 加载高德在线地图扩展

利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_base/declare", "esri/geometry/Extent", "esri/SpatialReference", "esri/geometry/Point", "esri/layers/TileInfo",

中科燕园webgis外包 讲解2----使用geoserver+openLayers加载google地图

1. 准备工作 安装java环境即JDK 下载geoserver  官网:http://geoserver.org/display/GEOS/Welcome 我的描述使用的是geoserver1.7版本,2.0版本类似,只是1.7是中文的,2.0版本可以再使用过1.7版本后自己摸索,大同小异. 下载openLayers 官网:http://www.openlayers.org/ 配置好JAVA_HOME 下载地图(shp格式) 可到此网站:http://nfgis.nsdi.gov.cn/asp

离线地图解决方案(一):加载瓦片地图

当前主流的在线地图有百度.高德.天地图.腾讯地图.google地图等.针对局域网内网内脱离要脱离互联网访问的应用,需要下载这些主流厂商的瓦片数据.网上有很多地图下载器软件可以下载地图瓦片,可以通过各种方式获取到这些地图厂商的瓦片数据. 加载高德离线瓦片数据: 加载高德街道瓦片: 地图加载代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

QGIS 加载 TMS 地图

QGIS加载TMS地图非常方便,TMS地图可以以XYZLAYER的形式被软件直接打开并加载,下面以高德地图为例,演示如何加载在线地图: 1.选择Tile Server-> new connection 2.弹出对话框后填写地图的URL 3.双击添加的节点即可将地图加入到工程中 4.我们也可以通过二次开发来动态加载程序

ArcGIS API for Silverlight 加载google地图

原文:ArcGIS API for Silverlight 加载google地图 using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using Syst

IE开发人员工具显示异常,IE加载百度地图,BMap“未定义”

现象:IE开发人员工具,打开界面("网络选项卡")一片空白. 解决:点击Internet选项-高级-重置,重启电脑(有提示). 现象:IE加载百度地图,BMap"未定义", 解决:上面的重置后,重启浏览器,意外地百度地图可以用了.( 现象: http://api.map.baidu.com/api?  响应出现问题,没有继续加载http://api.map.baidu.com/getscript?v=2.0&ak= ) 这里还可以参考这篇博文(这个原来也设置

ArcGIS API for Silverlight加载google地图(后续篇)

原文:ArcGIS API for Silverlight加载google地图(后续篇) 之前在博客中(http://blog.csdn.net/taomanman/article/details/8019687)提到的加载google地图方案,因为google地址问题,看不到图了,发现是url地址变换造成的. 现将如下三个类公布出来,源码如下: using System; using System.Net; using System.Windows; using System.Windows.