You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
13 KiB
327 lines
13 KiB
<!DOCTYPE html> |
|
<html lang="zh_ch"> |
|
|
|
<!-- Mirrored from 10.248.12.22/mapServer/resources/superMap-2D/project/mntStreet/ppv/h6.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 14 Nov 2023 15:17:44 GMT --> |
|
<!-- Added by HTTrack --> |
|
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack --> |
|
|
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
|
|
<title>街景地图</title> |
|
<script> |
|
var getWebRootPath = function () { |
|
//获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp |
|
var curWwwPath = window.document.location.href; |
|
//获取主机地址之后的目录，如： uimcardprj/share/meun.jsp |
|
var pathName = window.document.location.pathname; |
|
var pos = curWwwPath.indexOf(pathName); |
|
//获取主机地址，如： http://localhost:8083 |
|
var localhostPaht = curWwwPath.substring(0, pos); |
|
//获取带"/"的项目名，如：/uimcardprj |
|
var projectName = pathName.substring(0, pathName.substr(1).indexOf('http://10.248.12.22/') + 1); |
|
return (localhostPaht + projectName); |
|
}; |
|
var path = getWebRootPath(); |
|
var dojoConfig = { |
|
parseOnLoad: true, |
|
cacheBust: true, |
|
packages: [ |
|
{ |
|
"name": "myModules", |
|
"location": path + "/resources/superMap-2D/myModules/js" |
|
}, |
|
{ |
|
"name": "project", |
|
"location": path + "/resources/superMap-2D/project/streetMap" |
|
}, |
|
{ |
|
"name": "jquery", |
|
"location": path + "/resources/jQuery" |
|
}, |
|
{ |
|
"name": "bootstrap", |
|
"location": path + "/resources/bootstrap" |
|
}, |
|
{ |
|
"name": "sockjs", |
|
"location": path + "/resources/sockjs" |
|
}, |
|
{ |
|
"name": "stomp", |
|
"location": path + "/resources/stomp" |
|
}, |
|
{ |
|
"name": "echarts", |
|
"location": path + "/resources/echarts" |
|
}, |
|
{ |
|
"name": "toastr", |
|
"location": path + "/resources/toastr" |
|
}, |
|
{ |
|
"name": "StreetMap", |
|
"location": path + "/resources/StreetMap" |
|
}, |
|
{ |
|
"name": "superMap", |
|
"location": path + "/resources/superMap-2D/superMap" |
|
}, |
|
{ |
|
"name": "util", |
|
"location": path + "/resources/util" |
|
} |
|
] |
|
}; |
|
</script> |
|
<style type="text/css"> |
|
body { |
|
margin: 0; |
|
overflow: hidden; |
|
background: #fff; |
|
font-family: "Microsoft YaHei", sans-serif; |
|
font-size: 14px; |
|
} |
|
</style> |
|
<script type="text/javascript" src="../../../../StreetMap/js/leaflet-1.1/leaflet.js"></script> |
|
<script type="text/javascript" src="../../../../StreetMap/js/leaflet-1.1/leaflet.ChineseTmsProviders.js"></script> |
|
<script type="text/javascript" src="../../../../StreetMap/js/leaflet-1.1/leaflet.orientedmarker.js"></script> |
|
<script type="text/javascript" src="../../../../jQuery/jquery.js"></script> |
|
|
|
|
|
<script type="text/javascript" src="../../../../StreetMap/js/proj4js-2.3.16/dist/proj4.js"></script> |
|
<script type="text/javascript" src="../../../../StreetMap/js/three.js-master-84/build/three.min.js"></script> |
|
<script type="text/javascript" src="../../../../StreetMap/js/ThreeGeoJSON-master/lib/threeGeoJSON.js"></script> |
|
|
|
|
|
<script type="text/javascript" src="../../../../StreetMap/js/jquery-1.12.3.min.js"></script> |
|
<script type="text/javascript" src="../../../../StreetMap/js/jquery.mousewheel.js"></script> |
|
<script type="text/javascript" src="../../../../StreetMap/js/jquery.resize.js"></script> |
|
<script type="text/javascript" src="../../../../StreetMap/js/jquery.postjson.js"></script> |
|
<script type="text/javascript" src="../../../../StreetMap/js/TextSprite.js"></script> |
|
<script type="text/javascript" src="../../../../StreetMap/js/RotControl.js"></script> |
|
|
|
|
|
|
|
<script type="text/javascript" src="../../../../StreetMap/ppv/js/PPV.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="../../../superMap/libs/SuperMap.Include.js"></script> |
|
<script type="text/javascript" src="../../../../dojo/dojo.js"></script> |
|
<link rel="stylesheet" href="../../../../css/layerAssistantSteetMap.css"> |
|
<link rel="stylesheet" href="../../../../css/panoram.css"> |
|
<!--街景界面格式--> |
|
<link rel="stylesheet" href="../../../../css/ppvContainer.css"> |
|
<!--街景空间加载--> |
|
<link rel="stylesheet" href="../../../../StreetMap/js/leaflet-1.1/leaflet.css" /> |
|
<!--街景空间加载--> |
|
<link rel="stylesheet" type="text/css" href="../../../../toastr/toastr.min.css" /> |
|
<link rel="stylesheet" type="text/css" href="../../../../bootstrap/css/bootstrap.min.css" /> |
|
<link rel="stylesheet" type="text/css" href="../../../../bootstrap/css/bootstrap-theme.min.css" /> |
|
<link rel="stylesheet" type="text/css" |
|
href="../../../../bootstrap/datetimepicker/css/bootstrap-datetimepicker.min.css"> |
|
<link rel="stylesheet" type="text/css" href="../../../../css/panel/index.css" /> |
|
</head> |
|
|
|
<body> |
|
<!--切换全景时显示界面--> |
|
<div id="pano-container" style="height:100%;width:100%"> |
|
<div id="ppv_container"> |
|
<div id="ppv"></div> |
|
<div id="history_container"> |
|
<div class="ppv_toolbar"> |
|
<!--<span class="ppv_button ppv_button_special" id="play"--> |
|
<!--title="播放" onmousedown="event.stopPropagation(); ppv.play()"></span>--> |
|
<span class="ppv_button ppv_button_special" id="play" title="播放"></span> |
|
<!--<span class="ppv_button" id="stop" src="../../../../images/assets/panoram/pause.png" title="暂停"--> |
|
<!--onmousedown="event.stopPropagation(); ppv.stop()">--> |
|
<span class="ppv_splite"></span> |
|
<span class="ppv_button" id="measurePoint" title="查询坐标" |
|
onmousedown="event.stopPropagation(); ppv.setTool(Tool.measurePoint)"></span> |
|
<span class="ppv_button" id="measureLength" title="测量长度" |
|
onmousedown="event.stopPropagation(); ppv.setTool(Tool.measureLength)"></span> |
|
<span class="ppv_button" id="measureArea" title="测量面积" |
|
onmousedown="event.stopPropagation(); ppv.setTool(Tool.measureArea)"></span> |
|
<span class="ppv_button" id="measureZ" title="测量垂距" |
|
onmousedown="event.stopPropagation(); ppv.setTool(Tool.measureZ)"></span> |
|
<span class="ppv_button" id="measureAngle" title="测量角度" |
|
onmousedown="event.stopPropagation(); ppv.setTool(Tool.measureAngle)"></span> |
|
<span class="ppv_button ppv_button_special" id="measureSlope" title="测量坡度" |
|
onmousedown="event.stopPropagation(); ppv.setTool(Tool.measureSlope)"></span> |
|
<span class="ppv_splite"></span> |
|
<span class="ppv_button" id="createPoint" title="创建点" |
|
onmousedown="event.stopPropagation(); ppv.setTool(Tool.createPoint)"></span> |
|
<span class="ppv_button" id="createPolyline" title="创建线" |
|
onmousedown="event.stopPropagation(); ppv.setTool(Tool.createPolyline)"></span> |
|
<span class="ppv_button" id="createPolygon" title="创建面" |
|
onmousedown="event.stopPropagation(); ppv.setTool(Tool.createPolygon)"></span> |
|
<span class="ppv_button" id="pick" title="选择对象" |
|
onmousedown="event.stopPropagation(); ppv.setTool(Tool.pick)"></span> |
|
<span class="ppv_button ppv_button_special" id="remove" title="删除选中对象" |
|
onmousedown="event.stopPropagation(); ppv.setTool(Tool.remove); if(selectFeature!=null) ppv.removeFeature(selectFeature);"> |
|
</span> |
|
<span class="ppv_splite"> |
|
</span> |
|
<span class="ppv_button" id="time" src="../../../../images/assets/panoram/time.png" title="时间轴" onmouseup=""> |
|
</span> |
|
<span class="ppv_button ppv_button_special" id="chooseRoad" |
|
src="../../../../images/assets/panoram/changeRoad.png" title="选择路线" onmouseup=""> |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<script type="text/javascript" src="../../../../StreetMap/js/layerConfig.js"></script> |
|
|
|
<script> |
|
/*定义变量*/ |
|
|
|
var userKey = mapApp.layerConfig.ppvServerUserKey; |
|
/*ppvison服务地址*/ |
|
var ppv_server = mapApp.layerConfig.streetMapUrl; |
|
/*访问类型*/ |
|
var device_type = 3;// 3:imaj, 4:streetView, 0:ppv, -1:php |
|
/*街景初始化位置*/ |
|
var init_pos = [mapApp.layerConfig.currentPosition.lon, mapApp.layerConfig.currentPosition.lat]; |
|
/*构造ppv对象，参数是容器div的id*/ |
|
var ppv = new PPV("ppv"); |
|
/*获取二维superMap地图*/ |
|
var map = mapApp.map; |
|
/*ppv定义为全局变量*/ |
|
mapApp.ppv = ppv; |
|
|
|
/*ppv空间定义服务地址*/ |
|
ppv.setServer(ppv_server); |
|
|
|
/*初始化位置*/ |
|
if (init_pos != null) { |
|
} |
|
|
|
let urlParams = location.search.replace("?", ""); //获取url中"?"符后的字串 |
|
console.log(urlParams) |
|
ppv.locate(device_type, urlParams.split(",")[0], urlParams.split(",")[1], userKey);//实景定位 |
|
|
|
|
|
console.log("街景地位位置:" + urlParams.split(",")[0] + ";" + urlParams.split(",")[1]); |
|
ppv.needsUpdate = true;//更新实景影像 |
|
|
|
/*街景预加载，设置相关参数*/ |
|
ppv.setPref({ |
|
bgcolor: 'rgb(255,128,255)', |
|
fullView: FullMode.stretch,//照片是否填满div，不管是否会被裁剪 |
|
// fullView:FullMode.trans, |
|
enableArrow: true, |
|
enableHistory: true, |
|
scope: 100,//可视范围 //zlive:20200512 |
|
thumb: 'Middle',//缩略图尺寸，可选'Middle'，缺省'Middle' |
|
arrows: { //方向箭头位置 |
|
forward: 5,//向前，米 |
|
below: 1.8,//降低，米 |
|
lean: 15//前倾，度 |
|
}, |
|
magnifier: { |
|
size: 256, |
|
zoom: 5.0, |
|
fix: false//是否启动放大镜后，固定位置不变。另一个方式是，放大镜随鼠标移动 |
|
}, |
|
key: { |
|
del: 46, //删除 delete |
|
play: 32, //播放 space |
|
fforward: 33, //快进 page up |
|
fbackward: 34, //快退 page down |
|
forward: 38, //前进 up |
|
backward: 40, //后退 down |
|
fullscreen: 120 //全屏 f9 |
|
}, |
|
label: { |
|
fontface: '微软雅黑', //字体 |
|
fontsize: 20, //字高 |
|
textColor: '#000000', //文字颜色 |
|
borderThickness: 1, //边框线宽，如果取0值，将禁用边框 |
|
borderFillet: 0, //边框圆角 |
|
borderColor: 'rgba(0,0,0,0.8)', //边框颜色 |
|
backgroundColor: 'rgba(255,255,255,0.8)' //背景颜色 |
|
} |
|
}); |
|
|
|
/*返回按钮,返回主窗口*/ |
|
$("#play").on("click", function () { |
|
var flag = $("#play").hasClass("active"); |
|
if (flag) { |
|
$("#play").removeClass("active"); |
|
ppv.stop(); |
|
} else { |
|
$("#play").addClass("active"); |
|
ppv.play(); |
|
} |
|
}); |
|
/*二维地图点击实现三维联动*/ |
|
map.events.on({ |
|
"click": function (e) { |
|
var pix = new SuperMap.Pixel(e.xy.x, e.xy.y); |
|
var pointValue = map.getLonLatFromPixel(pix); |
|
try { |
|
ppv.locate(device_type, pointValue.lon, pointValue.lat, userKey);//实景定位 |
|
console.log(device_type + "," + pointValue.lon + "," + pointValue.lat + "," + userKey); |
|
} |
|
catch (er) { |
|
console.log("该位置无街景影像！"); |
|
} |
|
} |
|
}); |
|
/*判断街景是否加载成功*/ |
|
ppv.onLocate = function (event) { |
|
console.log("map load listen: " + event.state); |
|
} |
|
/*全景运行联动二维地图*/ |
|
ppv.onPosition = function (event) { |
|
var lon = event.lon; |
|
var lat = event.lat; |
|
//定位地图 |
|
window.parent.mapApp.createPointMarker(lon, lat); |
|
}; |
|
/*要素选择*/ |
|
var selectFeature = null; |
|
ppv.onFeatureSelect = function (event) { |
|
var assetID = event.fid; |
|
var assetStyle = event.feature.userData.properties.style; |
|
selectFeature = event.feature; |
|
window.parent.mapApp.searchProperty(assetID, assetStyle); |
|
} |
|
/*添加要素到街景*/ |
|
window.parent.mapApp.addPPVPoints(function (data) { |
|
//return; |
|
if (data) { |
|
var layerDef = data.layerDef; |
|
var fe = data.fe; |
|
if (fe.geometry.type.indexOf("Point") >= 0) { |
|
//zlive:20200512 |
|
layerDef.size = 5; |
|
layerDef.name = "points"; |
|
fe.toGround = 5; |
|
|
|
var layerPoint = ppv.addLayer(layerDef); |
|
ppv.addFeature(layerPoint, fe); |
|
} else if (fe.geometry.type.indexOf("Line") >= 0) { |
|
layerDef.name = "lines"; |
|
var layerLine = ppv.addLayer(layerDef); |
|
ppv.addFeature(layerLine, fe); |
|
} |
|
else if (fe.geometry.type.indexOf("Polygon") >= 0) { |
|
layerDef.name = "polygons"; |
|
var layerPoly = ppv.addLayer(layerDef); |
|
ppv.addFeature(layerPoly, fe); |
|
} |
|
} |
|
}); |
|
|
|
</script> |
|
</body> |
|
|
|
<!-- Mirrored from 10.248.12.22/mapServer/resources/superMap-2D/project/mntStreet/ppv/h6.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 14 Nov 2023 15:18:21 GMT --> |
|
|
|
</html> |