<!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
- 粉丝: 104
- 资源: 1万+
最新资源
- DSPLLC开关电源模块设计资料DSP数字LLC电源源代码原理图软件学习，包含磁件设计、软件设计报告、硬件设计报告、硬件原理、主功率计算书、LLC环路设计、仿真、BOM、使用说明，调试波形等全面且详细
- 新能源整车动力性经济性仿真模型，包含NEDC WLTC CLTC、最大续航里程、匀速续航里程、百公里加速、最高车速、最大爬坡度等工况的仿真，经过多个项目实车验证测试，精确度高
- starccm和Amesim的联合仿真的目的：优势互补，starccm体现 三维维度的热，Amesim体现一维高精度的电池产热以及热管理策略的执行； 2.模型架构：starccm完整体现CAD数模，A
- matlab 魔术公式轮胎动力学仿真模型，可以获得不同轮胎纵向力和滑动率之间的关系，以及不同轮胎侧向力纵向力和侧偏角之间的关系
- 同步降压式单片DC-DC电源芯片 1.6V-6.3V宽输入电压 500K开关频率 最大6A输出电流 软启动、过温保护、过流保护、欠压保护 适合初学者入门学习 带版图 不带版图
- 1d人工势场法路径规划matlab代码 自己手写的人工势场法路径规划matlab代码，通过设定目标点和起始点，人工势场法进行路径规划，机械臂末端按照规划好的路径移动 通过修改参数可实现最佳配置
- 新能源控制器，多峰值mppt寻优仿真模型，传统扰动电导等寻优无法用在局部遮阴下，而粒子群pso算法克服了这个问题，可用于自行研究 压缩包附带使用说明及解析文档，包括传统扰动与粒子群算法模型
- 二阶系统模糊PID控制 仿真效果如图所示
- 纯电动汽车仿真、纯电动公交、纯电动客车、纯电动汽车动力性仿真、经济性仿真 模型包括电机、电池、车辆模型 有两种模型2选1： 1 完全用matlab simulink搭建的模型 2用simscap
- 双向DC DC磷酸铁锂蓄电池充放电储能matlab simulink仿真模型，采用双闭环控制，充放电电流，电压和功率均可控，电流为负则充电，电流为正则放电，可以控制电流实现充放电 （1）完整复现文献
- 217581163859991综合练习-案例源码（参考）.zip
- 含多种需求响应及电动汽车的微网 电厂日前优化调度3 关键词：需求响应 空调负荷 电动汽车 微网优化调度 电厂调度 参考文档：《计及电动汽车和需求响应的多类电力市场下电厂竞标模型》参考其电动汽车
- SAR ADC 10bit 100M采样时钟 转速率50M s ENOB 9.8bit gpdk 45nm cadence 管方学习教程电路 两百多页文档 电路包括但不限于：栅压自举开关 CDA
- 多功能关机小助手V1.3版本
- 视觉检测框架，已经写好了框架，适用于各种产品检测场景，只需更图像处理算法即可
- 用123D design建模做的古代马车
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0