【Cesium】自定义标签弹窗，动态悬浮显示

最新推荐文章于 2024-03-15 09:00:00 发布

如一一

最新推荐文章于 2024-03-15 09:00:00 发布

阅读量3.3k

点赞数 4

分类专栏： cesium js 文章标签： 3d js javascript html ajax

本文链接：https://blog.csdn.net/m0_51687040/article/details/119801435

版权

cesium 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

cesium 添加自定义标注显示

目标：通过ajax请求到后台数据做处理，并显示在地图上，弹出自定义弹框

开始

创建一个html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css" />
    <script src="./Cesium/Cesium.js"></script>
    <script src="./jquery.min.js"></script>
    <title>Document</title>
    <style>
      #cesiumContainer {
        width: 100%;
        height: 100vh;
      }
      .father{
          position: absolute;
          top: 100px;
          left: 100px;
      }
      .father li{
          list-style: none;
          line-height: 50px;
      }
      .father a{
          color: aliceblue;
      }
      //弹框基本样式
      .son{
          position: absolute;
          left: 1450px;
          top: 418px;
          background-color: rgb(148, 142, 142,0.5);
          color: rgb(253, 253, 253);
          border-radius: 10px;
          padding: 20px;
      }
    </style>
  </head>
  <body>
    <div>
      <div id="cesiumContainer"></div>
      <div class="father">
          <ul>
            <li onclick="addRain()"><a href="#" >城镇预报</a></li>
            <li onclick="detale()"><a href="#" >清除</a></li>
          </ul>
      </div>
      <div class="son" style="display: none;">弹框插槽</div>
    </div>
  </body>
  //需要在最后引入
  <script src="./index.js"></script>
  <script src="./arr.js"></script>
</html>

初始化地图

var viewer = new Cesium.Viewer("cesiumContainer", {
  infoBox: false,
  selectionIndicator: false,
  navigation: false,
  animation: false,
  timeline: false,
  baseLayerPicker: false,
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  shouldAnimate: false,
});

具体功能


let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
// 清除实体
function detale() {
  viewer.entities.removeAll();
  // 清除移动事件
  handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

// 请求数据
function addRain() {
  detale();
  var todo = [];
  $.ajax({
    url: "", //	请求的地址
    type: "POST",
    headers: {
      "X-Requested-With": XMLHttpRequest,
    },
    success: function (result) {
      console.log(result);
      //数据处理
      result.forEach((item) => {
        console.log(item);
        let obj = {};
        //实体的经纬度（必须）
        obj.lon = item.lon;
        obj.lat = item.lat;
        //以下看个人需求
        obj.stationName = item.stationName;
        obj.maxTemp = item.maxTemp;
        obj.minTemp = item.minTemp;
        obj.stationId= item.stationId;
        obj.rain = item.rain;
        obj.windS = item.windS;
        obj.windV = item.windV;
        obj.windD = item.windD;
        obj.weather = item.weather;//
        obj.color = item.color;//颜色
        todo.push(obj);
      });
      todo.forEach((item) => {
        addLabel(item);//调用创建实体的方法
        addbounced(); //为实体添加事件
      });
    },
    error: function (error) {
      console.log("error", error);
    },
  });
}


// 添加实体
function addLabel(item) {
  viewer.entities.add({
    id: item.stationId,
    name: item.stationName,//地图显示的名称
    show: true,
    position: Cesium.Cartesian3.fromDegrees(item.lon, item.lat),//实体位置（经纬度）
    description: item, //将实体需要弹出的信息储存在这里
    label: {
      text: item.stationName,
      fillColor: Cesium.Color.WHITE,
      scale: 0.5,
      font: "normal 40px MicroSoft YaHei",
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      pixelOffset: new Cesium.Cartesian2(0, 30),
      outlineWidth: 20,
      outlineColor: Cesium.Color.BLACK,
    },
    billboard: {
      image: "./weather/weatherDay/" + Math.floor(item.minTemp) + ".gif",//为实体添加图片
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
  });
}

// 移动事件
function addbounced() {
  var scene = viewer.scene;
  var num = {};
  // 创建移动事件
  handler.setInputAction(function (movement) {
    if (scene.mode !== Cesium.SceneMode.MORPHING) {
      var pickedObject = scene.pick(movement.endPosition);
      if (
        scene.pickPositionSupported &&
        Cesium.defined(pickedObject) &&
        pickedObject.id !== ""
      ) {
        $(".son").html("");//每次弹出时先清空
        var windowPosition = movement.startPosition;//获取屏幕坐标
        num.x = windowPosition.x + 50;
        num.y = windowPosition.y + 50;
        //获取弹出框需要显示的内容，为创建时的 description 属性
        var todo = pickedObject.id._description._value;
        //修改弹出框
        $(".son").css("display", "block");
        $(".son").css("left", num.x);
        $(".son").css("top", num.y);
        // 内容
        //es6模板字符串
        var addHtml = `<p>
        <img src="./weather/weatherDay/${Math.floor(
          todo.maxTemp
        )}.gif" style="width: 40px;margin-left: 40px;">
        </p>
		 <span style="width:20px;"></span>${todo.windV}</p>
        <p>最小雨量：${todo.minTemp}</p>
         <p>最大雨量：${todo.maxTemp}</p>`;
        $(".son").append(addHtml);
      } else {
        $(".son").html("");
        $(".son").css("display", "none");
      }
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

这个是自己写的一个小功能，还不够完善，需要的话直接拿去用

如一一

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Cesium】自定义标签弹窗，动态悬浮显示

cesium 添加自定义标注显示目标：通过ajax请求到后台数据做处理，并显示在地图上，弹出自定义弹框开始创建一个html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport"
复制链接

扫一扫