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
4 months ago
|
<!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>
|