（轉）Openlayers 2.X加載高德地圖

時間 2019-11-15

標籤 openlayers 2.x 加載地圖简体版

原文原文鏈接

http://blog.csdn.net/gisshixisheng/article/details/44853881javascript

概述：css

前面的有篇文章介紹了Openlayers 2.X下加載天地圖，本節介紹Openlayers 2.X下加載高德地圖。html

實現效果：java

高德地圖web

高德影像app

圖中：藍色的省市邊界爲我本機發布的，可以與高德地圖很好地結合在一塊兒。ssh

實現：ui

實現很簡單的，主要是要獲取地圖的url，在Arcgis for js加載百度地圖一文（http://blog.csdn.net/gisshixisheng/article/details/44853709）中作了介紹，在此再也不贅述，實現代碼以下：url

[html] view plain copy

print ?

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。