Openlayers 2.X加载高德地图
时间:2022-06-13
本文章向大家介绍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>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 10张图带你深入理解Docker容器和镜像
- 手摸手教你撸一个微服务框架-关于服务端的处理
- 聊聊claudb的string command
- windows下安装nodejs
- 【Java面试总结】Java集合
- 《JavaScript 模式》读书笔记(8)— DOM和浏览器模式1
- 《JavaScript 模式》读书笔记(8)— DOM和浏览器模式2
- 5000字 | 24张图带你彻底理解21种并发锁
- JavaScript-变量
- Android应用安装卸载监控
- 细数这些年被困扰过的 TS 问题
- 将WordPress插件Elementor标签插入到WordPress模板文件以使用Elementor编辑
- WordPress自定义新建多区域widget小工具调用
- WordPress调用分类目录 及输出当前分类下的二级目录 和分类文章数量显示
- CSS让Li标签溢出后自动换行