三维场景 WGS84 和街景（百度街景，腾讯街景，google街景，orbitgt街景）联动

最新推荐文章于 2023-02-09 17:44:00 发布

GiserYUxiaoyu

最新推荐文章于 2023-02-09 17:44:00 发布

阅读量1.7k

点赞数

分类专栏：工作学习记录文章标签：街景地图 js

本文链接：https://blog.csdn.net/u012083333/article/details/105433691

版权

工作学习记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

联动这个概念怎么理解呢，就是你动，不需要手动操作，我也跟着动。

单向联动就是你动，我跟着动，或者是我动，你跟着我动。

双向联动，就是你动，我跟着动，我动，你也跟着我动。万一有一个天雷撞地虎的瞬间，你跟着我动的同时，我也要跟着你动，那怎么办呢？那就随缘吧，总会有一个打胜了的。

联动的核心在于谁主动，谁被动，其次还有动的频率（咋越来越像小黄文了。。。），还有位置点。

换成人话就是

1.主动对象的坐标点的位置position/location，方向角度 heading pitch roll，

2.以及刷新频率，采用自带的刷新机制，还是用定时器不断的去获取这几个参数，

3.最后传递给被动的对象，调整被动对象的位置和角度，从而实现联动的。

既然涉及位置和角度，如果两个对象的思维不在同一个位置频道，你说着你在东边，他理解成西边，俩人的世界在外人看起来就不是一个东西了。要么把俩对象所处的世界统一了，你说的对应我这边的相同的点，要么就是俩人各处一个世界，通过一个中间的东西给转换了，从而达成一致。

这里涉及的就是坐标的概念。三维场景，此处以cesium等为例，坐标系为WGS84，而街景不同坐标不同，GoogleStreetView 采用的是WGS84，同在一片天地，彼此默契很多。唯一不方便的就是网络受限，并且默认的还需要申请账号试用一年或者付费，否则能用的就是像被X光射线打了的街景，极度影响用户体验。

街景主动，三维场景跟着动的示例如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View Controls</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
   var panorama;
function initPano() {
// Note: constructed panorama objects have visible: true
// set by default.
panorama = new google.maps.StreetViewPanorama(
document.getElementById('map'), {
position: {lat: 42.345573, lng: -71.098326},
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
linksControl: false,
panControl: false,
enableCloseButton: false
});
}


   var t2 = window.setInterval(function() {
       //console.log(‘每隔1秒钟执行一次’)
           getGoogleStreet();
       },2000)

       function getGoogleStreet(){
               panorama.position.lat() +","+ panorama.position.lng() +","+ panorama.pov.heading + "," + panorama.pov.pitch +"," + panorama.pov.roll;
       }

function endTime(){
           window.clearInterval(t2) // 去除定时器
       }

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=youkey&callback=initPano"> 
</script>
</body>
</html>

//这是测试过程中的，供参考接口使用方法，并不是拿过去就能联动用起来的。并且还要求flash插件，非常exin

//百度的

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}

#panorama {
width: 100%;
height: 500px;
}

#result {
width: 100%;
font-size: 12px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=youkey"></script>
<title>获取指定的全景图</title>
</head>
<body>
<div id="panorama"></div>
<div id="result">
<button id="setPanoramaByLocation">按经纬度展示全景</button><button id="setPanoramaById">按全景Id展示全景</button>
</div>
</body>
</html>

//腾讯的

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

</head>
<body>
<div style="position:absolute;left:0px;width:50%;height:100%">

<object data="https://map.baidu.com/@12711666.18,2532045.16,21z,87t,156.56h#panoid=09024200121708021351365869B&panotype=street&heading=57.53&pitch=-6.18&l=13&tn=B_NORMAL_MAP&sc=0&newmap=1&shareurl=1&pid=09024200121708021351365869B" id="baidu" style="width:100%;height:100%">

</object>
</div>

var geo = new qq.maps.Geocoder()
console.log(geo)
geo.getLocation('中国,广州,沙太路268号')//地址
geo.setComplete(function(res){
console.log(res,res.detail.location)//得到经纬度
var map = new qq.maps.Map(document.getElementById('test'),{
center: res.detail.location,//将经纬度加到center属性上
zoom: 16,//缩放
draggable: true,//是否可拖拽
scrollwheel: true,//是否可滚动缩放
disableDoubleClickZoom: false
})
var marker = new qq.maps.Marker({
position: res.detail.location,//标记的经纬度
animation: qq.maps.MarkerAnimation.BOUNCE,//标记的动画
map: map//标记的地图
})

var citylocation = new qq.maps.CityService({
//设置地图
map : map,

complete : function(results){
console.log(9999,results)
}
});
})

</script>

//百度和腾讯的简单测试过，我猜它们应该是有一个库，位置点和街景的id对应，一般请求采用的是id去请求，而经纬度请求，即使试图转成wgs84的，误差也有点大。

期间还遇到一个问题，通过浏览器访问公开街景的网址可以获取到我想要的位置点和方向的参数，但是我以iframe内嵌到自己的网页里，就会出现跨域限制。nginx如果反向代理，理论上可以解决这个问题。

而google的直接可以用经纬度赋值，做双向联动或者单向联动相对比较方便。

至于orbitgt街景，这是个比利时的移动数据解决平台，巴拉巴拉的，没什么中文资料，客户还要求做融合。没办法死扣人家官网的api接口，也是因为做这个的联动时，才总结出了街景联动的关键步骤。

当前街景的position，当前街景的heading pitch roll，以及刷新事件。对于地图来说，一般都会有类似的监听事件，但是在没有找到的情况下，用定时器也可以实现需求。

orbitgt基于多种原因，代码就不贴出来了。可以参考官网

https://cdn.3dmapping.cloud/20.2.0/reference_docs/index.html

絮絮叨叨再多说一句，从两眼一抹黑，只有一个官网地址，到摸索实现出自己所需的功能，我现在觉得地图二次开发这类的就是小case,挡不住我了，我骄傲了，我膨胀了。让更大的鸭梨来虐我吧。

知识付费见得多了，仍然怀念网络开源的时代，资料资源丰富，傻瓜式小白教学。github对于技术是主流，我还是喜欢搜素引擎解决问题。

GiserYUxiaoyu

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
三维场景 WGS84 和街景（百度街景，腾讯街景，google街景，orbitgt街景）联动

联动这个概念怎么理解呢，就是你动，不需要手动操作，我也跟着动。单向联动就是你动，我跟着动，或者是我动，你跟着我动。双向联动，就是你动，我跟着动，我动，你也跟着我动。万一有一个天雷撞地虎的瞬间，你跟着我动的同时，我也要跟着你动，那怎么办呢？那就随缘吧，总会有一个打胜了的。联动的核心在于谁主动，谁被动，其次还有动的频率（咋越来越像小黄文了。。。），还有位置点。换成人话就是1....
复制链接

扫一扫