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 @@ ...@@ -7,7 +7,7 @@
color: #555; color: #555;
} }
.z_photo{ .z_photo{
padding: 18px; padding: 10px;
border:2px dashed #E7E6E6; border:2px dashed #E7E6E6;
/*padding: 18px;*/ /*padding: 18px;*/
} }
...@@ -80,17 +80,17 @@ input:hover { ...@@ -80,17 +80,17 @@ input:hover {
display: none; display: none;
} }
.upimg-div .up-section { .upimg-div .up-section {
width: 190px; width: 95px;
height: 180px; height: 90px;
} }
.img-box .upimg-div .z_file { .img-box .upimg-div .z_file {
width: 190px; width: 95px;
height: 180px; height: 90px;
} }
.z_file .add-img { .z_file .add-img {
display: block; display: block;
width: 190px; width: 95px;
height: 180px; height: 90px;
} }
/*閬僵灞傛牱寮�*/ /*閬僵灞傛牱寮�*/
.mask{ .mask{
...@@ -142,29 +142,27 @@ input:hover { ...@@ -142,29 +142,27 @@ input:hover {
#title{ #title{
text-align: center; text-align: center;
line-height:60px; /*line-height:60px;*/
height: 50px; /*height: 50px;*/
font-size: x-large; /*font-size: x-large;*/
margin-left: 0px; margin-left: 0px;
width: 100%;
padding: 15px;
} }
#saveimage{ #saveimage{
display: inline; /*display: inline;*/
float: right; float: right;
margin-top: 20px;
margin-right: 0px;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
padding-top: 5px; padding-top: 5px;
padding-bottom: 6px; padding-bottom: 6px;
background: #27B1A4; background: #27B1A4;
color: #FFFFFF; color: #FFFFFF;
border: none;
} }
#backimage{ #backimage{
display: inline; /*display: inline;*/
float: left; float: left;
margin-top: 20px;
height: 20px;
margin-left: 15px;
} }
\ No newline at end of file
main.html
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>网点信息</title> <title>网点信息</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<style> <style>
html,body { html,body {
margin: 0; margin: 0;
...@@ -48,7 +49,7 @@ ...@@ -48,7 +49,7 @@
} }
.div-location{ .div-location{
position: absolute; position: absolute;
top:10%; top:15%;
right: 2%; right: 2%;
z-index:9999; z-index:9999;
} }
...@@ -85,7 +86,7 @@ ...@@ -85,7 +86,7 @@
</div> </div>
<div id="map"></div> <div id="map"></div>
<div class="div-bottom"> <div class="div-bottom">
<button class="update">修改信息</button> <button class="update" id="btn_update">修改信息</button>
</div> </div>
<div class="div-location"> <div class="div-location">
<div id="location_update"><img src="src/image/btn6.png"></div> <div id="location_update"><img src="src/image/btn6.png"></div>
......
src/js/main.js
...@@ -4,7 +4,9 @@ var main = { ...@@ -4,7 +4,9 @@ var main = {
layer:null, layer:null,
vectorLayer:null, vectorLayer:null,
dragFeature:null, dragFeature:null,
pointFeature:null, drawPoint:null,
currentPoint:null,
pastPoint:null,
init:function () { init:function () {
//初始化地图 //初始化地图
this.map = new SuperMap.Map("map", { this.map = new SuperMap.Map("map", {
...@@ -23,12 +25,23 @@ var main = { ...@@ -23,12 +25,23 @@ var main = {
//实例化矢量图层 vectorLayer //实例化矢量图层 vectorLayer
this.vectorLayer = new SuperMap.Layer.Vector("vectorLayer"); this.vectorLayer = new SuperMap.Layer.Vector("vectorLayer");
//实例化 DragFeature 控件 //实例化 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上添加控件 //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.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); mapLevel.loadLevelControl(main.map);
//加载按钮事件 //加载按钮事件
...@@ -43,6 +56,9 @@ var main = { ...@@ -43,6 +56,9 @@ var main = {
$('#location_confirm').click(function () { $('#location_confirm').click(function () {
main.updateLocation("location_confirm"); main.updateLocation("location_confirm");
}); });
$('#btn_update').click(function () {
main.getUpdate();
});
//获取网点 //获取网点
// this.getInfo(); // this.getInfo();
this.getInfoSuccess(11); this.getInfoSuccess(11);
...@@ -58,6 +74,7 @@ var main = { ...@@ -58,6 +74,7 @@ var main = {
var lonlat = {x:120.42995, y:36.131393}; var lonlat = {x:120.42995, y:36.131393};
var po = latLonToMeters(lonlat); var po = latLonToMeters(lonlat);
this.addMarker(po.x, po.y,1, "src/image/icon.png"); 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) { getInfoError:function (error) {
...@@ -68,19 +85,22 @@ var main = { ...@@ -68,19 +85,22 @@ var main = {
$('#location_cancel').show(); $('#location_cancel').show();
$('#location_confirm').show(); $('#location_confirm').show();
//激活控件 //激活控件
main.dragFeature.activate(); // main.dragFeature.activate();
main.drawPoint.activate();
}else if (btn == "location_cancel"){ }else if (btn == "location_cancel"){
$('#location_update').show(); $('#location_update').show();
$('#location_cancel').hide(); $('#location_cancel').hide();
$('#location_confirm').hide(); $('#location_confirm').hide();
//注销控件 //注销控件
main.dragFeature.deactivate(); // main.dragFeature.deactivate();
main.drawPoint.deactivate();
}else if (btn == "location_confirm"){ }else if (btn == "location_confirm"){
$('#location_update').show(); $('#location_update').show();
$('#location_cancel').hide(); $('#location_cancel').hide();
$('#location_confirm').hide(); $('#location_confirm').hide();
//注销控件 //注销控件
main.dragFeature.deactivate(); // main.dragFeature.deactivate();
main.drawPoint.deactivate();
var point = this.pointFeature.geometry.getCentroid(); var point = this.pointFeature.geometry.getCentroid();
console.log(point.x+","+point.y); console.log(point.x+","+point.y);
} }
...@@ -92,7 +112,6 @@ var main = { ...@@ -92,7 +112,6 @@ var main = {
}; };
// var lonlat = latLonToMeters(pointX,pointY); // var lonlat = latLonToMeters(pointX,pointY);
var geometry = new SuperMap.Geometry.Point(lonlat.x,lonlat.y); var geometry = new SuperMap.Geometry.Point(lonlat.x,lonlat.y);
console.log(geometry.x+","+geometry.y);
var style = { var style = {
// fillColor:iconPath, // fillColor:iconPath,
// pointRadius:3, // pointRadius:3,
...@@ -102,8 +121,19 @@ var main = { ...@@ -102,8 +121,19 @@ var main = {
graphicWidth:21, graphicWidth:21,
graphicHeight:30 graphicHeight:30
}; };
this.pointFeature = new SuperMap.Feature.Vector(geometry,{pointId:code},style); this.currentPoint = new SuperMap.Feature.Vector(geometry,{pointId:code},style);
this.vectorLayer.addFeatures(this.pointFeature); 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 = { ...@@ -13,7 +13,7 @@ var mapLevel = {
// '</table>' + // '</table>' +
// '</div>'; // '</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 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 style="margin-top: 10px;" id="level_minus"><img src="src/image/btn5.png"></div>' +
'</div>'; '</div>';
......
uploadImage.html
...@@ -3,8 +3,9 @@ ...@@ -3,8 +3,9 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>照片</title> <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/index.css" type="text/css" rel="stylesheet"/>
<link href="dist/bootstrap/css/common.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript"> <script type="text/javascript">
///*屏蔽鼠标右键的默认事件*/ ///*屏蔽鼠标右键的默认事件*/
function stops(){ function stops(){
...@@ -15,22 +16,18 @@ ...@@ -15,22 +16,18 @@
</head> </head>
<body> <body>
<div class="img-box full"> <div class="">
<section class=" img-section"> <div id="title">
<div> <img src="src/image/btn_back.png" id="backimage" onclick="backReturn()"/>图片
<div id="title"> <button id="saveimage" onclick="saveReturn()">保存</button>
<img src="src/image/btn_back.png" id="backimage" onclick="backReturn()"/>图片 </div>
<button id="saveimage" onclick="saveReturn()">保存</button>
</div>
</div>
<div class="z_photo upimg-div clear" > <div class="z_photo upimg-div clear" >
<section class="z_file fl"> <section class="z_file fl">
<img src="src/image/a11.png" class="add-img"> <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 /> <input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
</section> </section>
</div> </div>
</section>
</div> </div>
<aside class="mask works-mask"> <aside class="mask works-mask">
<div class="mask-content"> <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!