"use script"; //开发环境建议开启严格模式
|
(function (window, mars3d) {
|
//创建widget类，需要继承BaseWidget
|
class MyWidget extends mars3d.widget.BaseWidget {
|
//初始化[仅执行1次]
|
create() {}
|
//打开激活
|
activate() {
|
//创建Graphic图层
|
var graphicLayer = new mars3d.layer.GraphicLayer({
|
name: this.config.name,
|
pid: 99, //图层管理 中使用，父节点id
|
});
|
this.map.addLayer(graphicLayer);
|
|
this.graphicLayer = graphicLayer;
|
|
//加一些演示数据
|
addGraphic_a1(graphicLayer);
|
addGraphic_a2(graphicLayer);
|
addGraphic_a3(graphicLayer);
|
addGraphic_a4(graphicLayer);
|
addGraphic_a5(graphicLayer);
|
addGraphic_a7(graphicLayer);
|
addGraphic_a8(graphicLayer);
|
|
this.graphicLayer.flyTo();
|
}
|
//关闭释放
|
disable() {
|
this.map.removeLayer(this.graphicLayer, true);
|
this.graphicLayer = null;
|
}
|
}
|
|
//注册到widget管理器中。
|
mars3d.widget.bindClass(MyWidget);
|
|
function addGraphic_a1(graphicLayer) {
|
var primitive = new mars3d.graphic.WallPrimitive({
|
positions: [
|
[117.153945, 31.881122, 36.4],
|
[117.168352, 31.880147, 32.6],
|
[117.178047, 31.885925, 29.25],
|
],
|
style: {
|
diffHeight: 200,
|
material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
|
image: "img/textures/arrow.png",
|
color: Cesium.Color.YELLOW,
|
repeat: new Cesium.Cartesian2(20, 1),
|
speed: 20, //速度，建议取值范围1-100
|
}),
|
},
|
});
|
graphicLayer.addGraphic(primitive);
|
//primitive.addTo(graphicLayer) //还可以另外一种写法,看个人习惯选用，内部都一样
|
}
|
|
function addGraphic_a2(graphicLayer) {
|
var primitive = new mars3d.graphic.WallPrimitive({
|
positions: [
|
[117.208302, 31.85757],
|
[117.234234, 31.858263],
|
[117.234261, 31.833317],
|
[117.207414, 31.834541],
|
],
|
style: {
|
closure: true,
|
diffHeight: 500,
|
material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
|
image: "img/textures/arrow.png",
|
color: Cesium.Color.CHARTREUSE,
|
repeat: new Cesium.Cartesian2(30, 1),
|
speed: 20, //速度，建议取值范围1-100
|
}),
|
},
|
});
|
graphicLayer.addGraphic(primitive);
|
//primitive.addTo(graphicLayer) //还可以另外一种写法,看个人习惯选用，内部都一样
|
|
//entity转geojson
|
var geojson = primitive.toGeoJSON();
|
console.log(geojson);
|
}
|
|
function addGraphic_a3(graphicLayer) {
|
//圆形时
|
var positions = mars3d.PolyUtil.getEllipseOuterPositions({
|
position: Cesium.Cartesian3.fromDegrees(117.276257, 31.866351, 19.57),
|
radius: 1200, //半径
|
count: 50, //共返回(count*4)个点
|
});
|
|
var primitive = new mars3d.graphic.WallPrimitive({
|
positions: positions,
|
style: {
|
diffHeight: 800,
|
closure: true,
|
material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
|
image: "img/textures/fence.png",
|
color: Cesium.Color.fromCssColorString("#ffff00"),
|
speed: 10, //速度，建议取值范围1-100
|
axisY: true,
|
}),
|
},
|
});
|
graphicLayer.addGraphic(primitive);
|
//primitive.addTo(graphicLayer) //还可以另外一种写法,看个人习惯选用，内部都一样
|
}
|
|
function addGraphic_a4(graphicLayer) {
|
var primitive = new mars3d.graphic.WallPrimitive({
|
positions: [
|
[117.154815, 31.853495],
|
[117.181255, 31.854257],
|
[117.182284, 31.848255],
|
[117.184748, 31.840141],
|
[117.180557, 31.835556],
|
[117.180023, 31.833741],
|
[117.166846, 31.833737],
|
[117.155531, 31.833151],
|
[117.154787, 31.835978],
|
[117.151994, 31.839036],
|
[117.150691, 31.8416],
|
[117.151215, 31.844734],
|
],
|
style: {
|
closure: true,
|
diffHeight: 700,
|
material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
|
//动画线材质
|
image: "img/textures/fence.png",
|
axisY: true,
|
color: Cesium.Color.fromCssColorString("#ff0000"),
|
image2: "img/textures/tanhao.png",
|
color2: Cesium.Color.fromCssColorString("#ffff00"),
|
speed: 10, //速度，建议取值范围1-100
|
}),
|
},
|
});
|
graphicLayer.addGraphic(primitive);
|
//primitive.addTo(graphicLayer) //还可以另外一种写法,看个人习惯选用，内部都一样
|
}
|
|
function addGraphic_a5(graphicLayer) {
|
var primitive = new mars3d.graphic.WallPrimitive({
|
positions: [
|
[117.229659, 31.908221],
|
[117.240804, 31.908175],
|
],
|
style: {
|
diffHeight: 500,
|
material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
|
//动画线材质
|
image: "img/textures/fence.png",
|
axisY: true,
|
color: Cesium.Color.fromCssColorString("#ff0000"),
|
image2: "img/textures/tanhao.png",
|
color2: Cesium.Color.fromCssColorString("#ffff00"),
|
speed: 10, //速度，建议取值范围1-100
|
}),
|
label: {
|
text: "我是墙",
|
font_size: 18,
|
color: "#ffffff",
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_far: 500000,
|
distanceDisplayCondition_near: 0,
|
},
|
},
|
});
|
graphicLayer.addGraphic(primitive);
|
//primitive.addTo(graphicLayer) //还可以另外一种写法,看个人习惯选用，内部都一样
|
}
|
|
function addGraphic_a7(graphicLayer) {
|
var primitive = new mars3d.graphic.WallPrimitive({
|
positions: [
|
[117.353776, 31.887406, 21.2],
|
[117.321028, 31.887207, 21.3],
|
[117.290341, 31.902469, 15.1],
|
],
|
style: {
|
diffHeight: 400,
|
material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
|
image: "img/textures/arrow.png",
|
color: Cesium.Color.fromCssColorString("#00eba8"),
|
repeat: new Cesium.Cartesian2(20, 1),
|
speed: 20, //速度，建议取值范围1-100
|
}),
|
},
|
});
|
graphicLayer.addGraphic(primitive);
|
//primitive.addTo(graphicLayer) //还可以另外一种写法,看个人习惯选用，内部都一样
|
}
|
|
function addGraphic_a8(graphicLayer) {
|
//显示合肥市边界
|
$.getJSON("//data.mars3d.cn/file/geojson/areas/340100.json", function (geojson) {
|
let arr = mars3d.Util.geoJsonToGraphics(geojson); //解析geojson
|
for (let i = 0; i < arr.length; i++) {
|
let item = arr[i];
|
var primitive = new mars3d.graphic.WallPrimitive({
|
positions: item.positions,
|
style: {
|
diffHeight: 3000,
|
material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
|
image: "img/textures/fence.png",
|
color: "#bdf700",
|
repeat: new Cesium.Cartesian2(5, 1),
|
axisY: true, //方向，true时上下，false左右
|
speed: 10, //速度，建议取值范围1-100
|
}),
|
},
|
attr: item.attr,
|
});
|
graphicLayer.addGraphic(primitive);
|
//primitive.addTo(graphicLayer) //还可以另外一种写法,看个人习惯选用，内部都一样
|
|
primitive.bindTooltip("合肥欢迎您 - 火星科技");
|
}
|
});
|
}
|
|
//每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
|
})(window, mars3d);
|
