112 lines
3.4 KiB
JavaScript
112 lines
3.4 KiB
JavaScript
;(function (window, mars3d) {
|
||
//创建widget类，需要继承BaseWidget
|
||
class MyWidget extends mars3d.widget.BaseWidget {
|
||
//外部资源配置
|
||
get resources() {
|
||
return ['view.css']
|
||
}
|
||
|
||
//弹窗配置
|
||
get view() {
|
||
return {
|
||
type: 'append',
|
||
url: 'view.html',
|
||
parent: 'body',
|
||
}
|
||
}
|
||
|
||
//每个窗口创建完成后调用
|
||
winCreateOK(opt, result) {
|
||
var that = this
|
||
$('#btn_streetscapeBar_close').click(function () {
|
||
that.disableBase()
|
||
})
|
||
}
|
||
//激活插件
|
||
activate() {
|
||
var point = this.config.point || { lat: 31.833789, lng: 117.183995 }
|
||
this.updateMarker(point)
|
||
|
||
var pointBd = this.getBaiduPoint(point)
|
||
|
||
var inhtml = `<div id="streetscapeView" style="position:absolute;right:0px;top:0px;border:1px solid #ccc;top: 0px;bottom: 0px;width:50%;overflow: hidden;">
|
||
<iframe id="streetscape" name="streetscape" style="width:100%;height:100%;overflow:hidden;margin:0;"
|
||
scrolling="no" frameborder="0" src="${this.path}streetscape.html?lng=${pointBd.lng}&lat=${pointBd.lat}"></iframe>
|
||
</div>`
|
||
$('body').append(inhtml)
|
||
|
||
$('#centerDiv').css({
|
||
position: '',
|
||
height: '100%',
|
||
width: '50%',
|
||
})
|
||
$('.no-print-view').hide()
|
||
|
||
//单击地图事件
|
||
this.map.on(mars3d.EventType.click, this.onMapClick, this)
|
||
$('.cesium-viewer').css('cursor', 'crosshair')
|
||
}
|
||
//释放插件
|
||
disable() {
|
||
//释放单击地图事件
|
||
this.map.off(mars3d.EventType.click, this.onMapClick, this)
|
||
$('.cesium-viewer').css('cursor', '')
|
||
|
||
if (this.graphic) {
|
||
this.map.graphicLayer.removeGraphic(this.graphic, true)
|
||
this.graphic = null
|
||
}
|
||
$('#streetscapeView').remove()
|
||
|
||
$('#centerDiv').css({
|
||
position: '',
|
||
height: '100%',
|
||
width: '100%',
|
||
})
|
||
$('.no-print-view').show()
|
||
}
|
||
onMapClick(event) {
|
||
var cartesian = event.cartesian
|
||
if (cartesian) {
|
||
var point = mars3d.LatLngPoint.fromCartesian(cartesian)
|
||
|
||
this.updateMarker(point)
|
||
|
||
//点击地图的事件,触发街景改变
|
||
var pointBd = this.getBaiduPoint(point)
|
||
var streetscapeFrame = document.getElementById('streetscape')
|
||
if (streetscapeFrame && streetscapeFrame.contentWindow.setPosition) {
|
||
streetscapeFrame.contentWindow.setPosition(pointBd) //根据经纬度坐标展示全景图
|
||
}
|
||
}
|
||
}
|
||
getBaiduPoint(point) {
|
||
let pointbd = mars3d.PointTrans.wgs2bd([point.lng, point.lat])
|
||
return { lng: pointbd[0], lat: pointbd[1] }
|
||
}
|
||
updateMarker(position) {
|
||
if (this.graphic) {
|
||
this.graphic.position = position
|
||
} else {
|
||
this.graphic = new mars3d.graphic.BillboardEntity({
|
||
position: position,
|
||
style: {
|
||
image: this.path + 'img/streetimg.png',
|
||
scale: 1,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
clampToGround: true,
|
||
},
|
||
})
|
||
this.map.graphicLayer.addGraphic(this.graphic)
|
||
}
|
||
this.map.flyToGraphic(this.graphic, { radius: 800 })
|
||
}
|
||
}
|
||
|
||
//注册到widget管理器中。
|
||
window.streetscapeWidget = mars3d.widget.bindClass(MyWidget)
|
||
|
||
//每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
|
||
})(window, mars3d)
|