(function (window, mars3d) {
|
//创建widget类，需要继承BaseWidget
|
class MyWidget extends mars3d.widget.BaseWidget {
|
//初始化[仅执行1次]
|
create() {}
|
//打开激活
|
activate() {
|
//创建Graphic图层
|
this.graphicLayer = new mars3d.layer.GraphicLayer({
|
name: this.config.name,
|
pid: 99, //图层管理 中使用，父节点id
|
});
|
this.map.addLayer(this.graphicLayer);
|
|
this.graphicLayer.bindTooltip(function (event) {
|
let item = event.graphic.attr;
|
var inthtml = `<div>${item.NAME}</div>
|
<div>${item.LX}</div>`;
|
return inthtml;
|
});
|
|
//单击事件
|
this.graphicLayer.on(mars3d.EventType.click, (event) => {
|
console.log("你单击了", event);
|
|
let item = event.graphic.attr;
|
this.showDetails(item);
|
});
|
|
if (this.config.dataQy) {
|
//使用外部传入的数据
|
this.addData(this.config.dataQy);
|
} else {
|
$.getJSON("//data.mars3d.cn/file/apidemo/qiye/point.json", (result) => {
|
var arrdata = result.Data;
|
for (var j = 0; j < arrdata.length; j++) {
|
var item = arrdata[j];
|
|
//为了详情面板展示，生成随机演示数据
|
item.QYZP = 5;
|
item.CPZP = 4;
|
item.QYJJ = "有";
|
item.JJ = [
|
{
|
NF: "2017",
|
ZCZ: 6000 + haoutil.math.random(10, j * 1000),
|
LY: 1000 + haoutil.math.random(10, j * 1000),
|
NSE: 1000 + haoutil.math.random(10, j * 1000),
|
},
|
{
|
NF: "2018",
|
ZCZ: 10000 + haoutil.math.random(10, j * 1000),
|
LY: 3000 + haoutil.math.random(10, j * 1000),
|
NSE: 3000 + haoutil.math.random(10, j * 1000),
|
},
|
{
|
NF: "2019",
|
ZCZ: 25000 + haoutil.math.random(10, j * 1000),
|
LY: 5000 + haoutil.math.random(10, j * 1000),
|
NSE: 5000 + haoutil.math.random(10, j * 1000),
|
},
|
];
|
}
|
|
this.addData(arrdata, true);
|
});
|
}
|
}
|
//关闭释放
|
disable() {
|
this.map.removeLayer(this.graphicLayer, true);
|
}
|
addData(arr, iscenter) {
|
this.arrData = arr;
|
|
this.graphicLayer.clear();
|
|
for (var i = 0, len = arr.length; i < len; i++) {
|
var item = arr[i];
|
|
var jd = Number(item.JD);
|
var wd = Number(item.WD);
|
|
if (isNaN(jd) || jd == 0 || isNaN(wd) || wd == 0) {
|
continue;
|
}
|
|
var position = Cesium.Cartesian3.fromDegrees(jd, wd);
|
|
var graphic = new mars3d.graphic.BillboardPrimitive({
|
position: position,
|
style: {
|
image: "img/marker/mark1.png",
|
scale: 0.6,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1),
|
visibleDepth: true,
|
// label: {
|
// text: item.JC,
|
// font_size: 18,
|
// style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
// fillColor: Cesium.Color.AZURE,
|
// outlineColor: Cesium.Color.BLACK,
|
// outlineWidth: 2,
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
// pixelOffset: new Cesium.Cartesian2(0, -27), //偏移量
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 10000),
|
// },
|
},
|
attr: item,
|
});
|
this.graphicLayer.addGraphic(graphic);
|
|
item._graphic = graphic;
|
}
|
|
if (iscenter) {
|
this.graphicLayer.flyTo();
|
}
|
|
return arr;
|
}
|
getData() {
|
return this.arrData;
|
}
|
//打开详情
|
showDetails(item) {
|
if (item === null) {
|
return;
|
}
|
|
if (mars3d.Util.isString(item)) {
|
item = this.getItemById(item);
|
}
|
|
mars3d.widget.activate({
|
uri: "widgetsTS/qyDetailsView/widget.js",
|
dataQy: item,
|
});
|
}
|
queryData(params) {
|
var newdata = [];
|
|
for (var i = 0; i < this.arrData.length; i++) {
|
var item = this.arrData[i];
|
if (params.key == "" || item.NAME.indexOf(params.key) != -1) {
|
newdata.push(item);
|
|
if (item._graphic) {
|
item._graphic.show = true;
|
}
|
} else {
|
if (item._graphic) {
|
item._graphic.show = false;
|
}
|
}
|
}
|
return newdata;
|
}
|
clearLastCenter() {
|
if (this.lastCenter) {
|
this.lastCenter.czmObject.image = "img/marker/mark3.png";
|
this.lastCenter = null;
|
}
|
this.graphicLayer.closeTooltip();
|
}
|
getItemById(id) {
|
for (var i = 0; i < this.arrData.length; i++) {
|
var item = this.arrData[i];
|
if (item.ID == id) {
|
return item;
|
}
|
}
|
return null;
|
}
|
flyTo(id) {
|
this.clearLastCenter();
|
|
var item = this.getItemById(id);
|
if (item === null) {
|
return;
|
}
|
|
var graphic = item._graphic;
|
if (graphic == null) {
|
toastr.warning(item.JC + " 无经纬度坐标信息！");
|
return;
|
}
|
|
//参数解释：点数据：radius控制视距距离
|
this.map.flyToGraphic(graphic, { radius: 2500 });
|
|
setTimeout(() => {
|
this.graphicLayer.openTooltip(graphic);
|
}, 3000);
|
|
this.lastCenter = graphic;
|
this.lastCenter.czmObject.image = "img/marker/mark2.png";
|
|
setTimeout(() => {
|
this.clearLastCenter();
|
}, 10000);
|
}
|
}
|
|
//注册到widget管理器中。
|
mars3d.widget.bindClass(MyWidget);
|
|
//每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
|
})(window, mars3d);
|
