diff --git a/dist.zip b/dist.zip deleted file mode 100644 index b2b7a2a..0000000 --- a/dist.zip +++ /dev/null Binary files differ diff --git a/dist.zip b/dist.zip deleted file mode 100644 index b2b7a2a..0000000 --- a/dist.zip +++ /dev/null Binary files differ diff --git a/src/views/Index.vue b/src/views/Index.vue index 426fdfb..b0fbc95 100644 --- a/src/views/Index.vue +++ b/src/views/Index.vue @@ -622,35 +622,11 @@ layers.polygon = new mars3d.layer.GraphicLayer() map.addLayer(layers.feature) map.addLayer(layers.polygon) - // this.showAreaMask() this.showAreaBoundaryWall() this.initlight() window.map.addLayer(this.addFlyLine()) // let loadBuilding = await this.loadBuilding() }, - // 显示区域遮罩-可用s - // showAreaMask(){ - // const geoJsonLayer = new mars3d.layer.GeoJsonLayer({ - // url: "http://111.198.10.15:11404/3d/rj_bj.json", - // mask: false, // 标识为遮罩层【重点参数】 - // symbol: { - // styleOptions: { - // fill: true, - // color: "#ff4b33", - // opacity: 0.0, - // outline: true, - // outlineColor: "#ffffff", - // outlineWidth: 25, - // addHeight:1000, - // outlineOpacity: 0.8, - // arcType: Cesium.ArcType.GEODESIC, - // clampToGround: true - // } - // } - // // flyTo: true - // }) - // window.map.addLayer(geoJsonLayer) - // }, // 显示行政区划墙-效果不好，废除 showAreaBoundaryWall(){ // map.setCameraView({ lat: 30.561661, lng: 117.663884, alt: 113078, heading: 346, pitch: -43 }) @@ -660,18 +636,21 @@ symbol: { type: "wall", styleOptions: { + fill: true, diffHeight: 500, // 墙高 materialType: mars3d.MaterialType.LineFlow, + // arcType: Cesium.ArcType.GEODESIC, + outlineWidth: 8, + outlineOpacity: 0.8, materialOptions: { color: "#39aafa", // 颜色 opacity: 0.5, // 透明度 outlineColor: "#ffffff", addHeight:1000, image: "http://mars3d.cn/img/textures/fence.png", // 图片 - MeasureHeight:1000, repeatX: 3, // 重复数量 axisY: true, // 竖直方向 - speed: 10 // 速度 + speed: 10// 速度 }, // 高亮时的样式 highlight: { @@ -680,6 +659,7 @@ } } }, + flyTo: true, popup: "{name}" }) window.map.addLayer(graphicLayer) @@ -732,37 +712,6 @@ } }) graphicLayer.addGraphic(divgraphic1) - const positionDiv = [114.886275, 25.800655, 100] - // 动态边框文本 DIV - const graphic = new mars3d.graphic.DivBoderLabel({ - position: positionDiv, - style: { - text: "赣南师范校区", - font_size: 15, - font_family: "微软雅黑", - color: "#ccc", - boderColor: "#15d1f2", - addHeight: 100 - }, - attr: { remark: "DIV矢量数据" } - }) - graphicLayer.addGraphic(graphic) - - const scanCircle1 = new mars3d.graphic.CircleEntity({ - position: Cesium.Cartesian3.fromDegrees(position1[0], position1[1], 15), - style: { - radius: 480.0, - materialType: mars3d.MaterialType.CircleScan, - materialOptions: { - image: "/img/textures/circle-scan.png", - color: "#ffffff" - }, - stRotation: new Cesium.CallbackProperty(getRotationValue, false), - classificationType: Cesium.ClassificationType.BOTH, - clampToGround: true - } - }) - graphicLayer.addGraphic(scanCircle1) // 旋转的图片 -- 中心围墙 @@ -771,6 +720,7 @@ radius: 50, // 半径 count: 50 // 共返回(count*4)个点 }) + //扫描点 const rotatWallImage = new mars3d.graphic.WallPrimitive({ positions: WallImagePositions, style: { @@ -798,10 +748,10 @@ graphicLayer.addGraphic(circleDiffuseWallGlow) //四面体加载 const tetrahedron = new mars3d.graphic.Tetrahedron({ - position: [position[0], position[1], 180], + position: [position[0], position[1], 220], style: { - width: 20, - height: 30, + width: 40, + height: 60, color: "rgba(200,200,0,0.7)", moveHeight: 50 } @@ -828,22 +778,7 @@ }) graphicLayer.addGraphic(rotatCicleImage) window.map.addLayer(graphicLayer) - // 扫描圆形 - const scanCircle = new mars3d.graphic.CircleEntity({ - position: Cesium.Cartesian3.fromDegrees(114.87527, 25.78311, 15), - style: { - radius: 480.0, - materialType: mars3d.MaterialType.CircleScan, - materialOptions: { - image: "/img/textures/circle-scan.png", - color: "#ffffff" - }, - stRotation: new Cesium.CallbackProperty(getRotationValue, false), - classificationType: Cesium.ClassificationType.BOTH, - clampToGround: true - } - }) - graphicLayer.addGraphic(scanCircle) + }, // 取区域内的随机图标；用于线对象的合并渲染 randomPoint () { @@ -869,74 +804,20 @@ // }) const graphicLayer = new mars3d.layer.GraphicLayer() - -// 抛物线 - // 114.882505, 25.778006, 0] - // const pointArr = [ - // {point: [114.8764818120247,25.77637353123427,0]}, - // {point: [114.87695672507003,25.778007702869786,0]}, - // {point: [114.87966927206604,25.77599620727738,0]}, - // {point: [114.88253833204944,25.775554525807916,0]}, - // {point: [114.87820666803023,25.77296025187134,0]}, - // {point: [114.88929770713901,25.775657691514358,0]}, - // {point: [114.89132624861946,25.777992687463875,0]}, - // {point: [114.8888305443027,25.780572780617135,0]}, - // {point: [114.88918712262246,25.781905242205305,0]}, - // {point: [114.8866397714382,25.78145154585119,0]}, - // {point: [114.87832200062935,25.785631839520498,0]}, - // {point: [114.87520776257837,25.783182753768816,0]}, - // {point: [114.88306808341811,25.78527579098895,0]} - // ] - // const lineMaterial = mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.ODLine, { - // color: new Cesium.Color(1, 1, 1), - // bgColor: new Cesium.Color(127/255, 254/255, 1, 0.4), - // speed: 5 + 1.0 * Math.random(), - // startTime: Math.random() - // }) - // - // for (let i = 0, len = pointArr.length; i < len; i++) { - // const item = pointArr[i] - // const color = ["#ffff00", "#81d8ff", "#fff9ed"] - // const thisPoint = Cesium.Cartesian3.fromDegrees(item.point[0], item.point[1], 1) - // const center = [114.877759, 25.773393, 0] - // const positions = mars3d.PolyUtil.getLinkedPointList(thisPoint,center, 40000, 100) // 计算曲线点 - // - // const graphic = new mars3d.graphic.PolylinePrimitive({ - // positions: positions, - // style: { - // width: 4, - // material: lineMaterial // 动画线材质 - // }, - // popup: pointArr[i].point.toString() - // }) - // graphicLayer.addGraphic(graphic) - // // 抛物线 - // - // // // 圆椎体 - // const coneGlow = new mars3d.graphic.LightCone({ - // position: Cesium.Cartesian3.fromDegrees(item.point[0], item.point[1], 10), - // style: { - // radius: 10, - // height: 200, - // color: color[i % color.length] - // }, - // popup: item.name - // }) - // graphicLayer.addGraphic(coneGlow) - // } //抛物线 - mars3d.Util.fetchJson({ url: "http://111.198.10.15:11404/3d/rj_bz.json" }) + mars3d.Util.fetchJson({headers:{'Content-Type':'application/json;'},queryParameters:{id:1}, url: "http://11.100.6.149:8080/monitor2/monitor/api/special/point"}) .then((result) => { console.log(result) const pointArr = [] - result.geometries.forEach((obj) => { - pointArr.push({ - name: "标注点", - point: obj.coordinates - }) + result.data.forEach((obj) => { + pointArr.push({ + name: obj.pointName, + point: Cesium.Cartesian3.fromDegrees( obj.lng,obj.lat, 0) + }) }) + //材质生成 const lineMaterial = mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.ODLine, { color: new Cesium.Color(1, 1, 1), bgColor: new Cesium.Color(1, 250/255, 205/255, 0.2), @@ -949,8 +830,9 @@ const color = ["#ffff00", "#81d8ff", "#fff9ed"] const center = [114.877759, 25.773393, 60] - const thisPoint = Cesium.Cartesian3.fromDegrees(item.point[0], item.point[1], 1) - const positions = mars3d.PolyUtil.getLinkedPointList(thisPoint,center, 40000, 100) // 计算曲线点 + console.log(item) + const thisPoint = item.point + const positions = mars3d.PolyUtil.getLinkedPointList(thisPoint,center, 30000, 100) // 计算曲线点 const graphic = new mars3d.graphic.PolylinePrimitive({ positions: positions, @@ -964,7 +846,7 @@ // 圆椎体 const coneGlow = new mars3d.graphic.LightCone({ - position: Cesium.Cartesian3.fromDegrees(item.point[0], item.point[1], 10), + position: item.point, style: { radius: 10, height: 200, @@ -973,40 +855,82 @@ popup: item.name }) graphicLayer.addGraphic(coneGlow) + + // 动态边框文本 DIV + const graphic1 = new mars3d.graphic.DivBoderLabel({ + position: item.point, + style: { + text: item.name, + font_size: 15, + font_family: "微软雅黑", + color: "#ccc", + boderColor: "#15d1f2", + addHeight: 100 + }, + attr: { remark: "DIV矢量数据" } + }) + graphicLayer.addGraphic(graphic1) + + } - }) - .catch(function (error) { - console.log("加载JSON出错", error) - }) + }).catch(function (error) { + console.log("加载JSON出错", error) + }); + // mars3d.Util.fetchJson({ url: "http://111.198.10.15:11404/3d/rj_bz.json" }) + // .then((result) => { + // console.log(result) + // const pointArr = [] + // result.geometries.forEach((obj) => { + // pointArr.push({ + // name: "标注点", + // point: obj.coordinates + // }) + // + // }) + // + // const lineMaterial = mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.ODLine, { + // color: new Cesium.Color(1, 1, 1), + // bgColor: new Cesium.Color(1, 250/255, 205/255, 0.2), + // speed: 5 + 1.0 * Math.random(), + // startTime: Math.random() + // }) + // + // for (let i = 0, len = pointArr.length; i < len; i++) { + // const item = pointArr[i] + // + // const color = ["#ffff00", "#81d8ff", "#fff9ed"] + // const center = [114.877759, 25.773393, 60] + // const thisPoint = Cesium.Cartesian3.fromDegrees(item.point[0], item.point[1], 1) + // const positions = mars3d.PolyUtil.getLinkedPointList(thisPoint,center, 40000, 100) // 计算曲线点 + // + // const graphic = new mars3d.graphic.PolylinePrimitive({ + // positions: positions, + // style: { + // width: 4, + // material: lineMaterial // 动画线材质 + // } + // }) + // graphic.bindPopup(item.name) + // graphicLayer.addGraphic(graphic) + // + // // 圆椎体 + // const coneGlow = new mars3d.graphic.LightCone({ + // position: Cesium.Cartesian3.fromDegrees(item.point[0], item.point[1], 10), + // style: { + // radius: 10, + // height: 200, + // color: color[i % color.length] + // }, + // popup: item.name + // }) + // graphicLayer.addGraphic(coneGlow) + // } + // }) + // .catch(function (error) { + // console.log("加载JSON出错", error) + // }) // 垂直飞线 - const arrData = [] - for (let j = 0; j < 500; ++j) { - const startPt = this.randomPoint() - - const endPt = startPt.clone() - endPt.alt = this.random(600, 1000) - - const startTime = this.random(0, 10000) - const speed = this.random(1, 35) - arrData.push({ - positions: [startPt, endPt], - style: { - width: 1, - materialType: mars3d.MaterialType.ODLine, - materialOptions: { - color: "rgb(255, 255, 2)", - bgColor: "rgb(255,255,255,0.01)", - startTime: startTime, - speed: speed - } - } - }) - } - const upPoly = new mars3d.graphic.PolylineCombine({ - instances: arrData - }) - graphicLayer.addGraphic(upPoly) return graphicLayer }, // 楼宇模型-3dtiles