Skip to content

白杨 / shrae-app

Go to a project
Commit 06a56ccc by 白杨
Options

网点界面

1 parent 7cb9d5c4
Inline Side-by-side
Showing with 318 additions and 5 deletions
main.html
...@@ -3,12 +3,109 @@ ...@@ -3,12 +3,109 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>网点信息</title> <title>网点信息</title>
<style>
html,body {
margin: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
header{
background: #3c3c3c;
/*height: 50px;*/
padding: 5px;
/*position:relative;*/
display: none;
}
.header-title{
font-size: 20px;
color: #FFFFFF;
}
.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.div-main{
width: 100%;
height: 100%;
}
.div-address{
width: 100%;
padding: 14px;
position: absolute;
top: 0%;
z-index:9999;
background: rgba(255, 255, 255, 0.8);
}
.div-bottom{
width: 100%;
position: absolute;
bottom: 0%;
z-index:9999;
}
.div-location{
position: absolute;
top:10%;
right: 2%;
z-index:9999;
}
button{
background: #27B1A4;
color: #FFFFFF;
font-size: 15px;
border: none;
}
button.update{
width: 100%;
height: 44px;
}
#map {
width: 100%;
height: 100%;
margin:0;
}
</style>
</head> </head>
<body> <body>
<label>照相机</label> <div class="div-main">
<input type="file" id='image' accept="image/*" capture='camera'> <header>
<br> <img src="">
<label>图片</label> <label class="header-title center-vertical">地图慧</label>
<input type="file" id="file" multiple> </header>
<div class="div-address">
<div>
<img src="src/image/icon3.png" >
<label id="point_name" class="center-vertical" style="font-size: 18px;">玉渊潭公园</label>
<label id="point_layer" class="center-vertical" style="font-size: 12px;display: none;">北京景点图层</label>
</div>
<label id="point_address" style="font-size: 12px;margin-left: 20px;color: #999999;">北京市海淀区XX街道XX路</label>
</div>
<div id="map"></div>
<div class="div-bottom">
<button class="update">修改信息</button>
</div>
<div class="div-location">
<div id="location_update"><img src="src/image/btn6.png"></div>
<div id="location_cancel"><img src="src/image/Icon_Collection.png"></div>
<div style="margin-top: 14px;" id="location_confirm"><img src="src/image/Icon_Track_Record.png"></div>
<div></div>
</div>
</div>
</body> </body>
<script type="text/javascript" src="dist/jquery/jquery-3.2.1.min.js"></script>
<script src="dist/supermap/iclient-8c/SuperMap.Include.js"></script>
<script src="src/js/coords.js"></script>
<script src="src/js/saasService.js"></script>
<script src="src/js/main.js"></script>
<script src="src/js/mapLevel.js"></script>
<script type="text/javascript">
$(function(){
main.init();
});
</script>
</html> </html>
\ No newline at end of file
src/js/coords.js 0 → 100644
var earthCircumferenceInMeters = 40075016.685578488;
var halfEarthCircumferenceInMeters = earthCircumferenceInMeters / 2;
var earthRadiusInMeters = 6378137.0;
var MercatorLatitudeLimit = 85.051128;
/**
* 经纬度转米坐标
*/
function latLonToMeters(point) {
//如果用户传入的是SuperMap.Geometry.Point类型的对象就执行if语句，否则就执行else语句
if(point.CLASS_NAME == "SuperMap.Geometry.Point" || point.x != null){
var mx = point.x / 180.0 * halfEarthCircumferenceInMeters;
var my = Math.log(Math.tan((90 + point.y) * Math.PI / 360.0)) / (Math.PI / 180.0);
my = my / 180.0 * halfEarthCircumferenceInMeters;
return new SuperMap.Geometry.Point(mx, my);
}else{
var mx = point.lon / 180.0 * halfEarthCircumferenceInMeters;
var my = Math.log(Math.tan((90 + point.lat) * Math.PI / 360.0)) / (Math.PI / 180.0);
my = my / 180.0 * halfEarthCircumferenceInMeters;
return new SuperMap.LonLat(mx, my);
}
}
/**
* 米坐标转经纬度
*/
function metersToLatLon(point) {
if (point.CLASS_NAME == "SuperMap.Geometry.Point" || point.x != null) {
var lon = point.x / halfEarthCircumferenceInMeters * 180.0;
var lat = point.y / halfEarthCircumferenceInMeters * 180.0;
lat = 180 / Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180.0)) - Math.PI / 2);
return new SuperMap.Geometry.Point(lon, lat);
} else {
var lon = point.lon / halfEarthCircumferenceInMeters * 180.0;
var lat = point.lat / halfEarthCircumferenceInMeters * 180.0;
lat = 180 / Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180.0)) - Math.PI / 2);
return new SuperMap.LonLat(lon, lat);
}
}
\ No newline at end of file
src/js/main.js 0 → 100644
var main = {
map:null,
layer:null,
vectorLayer:null,
dragFeature:null,
pointFeature:null,
init:function () {
//初始化地图
this.map = new SuperMap.Map("map", {
controls: [
new SuperMap.Control.Navigation()
// new SuperMap.Control.Zoom(),
// new SuperMap.Control.LayerSwitcher()
]
});
this.map.events.on({
zoomend: function (evt) {
mapLevel.setLevel(main.map.getZoom());
}
});
this.layer = new SuperMap.Layer.CloudLayer();
//实例化矢量图层 vectorLayer
this.vectorLayer = new SuperMap.Layer.Vector("vectorLayer");
//实例化 DragFeature 控件
this.dragFeature = new SuperMap.Control.DragFeature(this.vectorLayer);
//map上添加控件
this.map.addControl(this.dragFeature);
//加载图层
this.map.addLayers([this.layer,this.vectorLayer]);
this.map.setCenter(new SuperMap.LonLat(11339634.286396, 4588716.5813769), 5);
//加载地图大小缩放控件
mapLevel.loadLevelControl(main.map);
//加载按钮事件
$('#location_cancel').hide();
$('#location_confirm').hide();
$('#location_update').click(function () {
main.updateLocation("location_update");
});
$('#location_cancel').click(function () {
main.updateLocation("location_cancel");
});
$('#location_confirm').click(function () {
main.updateLocation("location_confirm");
});
//获取网点
// this.getInfo();
this.getInfoSuccess(11);
},
getInfo:function () {
var method = "/v1/point/search";
var parameter = {
custom_id:{"fieldName":"","fieldValue":""}
};
saas.saasHttpRequest(method,parameter,this.getInfoSuccess,this.getInfoError);
},
getInfoSuccess:function (data) {
var lonlat = {x:120.42995, y:36.131393};
var po = latLonToMeters(lonlat);
this.addMarker(po.x, po.y,1, "src/image/icon.png");
},
getInfoError:function (error) {
},
updateLocation:function (btn) {
if (btn == "location_update"){
$('#location_update').hide();
$('#location_cancel').show();
$('#location_confirm').show();
//激活控件
main.dragFeature.activate();
}else if (btn == "location_cancel"){
$('#location_update').show();
$('#location_cancel').hide();
$('#location_confirm').hide();
//注销控件
main.dragFeature.deactivate();
}else if (btn == "location_confirm"){
$('#location_update').show();
$('#location_cancel').hide();
$('#location_confirm').hide();
//注销控件
main.dragFeature.deactivate();
var point = this.pointFeature.geometry.getCentroid();
console.log(point.x+","+point.y);
}
},
addMarker: function (pointX,pointY,code,iconPath) {
var lonlat = {
x:pointX,
y:pointY
};
// 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,
// stroke:true,
// strokeColor:iconPath
externalGraphic:iconPath,
graphicWidth:21,
graphicHeight:30
};
this.pointFeature = new SuperMap.Feature.Vector(geometry,{pointId:code},style);
this.vectorLayer.addFeatures(this.pointFeature);
}
}
src/js/mapLevel.js 0 → 100644
var mapLevel = {
loadLevelControl:function (map) {
var level = map.getZoom();
// var html = '<div style=\'position:fixed; z-index:9999;bottom: 20px;right: 10px;\'>' +
// '<table border="1" style="width: 55px;height: 58px;text-align: center;">' +
// '<tr>' +
// '<td colspan="2" style="background: #707070;color: #FFFFFF" id="map_level">'+level+'</td>' +
// '</tr><tr>' +
// '<td style="background: #FFFFFF" id="level_minus"><img src="src/image/btn5.png"></td>' +
// '<td style="background: #FFFFFF" id="level_plus"><img src="src/image/btn4.png"></td>' +
// '</tr>' +
// '</table>' +
// '</div>';
var html = '<div style="position:fixed; z-index:9999;bottom: 5%;left: 10px;">' +
'<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>';
$('body').append(html);
$('#level_minus').click(function () {
var zoom = map.getZoom();
if (zoom>0 && zoom<18){
zoom --;
}
map.zoomTo(zoom);
// $('#map_level').html(zoom);
});
$('#level_plus').click(function () {
var zoom = map.getZoom();
if (zoom>0 && zoom<18){
zoom ++;
}
map.zoomTo(zoom);
// $('#map_level').html(zoom);
});
},
setLevel:function (level) {
$('#map_level').html(level);
}
}
src/js/saasService.js 0 → 100644
var saas = {
url: "http://saasapi.dituhui.com",
ak:"",
saasHttpRequest: function (method, parameter, successComplate, errorComplate) {
if(parameter){
parameter.ak = saas.ak;
}else{
parameter = {ak:saas.ak};
}
var config = {
url:saas.url + method,
data:parameter,
dataType:"jsonp",
type: "POST",
timeout: 90000,
success: successComplate,
error: errorComplate,
};
$.ajax(config);
}
}
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!