diff --git a/src/views/Index.vue b/src/views/Index.vue index 2066c39..f72c409 100644 --- a/src/views/Index.vue +++ b/src/views/Index.vue @@ -516,13 +516,6 @@ this.drawPolygon('B-ZH-1702', 'VM0V81395N') } }, - // 取区域内的随机图标;用于线对象的合并渲染 - randomPoint () { - const jd = this.random(114.869 * 1000, 114.889 * 1000) / 1000 - const wd = this.random(25.68 * 1000, 25.70 * 1000) / 1000 - return new mars3d.LatLngPoint(jd, wd, 50) - }, - // 取随机数字 random (min, max) { return Math.floor(Math.random() * (max - min + 1) + min) @@ -555,7 +548,7 @@ type: "tencent", layer: "custom", style: "4", - show: true + show: false }, { name: "百度黑色", @@ -563,7 +556,7 @@ type: "baidu", layer: "custom", style: "dark", - show: false + show: true }, ], layers: [ @@ -612,6 +605,16 @@ // 鼠标左键平移 map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG] window.map = map + + const handler = new Cesium.ScreenSpaceEventHandler(map.viewer.canvas) + handler.setInputAction(function(evt) { + var cartesian = map.viewer.camera.pickEllipsoid(evt.position, map.viewer.scene.globe.ellipsoid) + var cartographic = Cesium.Cartographic.fromCartesian(cartesian) + var lng = Cesium.Math.toDegrees(cartographic.longitude)// 经度值 + var lat = Cesium.Math.toDegrees(cartographic.latitude)// 纬度值 + console.log(' {point: [' + lng + ',' + lat + ',0]},') + }, Cesium.ScreenSpaceEventType.LEFT_CLICK) + // 加动态图层 layers.feature = new mars3d.layer.GraphicLayer() layers.polygon = new mars3d.layer.GraphicLayer() @@ -620,7 +623,7 @@ // this.showAreaMask() this.showAreaBoundaryWall() this.initlight() - this.addCicleScan() + window.map.addLayer(this.addFlyLine()) // let loadBuilding = await this.loadBuilding() }, // 显示区域遮罩-可用s @@ -729,7 +732,7 @@ } }) graphicLayer.addGraphic(rotatCicleImage) - + window.map.addLayer(graphicLayer) // 扫描圆形 const scanCircle = new mars3d.graphic.CircleEntity({ position: Cesium.Cartesian3.fromDegrees(114.87527, 25.78311, 15), @@ -747,10 +750,115 @@ }) graphicLayer.addGraphic(scanCircle) }, - addCicleScan(){ - const graphicLayer = new mars3d.layer.GraphicLayer() - window.map.addLayer(graphicLayer) + // 取区域内的随机图标;用于线对象的合并渲染 + randomPoint () { + // 114.882505, 25.778006, 0] + const jd = this.random(114.84 * 1000, 114.89 * 1000) / 1000 + const wd = this.random(25.76 * 1000, 25.81 * 1000) / 1000 + return new mars3d.LngLatPoint(jd, wd, 50) + }, + addFlyLine(){ + // mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/geojson/shanghai-point.json" }).then((result) => { + // const pointArr = [] + // result.features.forEach((obj) => { + // pointArr.push({ + // name: obj.properties.Name, + // point: obj.geometry.coordinates + // }) + // }) + // + // + // }) + // .catch(function (error) { + // console.log("加载JSON出错", error) + // }) + 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.882505, 25.778006, 0] + const positions = mars3d.PolyUtil.getLinkedPointList(center, thisPoint, 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) + } + + + // 垂直飞线 + 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 loadBuilding() {