"use script"; //开发环境建议开启严格模式
|
(function (window, mars3d) {
|
var cityPosition = [
|
{ name: "亳州", jwd: [116.203602, 33.496075] },
|
{ name: "商丘", jwd: [115.871509, 34.297084] },
|
{ name: "淮北", jwd: [116.688413, 33.689214] },
|
{ name: "宿州", jwd: [117.234682, 33.740035] },
|
{ name: "徐州", jwd: [117.70509, 34.350708] },
|
{ name: "宿迁", jwd: [118.559349, 33.807355] },
|
{ name: "连云港", jwd: [118.875445, 34.619808] },
|
{ name: "临沂", jwd: [118.026908, 35.262767] },
|
{ name: "枣庄", jwd: [117.320268, 35.072555] },
|
{ name: "济宁", jwd: [116.856599, 35.500232] },
|
{ name: "菏泽", jwd: [115.716086, 35.05629] },
|
];
|
|
/**
|
* 根据名称获取坐标
|
*/
|
function getJWDByName(name) {
|
for (let i = 0; i < cityPosition.length; i += 1) {
|
const item = cityPosition[i];
|
if (item.name === name) {
|
return item.jwd;
|
}
|
}
|
return [];
|
}
|
|
//创建widget类，需要继承BaseWidget
|
class MyWidget extends mars3d.widget.BaseWidget {
|
//初始化[仅执行1次]
|
create() {
|
this.geoJsonLayer = new mars3d.layer.GeoJsonLayer({
|
pid: 99, //图层管理 中使用，父节点id
|
name: "淮海经济区11市",
|
url: "//data.mars3d.cn/file/geojson/huaihai.json",
|
symbol: {
|
styleOptions: {
|
materialType: mars3d.MaterialType.PolyGradient,
|
color: "#3388cc",
|
opacity: 0.7,
|
alphaPower: 1.3,
|
length: "{gdp}",
|
},
|
styleField: "Name",
|
styleFieldOptions: {
|
济宁市: { color: "#D4AACE" },
|
临沂市: { color: "#8DC763" },
|
菏泽市: { color: "#F7F39A" },
|
枣庄市: { color: "#F7F39A" },
|
徐州市: { color: "#96F0F1" },
|
宿迁市: { color: "#EAC9A8" },
|
连云港市: { color: "#F7F39A" },
|
商丘市: { color: "#D4AACE" },
|
宿州市: { color: "#8DC763" },
|
亳州市: { color: "#96F0F1" },
|
淮北市: { color: "#EAC9A8" },
|
},
|
},
|
});
|
|
//创建Graphic图层
|
this.graphicLayer = new mars3d.layer.GraphicLayer({
|
name: this.config.name,
|
pid: 99, //图层管理 中使用，父节点id
|
});
|
}
|
//打开激活
|
activate() {
|
this._last_basemap = this.map.basemap?.uuid;
|
this.map.basemap = 2017; //切换底图到深色底图
|
|
this.map.setCameraView({ lat: 31.338093, lng: 117.856434, alt: 284453, heading: 352, pitch: -38 });
|
|
this.map.addLayer(this.geoJsonLayer);
|
this.map.addLayer(this.graphicLayer);
|
|
//加载数据
|
$.ajax({
|
type: "GET",
|
url: "//data.mars3d.cn/file/apidemo/huaihai-jj.json",
|
success: (res) => {
|
this.showCityEconomyData(res.data);
|
},
|
error: (err) => {
|
haoutil.msg("实时查询气象信息失败，请稍候再试");
|
},
|
});
|
}
|
//关闭释放
|
disable() {
|
if (this._last_basemap) {
|
this.map.basemap = this._last_basemap; //还原底图
|
this._last_basemap = null;
|
}
|
|
this.map.removeLayer(this.geoJsonLayer);
|
this.map.removeLayer(this.graphicLayer);
|
}
|
|
showCityEconomyData(data) {
|
const yearArr = Object.keys(data);
|
this.showYearZT(data[yearArr[0]]);
|
}
|
|
/**
|
* 展示某年的椎体
|
*/
|
showYearZT(arr) {
|
for (let i = 0; i < arr.length; i += 1) {
|
const attr = arr[i];
|
const jwd = getJWDByName(attr["name"]);
|
|
const num1 = attr["第一产业"];
|
const num2 = attr["第二产业"];
|
const num3 = attr["第三产业"];
|
const numall = Number(num1 + num2 + num3).toFixed(2);
|
const html = `${attr["name"]}<br/>
|
<span style="color:#63AEFF">第一产业：${num1}</span><br/>
|
<span style="color:#FFB861">第二产业：${num2}</span><br/>
|
<span style="color:#FF6D5D">第三产业：${num3}</span>`;
|
|
var height1 = Math.floor(num1 * 10);
|
var height2 = Math.floor(num2 * 10);
|
var height3 = Math.floor(num3 * 10);
|
|
var p1 = Cesium.Cartesian3.fromDegrees(jwd[0], jwd[1], height3 / 2);
|
var p2 = Cesium.Cartesian3.fromDegrees(jwd[0], jwd[1], height3 + height2 / 2);
|
var p3 = Cesium.Cartesian3.fromDegrees(jwd[0], jwd[1], height3 + height2 + height1 / 2);
|
|
// 添加柱体
|
this.createZT(p1, height3, Cesium.Color.fromCssColorString("#63AEFF"), html);
|
this.createZT(p2, height2, Cesium.Color.fromCssColorString("#FFB861"), html);
|
this.createZT(p3, height1, Cesium.Color.fromCssColorString("#FF6D5D"), html);
|
|
// 添加文字
|
var primitive = new mars3d.graphic.LabelPrimitive({
|
position: Cesium.Cartesian3.fromDegrees(jwd[0], jwd[1], height1 + height2 + height3),
|
style: {
|
text: numall,
|
font_size: 18,
|
font_family: "楷体",
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
fillColor: Cesium.Color.fromCssColorString("#00ff00"),
|
outlineColor: Cesium.Color.BLACK,
|
outlineWidth: 1,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
pixelOffset: new Cesium.Cartesian2(0, -20),
|
},
|
});
|
this.graphicLayer.addGraphic(primitive);
|
primitive.bindTooltip(html);
|
}
|
}
|
|
/** 创建柱体 */
|
createZT(position, len, color, html) {
|
var graphic = new mars3d.graphic.CylinderEntity({
|
position: position,
|
style: {
|
length: len,
|
topRadius: 6000.0,
|
bottomRadius: 6000.0,
|
material: color,
|
},
|
});
|
this.graphicLayer.addGraphic(graphic);
|
|
graphic.bindTooltip(html);
|
|
// graphic._position_show = position
|
// graphic._length_show = len
|
return graphic;
|
}
|
}
|
|
//注册到widget管理器中。
|
mars3d.widget.bindClass(MyWidget);
|
|
//每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
|
})(window, mars3d);
|
