"use script"; //开发环境建议开启严格模式
|
(function (window, mars3d) {
|
//创建widget类，需要继承BaseWidget
|
class MyWidget extends mars3d.widget.BaseWidget {
|
//弹窗配置
|
get view() {
|
return {
|
type: "window",
|
url: "view.html",
|
windowOptions: {
|
width: 350,
|
position: {
|
top: 45,
|
bottom: 30,
|
right: 5,
|
},
|
},
|
};
|
}
|
|
//初始化[仅执行1次]
|
create() {
|
this.gaoDePoi = new mars3d.query.GaodePOI({
|
// key: ['ae29a37307840c7ae4a785ac905927e0'],
|
});
|
|
//创建矢量数据图层
|
this.poiLayer = new mars3d.layer.GraphicLayer();
|
this.poiLayer.bindPopup(function (event) {
|
var item = event.graphic.attr;
|
|
var inHtml = '<div class="mars-popup-titile">' + item.name + '</div><div class="mars-popup-content" >';
|
var type = $.trim(item.type);
|
if (type != "") {
|
inHtml += "<div><label>类别</label>" + type + "</div>";
|
}
|
var xzqh = $.trim(item.xzqh);
|
if (xzqh != "") {
|
inHtml += "<div><label>区域</label>" + xzqh + "</div>";
|
}
|
var tel = $.trim(item.tel);
|
if (tel != "") {
|
inHtml += "<div><label>电话</label>" + tel + "</div>";
|
}
|
var address = $.trim(item.address);
|
if (address != "") {
|
inHtml += "<div><label>地址</label>" + address + "</div>";
|
}
|
inHtml += "</div>";
|
return inHtml;
|
});
|
}
|
//每个窗口创建完成后调用
|
|
winCreateOK(opt, result) {
|
this.viewWindow = result;
|
}
|
//打开激活
|
activate() {
|
this.map.addLayer(this.poiLayer);
|
}
|
//关闭释放
|
disable() {
|
this.clearAll();
|
this.map.removeLayer(this.poiLayer);
|
}
|
draw(type) {
|
this.clearAll();
|
|
if (type == 1) {
|
this.map.graphicLayer.startDraw({
|
type: "rectangle",
|
style: {
|
color: "#00FF00",
|
opacity: 0.3,
|
outline: true,
|
outlineColor: "#ffffff",
|
clampToGround: true,
|
},
|
success: (graphic) => {
|
this.drawGraphic = graphic;
|
},
|
});
|
} else if (type == 2) {
|
this.map.graphicLayer.startDraw({
|
type: "polygon",
|
style: {
|
color: "#00FF00",
|
opacity: 0.3,
|
outline: true,
|
outlineColor: "#ffffff",
|
clampToGround: true,
|
},
|
success: (graphic) => {
|
this.drawGraphic = graphic;
|
},
|
});
|
} else {
|
this.map.graphicLayer.startDraw({
|
type: "circle",
|
style: {
|
color: "#00FF00",
|
opacity: 0.3,
|
outline: true,
|
outlineColor: "#ffffff",
|
clampToGround: true,
|
},
|
success: (graphic) => {
|
this.drawGraphic = graphic;
|
},
|
});
|
}
|
}
|
loadMore() {
|
if (!this.lastQueryOptions) {
|
return;
|
}
|
this.lastQueryOptions.page++;
|
this.loadData(this.lastQueryOptions);
|
}
|
loadData(queryOptions) {
|
haoutil.loading.show();
|
|
this.lastQueryOptions = {
|
...queryOptions,
|
count: 25, //count 每页数量
|
success: (res) => {
|
var data = res.list;
|
this.addGraphics(data);
|
this.viewWindow.loadSuccess(res);
|
|
haoutil.loading.close();
|
},
|
error: (msg, error) => {
|
window.toastr.error(msg);
|
haoutil.loading.close();
|
},
|
};
|
this.gaoDePoi.query(this.lastQueryOptions);
|
}
|
clearAll(noClearDraw) {
|
this.lastQueryOptions = null;
|
this.poiLayer.clear();
|
|
if (!noClearDraw) {
|
this.drawGraphic = null;
|
this.map.graphicLayer.clear();
|
}
|
}
|
getExtent() {
|
return this.map.getExtent();
|
}
|
|
addGraphics(arr) {
|
console.log("查询数据结果", arr);
|
|
for (var i = 0; i < arr.length; i++) {
|
var item = arr[i];
|
|
var graphic = new mars3d.graphic.BillboardEntity({
|
position: Cesium.Cartesian3.fromDegrees(item.x, item.y),
|
style: {
|
image: "img/marker/mark3.png",
|
scale: 1,
|
scaleByDistance: true,
|
scaleByDistance_far: 20000,
|
scaleByDistance_farValue: 0.5,
|
scaleByDistance_near: 1000,
|
scaleByDistance_nearValue: 1,
|
clampToGround: true, //贴地
|
label: {
|
text: item.name,
|
font: "20px 楷体",
|
color: Cesium.Color.AZURE,
|
outline: true,
|
outlineColor: Cesium.Color.BLACK,
|
outlineWidth: 2,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
pixelOffset: new Cesium.Cartesian2(0, -30), //偏移量
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
|
clampToGround: true, //贴地
|
},
|
},
|
attr: item,
|
});
|
this.poiLayer.addGraphic(graphic);
|
|
item._graphic = graphic;
|
}
|
}
|
flyTo(item) {
|
var graphic = item._graphic;
|
if (graphic == null) {
|
toastr.warning(item.name + " 无经纬度坐标信息！");
|
return;
|
}
|
var position = graphic.positionShow;
|
this.poiLayer.closePopup();
|
|
//参数解释：线面数据：scale控制边界的放大比例，点数据：radius控制视距距离
|
this.map.flyToPoint(position, {
|
radius: 2000, //距离目标点的距离
|
duration: 3,
|
complete: (e) => {
|
//飞行完成回调方法
|
this.poiLayer.openPopup(graphic);
|
},
|
});
|
}
|
}
|
|
//注册到widget管理器中。
|
mars3d.widget.bindClass(MyWidget);
|
|
//每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
|
})(window, mars3d);
|
