<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>GIS地图</title>
<link href="css/ol.css" rel="stylesheet">
<script src = "js/ol-debug.js" type="text/javascript"></script>
<style type="text/css">
body,html,div,ul,li,iframe,p,img{
border:none;padding:0;margin:0;
font-size:14px;
font-family:"微软雅黑";
}
#map{
width:100%;
height:511px;
position:absolute;
}
/* 图层控件层样式设置 */
.sub_menue
{
display:none; /*先将子菜单设置为隐藏*/
}
li:hover .sub_menue
{
display:block; /*设置鼠标滑过动作，以块级元素的形式显示出子菜单*/
}
#showlayer{
position:absolute;
right:0px;
top:50px;
z-index:3000; /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
}
.layerControl{
position:absolute;
bottom:5px;
min-width:200px;
max-height:200px;
right:0px;
top:50px;
z-index:2001; /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
color:#ffffff;
background-color:#4c4e5a;
border-width: 10px; /*边缘的宽度*/
border-radius: 10px; /*圆角的大小 */
border-color: #000 #000 #000 #000; /*边框颜色*/
}
.layerControl .title
{
font-weight:bold;
font-size:15px;
margin:10px;
}
.layerTree li
{
list-style:none;
margin:5px 10px;
}
#toolbar{
position:absolute;
width:500px;
height:200px;
right:50px;
top:5px;
z-index:2002; /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
border-width: 10px; /*边缘的宽度*/
border-radius: 10px; /*圆角的大小 */
border-color: #000 #000 #000 #000; /*边框颜色*/
}
#tool{
position:absolute;
right:0px;
top:0px;
z-index:3000; /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
}
/* 鼠标位置控件层样式设置 */
#mouse-position{
float:left;
position:absolute;
left:2px;
bottom:25px;
width:200px;
height:20px;
z-index:5000;
}
#map .ol-zoom .ol-zoom-out {
margin-top: 204px;
}
#map .ol-zoomslider {
background-color : transparent;
top: 2.3em;
}
#map .ol-touch .ol-zoom .ol-zoom-out {
margin-top: 212px;
}
#map .ol-touch .ol-zoomslider {
top: 2.75em;
}
#map .ol-zoom-extent {
top: 270px;
}
.ol-custom-overviewmap,.ol-custom-overviewmap.ol-uncollapsible {
bottom: auto;
left: 35px;/*auto*/
right: auto; /* 右侧显示 */
top: 7px; /* 顶部显示 */
}
.ol-custom-overviewmap:not(.ol-collapsed) {
border: 1px solid black;
}
.ol-custom-overviewmap .ol-overviewmap-map {
border: none;
width: 300px;
}
.ol-custom-overviewmap .ol-overviewmap-box {
border: 2px solid red;
}
.ol-custom-overviewmap:not(.ol-collapsed) button{
bottom: auto;
left: 0px;
right: 1px;
top: 1px;
}
.btn{
border:0px;
}
#name{
position:absolute;
bottom:1px;
width:100%;
height:48px;
}
</style>
</head>
<body>
<ul style="background-image: url(images/banner.png);text-align: center;font-size: 45px;" >webgis
</ul>
<div id="map" >
<div id="mouse-position" ></div>
<div id="tool" >
<button class="btn" onclick ="hidden1()" title="工具栏" ><img src="images/11.png" /></button>
</div>
<div id="toolbar" style="display: none;">
<button class="btn" onclick ="towh()" title="移至武汉" ><img src="images/1.png" /></button>
<button class="btn" onclick ="zoom_out()" title="缩小地图" ><img src="images/2.png" /></button>
<button class="btn" onclick ="zoom_in()" title="放大地图" ><img src="images/3.png" /></button>
<button class="btn" onclick ="draw_plo()" title="画多边形" ><img src="images/p.png" /></button>
<button class="btn" onclick ="draw_r()" title="画矩形" ><img src="images/j.png" /></button>
<button class="btn" onclick ="draw_lin()" title="画线" ><img src="images/l.png" /></button>
<button class="btn" onclick ="draw_poi()" title="画点" ><img src="images/4.png" /></button>
<button class="btn" onclick ="draw_c()" title="画圆" ><img src="images/c.png" /></button>
<button class="btn" onclick ="drawdel()" title="取消画图" ><img src="images/del.PNG" /></button>
</div>
<div id="showlayer" >
<button class="btn" onclick ="showlay()" title="显示图层" ><img src="images/t.png" /></button>
</div>
<div id="layerControl" class="layerControl" style="display: none;">
<div class="title"><label>图层列表</label></div>
<ul id="layerTree" class="layerTree"></ul>
</div>
</div>
<div id="name" style="background-image: url(images/banner.png);text-align: center;font-size: 15px;" >
<br />
地信152 舒云超 201501103048
</div>
<script type="text/javascript">
//地图视图设置
var view=new ol.View({
center: [12125000, 4060000], //地图初始中心点
zoom:12//地图初始显示级别
});
var full= new ol.control.FullScreen();
//鼠标位置
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4), //坐标格式
projection: 'EPSG:4326', //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
className: 'custom-mouse-position', //坐标信息显示样式，默认是'ol-mouse-position'
target: document.getElementById('mouse-position'), //显示鼠标位置信息的目标容器
undefinedHTML: ' '//未定义坐标的标记
});
//比例尺
var scale=new ol.control.ScaleLine({
units:'metric'//比例尺单位为degrees,imperial us，nautical和metric。
});
//鹰眼
var yingyan=new ol.control.OverviewMap({
className: 'ol-overviewmap ol-custom-overviewmap',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(//{
//'url': 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
//}
)
})
],
collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
collapsed: true //初始为折叠显示方式
});
//缩放控件
var zoomslider=new ol.control.ZoomSlider();
var zoomToExtend=new ol.control.ZoomToExtent({extend:[13100000,
syc.rar （18个子文件） 
syc css 
ol.css 4KB images 
11.png 987B 1.PNG 2KB 4.PNG 472B c.PNG 1KB banner.png 123KB p.PNG 1KB l.PNG 1KB 3.PNG 3KB 2.png 4KB del.PNG 4KB t.PNG 2KB j.PNG 473B
index.html 16KB js ol-debug.js 3.54MB ol3ZY .project 660B geojson countries.geojson 250KB web.config 299B
weixin_42651887
- 粉丝: 97
- 资源: 1万+
最新资源
- 一个十分容易使用的Go语言JSON库（解析JSON、生成JSON）.zip
- 一个十分容易使用的C语言JSON库（解析JSON、生成JSON）.zip
- 2024-软件工程大作业-波普特廉价酒店的温控计费系统小组大作业.zip[前端：vue、后端：Python]
- 一个全面的 Go 语言文件操作 package，API 参照 nodejs 中 fs-extra 的设计，简单易用.zip
- 一个使用易语言编写并用精易模块调用PHP-API上的内容返回的酷Q插件.zip
- 一个使用易语言制作的音乐播放器 FatmcCloudMusic3开源仓库.zip
- 一个会篡改MBR的病毒（基于易语言和c++）.zip
- 网络节点切换工具V1（分主节点+两个分节点）
- Android的在线云音乐播放器项目源码+文档说明（高分项目）
- 基于java+spring+springMVCl的医疗系统开题报告.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0