112 lines
3.5 KiB
JavaScript
112 lines
3.5 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);
|