cesium_custom_popup

v1.1.4

Published

a year ago

基于cesium开发的一个自定义弹窗类,可以实例化创建普通弹窗,媒体弹窗,交互弹窗,实时更新弹窗。可以自定义DIY弹窗样式。实时变更弹窗位置以。实时变更弹窗内容功能。自定义弹窗事件

Downloads

0High
0Medium
0Low

kangweitao

gis cesium popup custom_popup cesium_custom_popup

cesium_custom_popup

一.关于项目

1.背景

cesium.js 是一款优秀三维地理可视化框架，由于 cesium.js 框架自身没有内置弹窗组件，但在业务开发中，经常遇到各种定制化开发的弹窗提示组件的需求。在此背景下，cesium_custom_popup 库封装开发了一个可实例化的自定义弹窗类。只需一两行代码，就可以 DIY 得到你想要的弹窗。

2.版本

1.1.2

3.作者

name:	康伟涛
e-mail: [email protected]

客官觉得满意，就施舍个小星星吧。谢谢！
GitHub：https://github.com/giserKangweitao/cesium_custom_popup
Gitee: https://gitee.com/giser_kangweitao/cesium_custom_popup

二.功能特性

特性 1：减少开发量，只需实例化弹窗类就可以得到一个自定义弹窗。
特性 2：自由定制化，通过 html 字符串即可构建：普通弹窗，媒体弹窗，交互弹窗，实时更新弹窗。
特性 3：样式可编辑，通过 option 配置项，来 DIY 你想要的弹窗的样式。
特性 4：实时性更新，通过实例方法 updateOption(),updateHtml()来实时更新弹窗位置和内容。
特性 5：自定义交互，通过示例方法 onClickPopup(),onMouseOverPopup(),onMouseOutPopup()定义交互事件。

三.快速开始

1.安装

npm install cesium_custom_popup

2.引入

import CustomPopup from "cesium_custom_popup";

3.使用

const popup = new CustomPopup(position, html, type, [option]);

四.参数

position

作用：弹窗显示位置
类型：数组
必需参数：是
const position = [lng, lat, elevation];

html

作用：弹窗嵌入的内容

类型：字符串

必需参数：是

const html = `
        <ul style="width: 100%; height: 100%;font-size:22px; color:white;padding top:60px;padding-left:80px">
        <li>测试文字111</li>
        <li>测试文字222</li>
        <li>测试文字333</li>
        </ul>`;

type

作用：弹窗类型
类型：字符串
必需参数：是
可选值：
| 参数 | 含义 | | ------------- | ------------ | | "common" | 普通弹窗 | | "medium" | 媒体弹窗 | | "interaction" | 交互弹窗 | | "update" | 实时更新弹窗 |
const type = `common`;
const type = `medium`;
const type = `interaction`;
const type = `update`;

option

作用：弹窗配置项

类型：对象

必需参数：否

const option = {
title, // 弹窗标题，字符串，非必须参数
showTitle, // 是否显示标题，布尔值，非必须参数
showClose, // 是否显示关闭按钮，布尔值，非必须参数
lineHeight, // 连接线高度，整数，非必须参数
lineWidth, // 连接线宽度，整数，非必须参数
lineColor, // 连接线颜色，十六进制颜色值，非必须参数
popupAt, // 弹窗弹出位置，字符串，非必须参数，('left' 或 'center' 或 'right')
borderColor, // 弹窗边框颜色，十六进制颜色值，非必须参数
backgroundColor, // 弹窗背景颜色，十六进制颜色值，非必须参数
scale, // 弹窗缩放比例，整数或浮点数，非必须参数
xyRatio， //弹框宽高比，数组，非必须参数
};

五.方法

addTo()
作用：添加弹窗
参数：viewer
```
popup.addTo(viewer);
```
removeFrom()
作用：移除弹窗
参数：viewer
```
popup.removeFrom(viewer);
```
updatePosition()
作用：更新弹窗位置
参数：position
```
popup.updatePosition(position);
```
updateHtml()
作用：更新弹窗内容
参数：html
```
popup.updateHtml(html);
```
onClosePopup()
作用：关闭弹窗时触发的事件
参数：callback
```
popup.onClosePopup(callback);
```
onClickPopup()
作用：鼠标点击弹窗时触发的事件
参数：callback
```
popup.onClickPopup(callback);
```
onMouseOverPopup()
作用：鼠标移入弹窗时触发的事件
参数：callback
```
popup.onMouseOverPopup(callback);
```
onMouseOutPopup()
作用：鼠标移出弹窗时触发的事件
参数：callback
```
popup.onMouseOutPopup(callback);
```

六.示例

1.代码

<!--
 * @Description: cesium自定义弹窗Demo
 * @Version: 1.0
 * @Autor: Kangweitao
 * @Date: 2023-09-22 17:20:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-09-26 22:34:31
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>cesium自定义弹窗Demo</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      #cesium-container {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }
    </style>

    <link
      rel="stylesheet"
      href="//lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/cesium/1.86.1/Widgets/widgets.min.css"
    />
    <script src="//lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/cesium/1.90.0/Cesium.js"></script>
    <!-- 使用unpkg -->
    <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
  </head>

  <body>
    <div id="cesium-container"></div>
  </body>
  <script type="module">
    import CustomPopup from "./cesium_custom_popup/dist/index.min.js";

    Cesium.Ion.defaultAccessToken = "自己token";
    const viewer = new Cesium.Viewer("cesium-container");
    viewer.scene.debugShowFramesPerSecond = true; // 显示帧率

    const listHtml = `
        <ul style="width: 100%; height: 100%;font-size:22px; color:white;padding-top:60px;padding-left:80px">
        <li>测试文字111</li>
        <li>测试文字222</li>
        <li>测试文字333</li>
        <button id="btn">按钮</button>
        </ul>
    `;
    const p1 = new CustomPopup(
      [120.311889, 31.501064, 0],
      listHtml,
      "interaction",
      { lineHeight: 300 }
    );
    p1.addTo(viewer);
    p1.onClosePopup(() => {
      console.log("关闭了p1");
    });
    p1.onClickPopup((e) => {
      if (e.target.id === "btn") {
        alert("点击了p1-按钮");
      }
    });

    const videoHtml = ` 
        <video class="video" style="margin-top:10px;width: 100%; height: 100%;" controls autoplay loop>
            <source src="./video/test.mp4" type="video/mp4">
        </video>
   `;
    const p2 = new CustomPopup(
      [120.311889, 31.505064, 0],
      videoHtml,
      "medium",
      {
        title: "自定义视频弹窗",
        popupAt: "center",
        borderColor: "#f6a053",
        backgroundColor: "#f6a05380",
        lineColor: "#f6a053",
        showClose: true,
      }
    );
    p2.addTo(viewer);

    const imageHtml = ` 
        <div class="image" style="width: 100%; height: 100%;background-image: url('./img/popup_bg.png');background-position: center center;background-size: cover;">
            <div class="title" style="width: 100%; height: 20%;padding-top:5%;padding-left:2%;font-weight: bolder; color:white;font-size:140%;line-hignt:20%;">自定义图片背景弹窗</div>
        </div>
   `;
    const p3 = new CustomPopup([120.315889, 31.503064, 0], listHtml, "update", {
      title: "自定义实时更新弹窗",
      popupAt: "left",
      borderColor: "#0a84d6",
      backgroundColor: "#0a84d680",
      lineColor: "#0a84d6",
      showClose: false,
      showTitle: true,
      lineHeight: 100,
    });
    p3.addTo(viewer);
    let lng = 120.315889;
    let lat = 31.503064;
    setInterval(() => {
      const html = `
        <ul style="width: 100%; height: 100%;font-size:22px; color:white;padding-top:60px;padding-left:50px">
        <li>经度：${lng.toFixed(6)}</li>
        <li>纬度：${lat.toFixed(6)}</li>
        </ul>
    `;
      p3.updateHtml(html);
      p3.updatePostion([lng, lat, 0]);
      lng += 0.00001;
      lat -= 0.00001;
    }, 500);

    const p4 = new CustomPopup(
      [120.312889, 31.502664, 0],
      imageHtml,
      "common",
      {
        popupAt: "center",
        borderColor: "#0a84d600",
        backgroundColor: "#0a84d600",
        lineColor: "#0bd8e180",
        showClose: false,
        showTitle: false,
        lineHeight: 100,
      }
    );
    p4.addTo(viewer);

    const chromHtml = `
    <img src="./img/chrom.gif" style="width: 100%; height: 100%;">`;
    const p5 = new CustomPopup(
      [120.315889, 31.500664, 0],
      chromHtml,
      "common",
      {
        lineWidth: 10,
        lineHeight: 10,
        scale: 1.0,
        popupAt: "center",
        borderColor: "#0a84d600",
        backgroundColor: "#0a84d600",
        lineColor: "#4e81b2",
        showClose: false,
        showTitle: false,
        xyRatio: [2, 2],
      }
    );
    p5.addTo(viewer);

    const warningHtml = `
    <img id="warning" src="./img/warning.gif" style=" position:absolute;left:0px; top:10px; width: 100%; height: 100%;">`;
    const p6 = new CustomPopup(
      [120.316889, 31.504664, 0],
      warningHtml,
      "interaction",
      {
        lineHeight: 300,
        scale: 1.0,
        popupAt: "center",
        borderColor: "#0a84d600",
        backgroundColor: "#0a84d600",
        lineColor: "#484848",
        showClose: false,
        showTitle: false,
        xyRatio: [1, 1],
      }
    );
    p6.addTo(viewer);
    p6.onClickPopup(() => {
      alert("点击了p1-报警");
    });
    p6.onMouseOverPopup(() => {
      alert("移入p1-报警");
    });
    p6.onMouseOutPopup(() => {
      alert("移出p1-报警");
    });

    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(
        ...[120.312889, 31.505664],
        2000
      ),
    });
  </script>
</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

cesium_custom_popup

一.关于项目

1.背景

2.版本

3.作者

二.功能特性

三.快速开始

1.安装

2.引入

3.使用

四.参数

五.方法

六.示例

1.代码

2.效果