(function (window, mars3d) { //创建widget类,需要继承BaseWidget class MyWidget extends mars3d.widget.BaseWidget { //弹窗配置 get view() { return { type: "window", url: "view.html", windowOptions: { width: 350, }, }; } //gaodePOI 通过输入名称选点 queryPOI(text, type) { if (!text || !type) { return; } this.gaodePOI.queryText({ text: text, city: "合肥市", success: (res) => { this.viewWindow.setHtmlInMCXD(res, type); //展示搜索结果 }, error: (msg, error) => { window.toastr.error(msg); haoutil.loading.close(); }, }); } //初始化[仅执行1次] create() { this.gaodeRoute = new mars3d.query.GaodeRoute({ // key: ['ae29a37307840c7ae4a785ac905927e0'], }); this.gaodePOI = new mars3d.query.GaodePOI({ // key: ['ae29a37307840c7ae4a785ac905927e0'], }); //图层管理使用的分组 this.groupLayer = new mars3d.layer.GroupLayer({ name: this.config.name, pid: 99, //图层管理 中使用,父节点id }); //创建矢量数据图层 this.pointLayer = new mars3d.layer.GraphicLayer({ name: this.config.name + "-起止点", }); this.groupLayer.addLayer(this.pointLayer); //加入分组 this.routeLayer = new mars3d.layer.GraphicLayer({ name: this.config.name + "-路线", }); this.groupLayer.addLayer(this.routeLayer); //加入分组 //设置路线随机色 this.randomColor = ["#eaf731", "#57f72e", "#2effd2", "#cc6e26", "#ff2ec7"]; } //每个窗口创建完成后调用 winCreateOK(opt, result) { this.viewWindow = result; } //打开激活 activate() { this.map.addLayer(this.groupLayer); } //关闭释放 disable() { if (this.startGraphic) { this.startGraphic.remove(); this.startGraphic = null; } if (this.endGraphic) { this.endGraphic.remove(); this.endGraphic = null; } this.map.removeLayer(this.groupLayer); this.clearCoumpute(); } //=======================起点=============================== //绘制起点 drawStartPoint(callback) { if (this.startGraphic) { this.startGraphic.remove(); this.startGraphic = null; } this.pointLayer.startDraw({ type: "billboard", style: { image: this.path + "img/start.png", horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, }, success: (graphic) => { this.startGraphic = graphic; if (callback) { var point = graphic.point; point.format(); callback(point.lng + "," + point.lat); } this.startCompute(); }, }); } //输入起点坐标 inputStartPoint(jd, wd) { if (!jd || !wd) { return; } let point = [jd, wd]; if (this.startGraphic) { this.startGraphic.position = point; } else { this.startGraphic = new mars3d.graphic.BillboardEntity({ position: point, style: { image: this.path + "img/start.png", scale: 1, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, clampToGround: true, }, }); this.pointLayer.addGraphic(this.startGraphic); } this.map.flyToPoint(point, { radius: 2500 }); this.startCompute(); } //查询起点坐标 queryStartPoint(text) { if (!text) { window.toastr.error("请输入查询条件!"); return; } this.queryPOI(text, "start"); } //=======================终点=============================== //绘制终点 drawEndPoint(callback) { if (this.endGraphic) { this.endGraphic.remove(); this.endGraphic = null; } this.pointLayer.startDraw({ type: "billboard", style: { image: this.path + "img/end.png", horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, }, success: (graphic) => { this.endGraphic = graphic; if (callback) { var point = graphic.point; point.format(); callback(point.lng + "," + point.lat); } this.startCompute(); }, }); } //输入终点坐标 inputEndPoint(jd, wd) { if (!jd || !wd) { return; } let point = [jd, wd]; if (this.endGraphic) { this.endGraphic.position = point; } else { this.endGraphic = new mars3d.graphic.BillboardEntity({ position: point, style: { image: this.path + "img/end.png", scale: 1, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, clampToGround: true, }, }); this.pointLayer.addGraphic(this.endGraphic); } this.map.flyToPoint(point, { radius: 2500 }); this.startCompute(); } //查询终点坐标 queryEndPoint(text) { if (!text) { window.toastr.error("请输入查询条件!"); return; } this.queryPOI(text, "end"); } //===================开始计算路线======================== //清除计算的结果 clearCoumpute() { //清除路线 this.routeLayer.clear(); this.viewWindow.clearRouteContent(); //清除页面搜索结果 //取消当前的视角跟随 this.removeTrack(); $("#mapDH_speed").remove(); } //开始计算 startCompute() { if (!this.startGraphic || !this.endGraphic) { return; } //清除上一次的计算结果 this.clearCoumpute(); //当两点存在时 自动计算 this.gaodeRoute.query({ points: [this.startGraphic.coordinate, this.endGraphic.coordinate], type: 3, extensions: "all", strategy: 11, success: (data) => { this.viewWindow.startCompute(); if (!data || data.paths.length < 1) { return; } this.viewWindow.showRouteBox(true); //添加速度控制面板 for (var i = 0; i < data.paths.length; i++) { var path = data.paths[i]; var points = path.points; if (!path.steps || path.steps.length < 1 || !points || points.length < 1) { continue; } let graphic = new mars3d.graphic.PolylineEntity({ positions: points, style: { clampToGround: true, color: this.randomColor[i % 5], opacity: 0.8, width: 4, }, attr: path, }); this.routeLayer.addGraphic(graphic); //漫游路线 let flyLine = new mars3d.graphic.RoamLine({ positions: points, speed: 200, camera: { type: "" }, model: { uri: "//data.mars3d.cn/gltf/mars/qiche.gltf", scale: 0.3, minimumPixelSize: 30, clampToGround: true, show: true, }, attr: { lineId: graphic.id, }, }); this.routeLayer.addGraphic(flyLine); //展示路径信息 this.viewWindow.showRouteInfo(graphic.id, path); } this.routeLayer.flyTo(); }, }); } //============= 计算漫游路线 ====================== getFlylineById(id) { return this.routeLayer.getGraphicByAttr("lineId", id); } roamOneById(id) { this.nowFline = this.getFlylineById(id); this.nowFline.show = true; this.nowFline.start(() => { this.reset(); }); } //漫游自动结束 或点击 停止导航按钮 后,重置界面和操作 reset() { //漫游结束 重置按钮 取消跟随 this.resetBtn(); this.removeTrack(); if (this.nowFline) { this.nowFline.show = false; this.nowFline = null; } //重置速度面板 this.map.clock.multiplier = 1; //还原线的高亮 this.highLightLine(); } //重置按钮 resetBtn() { this.viewWindow.resetButton(); } //取消当前的视角跟随 removeTrack() { if (this.nowFline) { this.nowFline.setCameraOptions({ type: "" }); } this.map.trackedEntity = undefined; } //==============开始导航=================== startDH(id, isGS) { //导航前释放之前的所有导航操作 this.reset(); if (!id) { return; } this.roamOneById(id); if (isGS) { this.nowFline.setCameraOptions({ type: "gs", heading: 0, radius: 2500, }); } } //============开始视角跟随============= startGS(id, ele) { //判断当前点击的视角跟随的id 是否是已在导航时的id if (this.nowFline) { //表示已开始漫游即已点击开始导航 if (this.nowFline.attr.lineId == id) { this.nowFline.setCameraOptions({ type: "gs", heading: 0, radius: 2500, }); } else { window.toastr.error("当前路径沒有车辆运行!"); if (ele) { ele.prop("checked", false); } return; } } } //==================其它方法===================== highLightLine(id) { if (this.lastRoute) { this.lastRoute.entityGraphic.material = this.lastRoute.entityGraphic.material_old; this.lastRoute.entityGraphic.width = this.lastRoute.entityGraphic.width_old; } if (!id) { return; } //动画线材质 let graphic = this.routeLayer.getGraphicById(id); if (!graphic) { return; } if (!graphic.entityGraphic.material_old) { graphic.entityGraphic.material_old = graphic.entityGraphic.material; } if (!graphic.entityGraphic.width_old) { graphic.entityGraphic.width_old = graphic.entityGraphic.width; } graphic.entityGraphic.width = 10; graphic.entityGraphic.material = new mars3d.material.LineFlowMaterialProperty({ color: Cesium.Color.AQUA, image: "./img/textures/arrow2.png", repeat: new Cesium.Cartesian2(50, 1), speed: 40, //速度,建议取值范围1-100 }); graphic.flyTo(); this.lastRoute = graphic; } resetSpeed(num) { if (num == undefined) { return; } this.map.clock.multiplier = num / 120; } } //注册到widget管理器中。 mars3d.widget.bindClass(MyWidget); //每个widet之间都是直接引入到index.html中,会存在彼此命名冲突,所以闭包处理下。 })(window, mars3d);