Skip to content

白杨 / shrae-app

Go to a project
Commit 1cdbde90 by 白杨
Options

图片上传界面

1 parent 7978a5f0
Inline Side-by-side
Showing with 72 additions and 47 deletions
dist/bootstrap/css/index.css
......@@ -7,7 +7,7 @@
color: #555;
}
.z_photo{
padding: 18px;
padding: 10px;
border:2px dashed #E7E6E6;
/*padding: 18px;*/
}
......@@ -80,17 +80,17 @@ input:hover {
display: none;
}
.upimg-div .up-section {
width: 190px;
height: 180px;
width: 95px;
height: 90px;
}
.img-box .upimg-div .z_file {
width: 190px;
height: 180px;
width: 95px;
height: 90px;
}
.z_file .add-img {
display: block;
width: 190px;
height: 180px;
width: 95px;
height: 90px;
}
/*閬僵灞傛牱寮�*/
.mask{
......@@ -142,29 +142,27 @@ input:hover {
#title{
text-align: center;
line-height:60px;
height: 50px;
font-size: x-large;
/*line-height:60px;*/
/*height: 50px;*/
/*font-size: x-large;*/
margin-left: 0px;
width: 100%;
padding: 15px;
}
#saveimage{
display: inline;
/*display: inline;*/
float: right;
margin-top: 20px;
margin-right: 0px;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 6px;
background: #27B1A4;
color: #FFFFFF;
border: none;
}
#backimage{
display: inline;
/*display: inline;*/
float: left;
margin-top: 20px;
height: 20px;
margin-left: 15px;
}
\ No newline at end of file
main.html
......@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>网点信息</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<style>
html,body {
margin: 0;
......@@ -48,7 +49,7 @@
}
.div-location{
position: absolute;
top:10%;
top:15%;
right: 2%;
z-index:9999;
}
......@@ -85,7 +86,7 @@
</div>
<div id="map"></div>
<div class="div-bottom">
<button class="update">修改信息</button>
<button class="update" id="btn_update">修改信息</button>
</div>
<div class="div-location">
<div id="location_update"><img src="src/image/btn6.png"></div>
......
src/js/main.js
......@@ -4,7 +4,9 @@ var main = {
layer:null,
vectorLayer:null,
dragFeature:null,
pointFeature:null,
drawPoint:null,
currentPoint:null,
pastPoint:null,
init:function () {
//初始化地图
this.map = new SuperMap.Map("map", {
......@@ -23,12 +25,23 @@ var main = {
//实例化矢量图层 vectorLayer
this.vectorLayer = new SuperMap.Layer.Vector("vectorLayer");
//实例化 DragFeature 控件
this.dragFeature = new SuperMap.Control.DragFeature(this.vectorLayer);
// this.dragFeature = new SuperMap.Control.DragFeature(this.vectorLayer);
//实例化 DrawFeature 控件
this.drawPoint = new SuperMap.Control.DrawFeature(this.vectorLayer, SuperMap.Handler.Point, {multi: true});
//监听 featureadded 事件，当添加要素时会触发此事件
this.drawPoint.events.on({"featureadded": this.drawCompleted});
//map上添加控件
this.map.addControl(this.dragFeature);
// this.map.addControl(this.dragFeature);
this.map.addControl(this.drawPoint);
//加载图层
this.map.addLayers([this.layer,this.vectorLayer]);
this.map.setCenter(new SuperMap.LonLat(11339634.286396, 4588716.5813769), 5);
//画点样式
this.vectorLayer.style = {
externalGraphic:"src/image/icon.png",
graphicWidth:21,
graphicHeight:30
};
// this.map.setCenter(new SuperMap.LonLat(11339634.286396, 4588716.5813769), 5);
//加载地图大小缩放控件
mapLevel.loadLevelControl(main.map);
//加载按钮事件
......@@ -43,6 +56,9 @@ var main = {
$('#location_confirm').click(function () {
main.updateLocation("location_confirm");
});
$('#btn_update').click(function () {
main.getUpdate();
});
//获取网点
// this.getInfo();
this.getInfoSuccess(11);
......@@ -58,6 +74,7 @@ var main = {
var lonlat = {x:120.42995, y:36.131393};
var po = latLonToMeters(lonlat);
this.addMarker(po.x, po.y,1, "src/image/icon.png");
this.map.setCenter(new SuperMap.LonLat(po.x, po.y), 5);
},
getInfoError:function (error) {
......@@ -68,19 +85,22 @@ var main = {
$('#location_cancel').show();
$('#location_confirm').show();
//激活控件
main.dragFeature.activate();
// main.dragFeature.activate();
main.drawPoint.activate();
}else if (btn == "location_cancel"){
$('#location_update').show();
$('#location_cancel').hide();
$('#location_confirm').hide();
//注销控件
main.dragFeature.deactivate();
// main.dragFeature.deactivate();
main.drawPoint.deactivate();
}else if (btn == "location_confirm"){
$('#location_update').show();
$('#location_cancel').hide();
$('#location_confirm').hide();
//注销控件
main.dragFeature.deactivate();
// main.dragFeature.deactivate();
main.drawPoint.deactivate();
var point = this.pointFeature.geometry.getCentroid();
console.log(point.x+","+point.y);
}
......@@ -92,7 +112,6 @@ var main = {
};
// var lonlat = latLonToMeters(pointX,pointY);
var geometry = new SuperMap.Geometry.Point(lonlat.x,lonlat.y);
console.log(geometry.x+","+geometry.y);
var style = {
// fillColor:iconPath,
// pointRadius:3,
......@@ -102,8 +121,19 @@ var main = {
graphicWidth:21,
graphicHeight:30
};
this.pointFeature = new SuperMap.Feature.Vector(geometry,{pointId:code},style);
this.vectorLayer.addFeatures(this.pointFeature);
this.currentPoint = new SuperMap.Feature.Vector(geometry,{pointId:code},style);
this.vectorLayer.addFeatures(this.currentPoint);
},
getUpdate:function () {
//跳转修改信息界面
window.location.href="";
},
drawCompleted:function (eventArgs) {
main.pastPoint = main.currentPoint;
main.currentPoint = eventArgs.feature;
main.vectorLayer.removeAllFeatures();
main.vectorLayer.addFeatures(main.currentPoint);
var geometry = eventArgs.feature.geometry;
}
}
src/js/mapLevel.js
......@@ -13,7 +13,7 @@ var mapLevel = {
// '</table>' +
// '</div>';
var html = '<div style="position:fixed; z-index:9999;bottom: 5%;left: 10px;">' +
var html = '<div style="position:absolute; z-index:9999;bottom: 10%;left: 2%;">' +
'<div id="level_plus"><img src="src/image/btn4.png"></div>' +
'<div style="margin-top: 10px;" id="level_minus"><img src="src/image/btn5.png"></div>' +
'</div>';
......
uploadImage.html
......@@ -3,8 +3,9 @@
<head>
<meta charset="utf-8" />
<title>照片</title>
<link href="dist/bootstrap/css/common.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<link href="dist/bootstrap/css/index.css" type="text/css" rel="stylesheet"/>
<link href="dist/bootstrap/css/common.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">
///*屏蔽鼠标右键的默认事件*/
function stops(){
......@@ -15,22 +16,18 @@
</head>
<body>
<div class="img-box full">
<section class=" img-section">
<div>
<div id="title">
<img src="src/image/btn_back.png" id="backimage" onclick="backReturn()"/>图片
<button id="saveimage" onclick="saveReturn()">保存</button>
</div>
</div>
<div class="">
<div id="title">
<img src="src/image/btn_back.png" id="backimage" onclick="backReturn()"/>图片
<button id="saveimage" onclick="saveReturn()">保存</button>
</div>
<div class="z_photo upimg-div clear" >
<section class="z_file fl">
<img src="src/image/a11.png" class="add-img">
<input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
</section>
</div>
</section>
<div class="z_photo upimg-div clear" >
<section class="z_file fl">
<img src="src/image/a11.png" class="add-img">
<input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
</section>
</div>
</div>
<aside class="mask works-mask">
<div class="mask-content">
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!