Openlayers 2.X加载天地图
时间:2022-06-13
本文章向大家介绍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>
- Git 进阶指南
- Python 文本挖掘:使用情感词典进行情感分析(算法及程序设计)
- 可能是地球上最好用的 Mac 词典工具
- 经典Java面试题收集
- alert日志中的一条ora警告信息的分析(59天)
- golang 详解defer
- 猫哥网络编程系列:HTTP PEM 万能调试法
- 分析函数牛刀小试 (59天)
- 猫哥网络编程系列:详解 BAT 面试题
- SpringMVC中@RequestBody引起的400异常处理,返回校验失败具体信息
- 关于primary key和unique index的奇怪问题 (58天)
- 在centos7上安装Jenkins
- Spring resource bundle多语言,单引号format异常
- String的内存模型,为什么String被设计成不可变的
- 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 数组属性和方法