使用openlayers 3 在线加载天地图及GeoServer发布的地图
使用openlayers3来加载天地图卫星图和标注图层,GeoServer发布地图,一并用openlayers测试加载出来,顺便实现了7种地图控件。下面直接贴代码:
<!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="css/ol.css"/>
<style type="text/css">
html, body, #map{
padding:0;
margin:0;
height:100%;
width:100%;
}
.mouse-position-wrapper{
width:300px;
height:29px;
color:#FF00FF;
position:absolute;
right:20px;
bottom:6px;
z-index:999;
}
.ol-rotate{
right:40px;
}
.ol-scale-line {
left:180px;
}
.ol-zoomslider{
top:120px;
left: 9px;
}
</style>
<script type="text/javascript" src="build/ol.js"></script>
<script type="text/javascript">
var map;
function init(){
//封装底图函数
function getBaseLayer(layername, layer){
return new ol.layer.Tile({
title:layername,
source:new ol.source.XYZ({
url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}"
})
});
}; //封装标注图层
function getAnnoLayer(layername, layer, visiable){
return new ol.layer.Tile({
title:layername,
source:new ol.source.XYZ({
url:"http://t4.tianditu.com/DataServer?T="+layer+"&x={x}&y={y}&l={z}"
})
});
}; //天地图图层
var baseLayers = ["vec_w","img_w","ter_w"];
var vecLayer = getBaseLayer("地图",baseLayers[]);
var imgLayer = getBaseLayer("影像",baseLayers[]);
var terLayer = getBaseLayer("地形",baseLayers[]);
var vecAnno = getAnnoLayer("地图标注", "cva_w", true); //使用GeoServer发布的地图
function getWMSLayer(){
return new ol.layer.Image({
source:new ol.source.ImageWMS({
url:'http://localhost:8080/geoserver/wms',
params: {'LAYERS': 'topp:testpoly_landmarks','VERSION':'1.1.1'},
serverType: 'geoserver'
}) })
} //GeoServer中图层范围BBOX范围值
var extent=[-74.047,40.68,-73.908,40.882]; //地图投影类型
var projection=new ol.proj.Projection({
code:'EPSG:4326',
units:'degrees',
extent:extent
}); var geoServerTest=getWMSLayer(); map = new ol.Map({
controls:ol.control.defaults().extend([
new ol.control.FullScreen(),
new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: document.getElementById('mouse-position')
}) ,
new ol.control.OverviewMap({ }),
new ol.control.Rotate({
autoHide:false
}),
new ol.control.ScaleLine({ }),
new ol.control.ZoomSlider({ }),
new ol.control.ZoomToExtent({ })
]),
view:new ol.View({
projection:projection,
center: ol.extent.getCenter(extent),
minZoom:1,
maxZoom:5,
zoom:1
}),
target: 'map',
layers: [geoServerTest],
}); }
</script>
</head>
<body onload="init()">
<div id="map"></div>
<div id="mouse-position" class="mouse-position-wrapper">
<div class="custom-mouse-position"></div>
</div>
</body>
使用openlayers 3 在线加载天地图及GeoServer发布的地图的更多相关文章
- (转)Openlayers 2.X加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44621923 概述: 在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何 ...
- cesium加载WFS服务(GeoServer发布)
需求: 为了便于前端渲染数据,自定义图层渲染. 思路: 获取地图服务中的要素进行渲染. 工具: GeoServer 2.6.4,cesium, 思路有了就开始找资料写代码,cesium有接口可以加载W ...
- 【ArcGis for javascript从零开始】之一 ArcGis加载天地图
最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.Ar ...
- OpenLayers学习笔记(一)—在线加载谷歌影像地图&离线加载本地瓦片地图
实现根据在线离线判断加载地图, 在线加载谷歌影响地图, 离线加载本地瓦片地图 作者: 狐狸家的鱼 Github: 八至 html代码 <div id="map" tabind ...
- openlayers加载天地图过程中遇到跨域问题
// 采用openlayers加载天地图 var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ // crossOrigin: 'An ...
- (转)Openlayers 2.X加载高德地图
http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...
- ArcGis Javascript API (V3.6)加载天地图
Arcgis的Javascript api开发很活跃,不知不觉都发布了3.6的版本了.该版本基于dojo 1.8.3开发的. 从dojo 1.8开始,AMD机制用得越来越多了,而且require([& ...
- ArcGIS API for Javascript 加载天地图(经纬度投影)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- ArcGIS API for Javascript 加载天地图(墨卡托投影)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- flask实战-个人博客-使用蓝本模块化程序
使用蓝本模块化程序 实例化flask提供的blueprint类就创建一个蓝本实例.像程序实例一样,我们可以为蓝本实例注册路由.错误处理函数.上下文处理函数,请求处理函数,甚至是单独的静态文件文件夹和模 ...
- max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144]
elasticsearch启动时遇到的错误 问题翻译过来就是:elasticsearch用户拥有的内存权限太小,至少需要262144: 解决: 切换到root用户 执行命令: sysctl -w vm ...
- 关于js闭包之小问题大错误
闭包是 JavaScript 开发的一个关键方面:匿名函数可以访问父级作用域的变量. 如果闭包的作用域中保存着一个 HTML 元素,则该元素无法被销毁.(下面代码来自高程) 刚看到一个关于闭包自己没注 ...
- [转载]oracle的常用函数 instr() 和substr()函数
在Oracle中 可以使用instr函数对某个字符串进行判断,判断其是否含有指定的字符. 在一个字符串中查找指定的字符,返回被查找到的指定的字符的位置. 语法: instr(sourceString, ...
- linux grep 正则表达式
grep正则表达式元字符集: ^ 锚定行的开始 如:'^grep'匹配所有以grep开头的行. $ 锚定行的结束 如:'grep$'匹配所有以grep结尾的行. . 匹配一个非换行符的字符 如:'gr ...
- 【附】Python安装
Python是跨平台的,它可以运行在Windows.Mac和各种Linux/Unix系统上. 首先要实现Python安装及环境变量配置,然后会得到Python解释器(就是负责运行Python程序的), ...
- flask自动代码自动补全
编写py文件时,无法补全: 在app对象后面添加:# type:Flask app=Flask(__name__) # type:Flask from flask import Flask, fl ...
- P2765 魔术球问题
P2765 魔术球问题 贪心模拟就可以过.........好像和dinic没啥关系 找找规律发现可以贪心放.n又灰常小. 设答案=m 你可以$O(mn)$直接模拟过去 闲的慌得话可以像我用个$se ...
- 11: python递归
1.1 递归讲解 1.定义 1. 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 2.递归特性 1. 必须有一个明确的结束条件 2. 每次进入更深一层递归时,问题 ...
- build custom centos7
必读,在以下内容之前. pre: 0. install log redhat6 mak iso guide redhat7 make iso guide 1. Linux安装>(三)发行版制作 ...