<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="../libs/supermap10/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <link href="../libs/supermap10/css/pretty.css" rel="stylesheet"> <script src="../libs/supermap10/examples/js/jquery.min.js"></script> <script src="../libs/supermap10/examples/js/config.js"></script> <script type="text/javascript" src="../libs/supermap10/examples/js/require.min.js" data-main="../libs/supermap10/examples/js/main"></script> <link href="css/divpoint.css" rel="stylesheet"> <style> body, html, #map3d { height: 100%; width: 100%; margin: 0 auto; position: relative; } .info { height: 50px; width: 50px; background-color: yellow; position: absolute; z-index: 2; left: 0; top: 0; } .infoContent { z-index: 9999999; } </style> </head> <body> <div style="position: absolute;left: 10px; top: 210px;z-index: 99999;"> <button onclick="flyTo()">定位</button> </div> <div id="map3d"> </div> <div id="坡度图-1" class="infoContent" style="display: none;position: absolute; left: 0px; top: 0px; "> <div class="divpoint divpoint-theme-29baf1"> <div class="divpoint-wrap"> <div class="area"> <div class="arrow-lt"></div> <div class="b-t"></div> <div class="b-r"></div> <div class="b-b"></div> <div class="b-l"></div> <div class="arrow-rb"></div> <div class="label-wrap"> <div class="title">大别山水厂</div> <div class="label-content"> <div class="data-li"> <div class="data-label">实时流量：</div> <div class="data-value"><span class="label-num">99</span><span class="label-unit">m³/s</span> </div> </div> <div class="data-li"> <div class="data-label">水池液位：</div> <div class="data-value"><span class="label-num">20.02</span><span class="label-unit">m</span> </div> </div> <div class="data-li"> <div class="data-label">水泵状态：</div> <div class="data-value"><span class="label-tag data-value-status-1" alt="中间状态">1号</span><span class="label-tag data-value-status-0" alt="关闭状态">2号</span></div> </div> <div class="data-li"> <div class="data-label">出水阀门：</div> <div class="data-value"><span class="label-tag data-value-status-1" alt="中间状态">1号</span><span class="label-tag data-value-status-2" alt="打开状态">2号</span></div> </div> </div> </div> </div> <div class="b-t-l"></div> <div class="b-b-r"></div> </div> <div class="arrow"></div> </div> </div> <div id="坡度图-2" class="infoContent" style="display: none;position: absolute; left: 0px; top: 0px; transform: matrix(0.902945, 0, 0, 0.902945, 364.479, 197.3); transform-origin: left bottom 0px;"> <div class="divpoint divpoint-theme-29baf1"> <div class="divpoint-wrap"> <div class="area"> <div class="arrow-lt"></div> <div class="b-t"></div> <div class="b-r"></div> <div class="b-b"></div> <div class="b-l"></div> <div class="arrow-rb"></div> <div class="label-wrap"> <div class="title">岳西水厂</div> <div class="label-content"> <div class="data-li"> <div class="data-label">实时流量：</div> <div class="data-value"><span class="label-num">98</span><span class="label-unit">m³/s</span> </div> </div> <div class="data-li"> <div class="data-label">水池液位：</div> <div class="data-value"><span class="label-num">13.14</span><span class="label-unit">m</span> </div> </div> <div class="data-li"> <div class="data-label">水泵状态：</div> <div class="data-value"><span class="label-tag data-value-status-1" alt="中间状态">1号</span><span class="label-tag data-value-status-0" alt="关闭状态">2号</span></div> </div> </div> </div> </div> <div class="b-t-l"></div> <div class="b-b-r"></div> </div> <div class="arrow"></div> </div> </div> </body> <script> var scene, globe, viewer; var 气泡点 = {}; var nEntity = 1; function flyTo() { viewer.zoomTo(viewer.entities); } /** * 动态添加气泡窗口 */ function onload(Cesium) { viewer = new Cesium.Viewer('map3d', { //infoBox: false, //点击要素之后显示的信息,默认true imageryProvider: new Cesium.UrlTemplateImageryProvider({ url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali" }) }); scene = viewer.scene; globe = viewer.scene.globe; viewer.scene.undergroundMode = true; //设置开启地下场景 viewer.scene.screenSpaceCameraController.minimumZoomDistance = -1000; //设置相机最小缩放距离,距离地表-1000米 viewer.scene.terrainProvider.isCreateSkirt = false; // 关闭裙边 viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏logo for (let n = 0; n < nEntity; n++) { //添加三维气泡点 气泡点["坡度图-" + n] = viewer.entities.add({ id: "坡度图-" + n, position: Cesium.Cartesian3.fromDegrees(126.62286665737508 + n / 10, 45.768049657165975 + n / 10, 180 + 0.5), billboard: { image: '../img/icon-position.png', 40, height: 40, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND } }); var divId = "坡度图-" + (n + 1); let lastpostion = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, 气泡点["坡度图-" + n].position._value); refreshInfoContentPos(divId, lastpostion) $("#" + divId).show(); } viewer.zoomTo(viewer.entities); viewer.scene.globe.depthTestAgainstTerrain = false; var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); var _position, _pm_position, _cartesian; var camera = viewer.scene.camera; handler.setInputAction(function(movement) { }, Cesium.ScreenSpaceEventType.LEFT_CLICK); //每帧渲染结束监听 viewer.scene.postRender.addEventListener(function(e) { for (let n = 0; n < nEntity; n++) { let entity = 气泡点["坡度图-" + n]; // console.log(entity); // //世界坐标创建 // let cartesian3 = new Cesium.Cartesian3(entity.position._value.x, // entity.position._value.y, // entity.position._value.z); // let ellipsoid = viewer.scene.globe.ellipsoid; // //世界坐标转经纬度（弧度） // let cartographic = ellipsoid.cartesianToCartographic(cartesian3); // console.log("cartographic", cartographic); // //弧度--转---经纬度 // let lat = Cesium.Math.toDegrees(cartographic.latitude); // let lng = Cesium.Math.toDegrees(cartographic.longitude); // let alt = cartographic.height; // //创建经纬度（弧度） // let cartographic2 = Cesium.Cartographic.fromDegrees(lng, lat, alt); // //经纬度-转-世界坐标 // cartesian3 = ellipsoid.cartographicToCartesian(cartographic2); let lastpostion = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, entity.position._value); if (entity["lastpostion"] != null && entity["lastpostion"].x == lastpostion.x && entity["lastpostion"].y == lastpostion.y) { continue; } entity["lastpostion"] = lastpostion; console.log("坡度图-" + n + "：lastpostion", lastpostion); let divId = "坡度图-" + (n + 1) refreshInfoContentPos(divId, lastpostion) } }); function refreshInfoContentPos(divId, lastpostion) { let popw = $("#" + divId).width(); let poph = $("#" + divId).height(); $("#" + divId).css({ left: lastpostion.x + "px", top: lastpostion.y - poph + "px" }); } viewer.scene.camera.moveEnd.addEventListener(function() { }); } </script> </html>
