zoukankan      html  css  js  c++  java
  • cesium 之自定义气泡窗口 infoWindow 后续优化篇(附源码下载)

    前言

    cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材。

    该篇文章实现的自定义气泡窗口是基于修改 cesium 源代码基础上,这种做法只是援兵之计,凑合应付的,投机取巧罢了,实际上是不太适合的,cesium api 更新版本替换,又得手动的去设置一下源代码;本篇则是从另一个角度真正的实现了自定义气泡窗口,气泡窗口的样式定义则是 leaflet 风格的,效果截图如下:

    具体实现思路

    • 气泡窗口 css 样式
    /*leaflet风格气泡窗口样式模板*/
    .leaflet-popup {
    position: absolute;
    text-align: center;
    }
    .leaflet-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 4px 0 0;
    text-align: center;
     18px;
    height: 14px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
    }
    .leaflet-popup-content-wrapper {
    text-align: center;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
    padding: 1px;
    text-align: left;
    border-radius: 12px;
    }
    .leaflet-popup-content {
    margin: 13px 19px;
    line-height: 1.4;
    }
    .leaflet-popup-tip-container {
    margin: 0 auto;
     40px;
    height: 20px;
    position: relative;
    overflow: hidden;
    }
    .leaflet-popup-tip {
    background: white;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
     17px;
    height: 17px;
    padding: 1px;
    margin: -10px auto 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    }
    • 气泡窗口 div 面板
    //动态添加气泡窗口DIV
    var infoDiv = '<div id="trackPopUp" style="display:none;">'+
    '<div id="trackPopUpContent" class="leaflet-popup" style="top:5px;left:0;">'+
    '<a class="leaflet-popup-close-button" href="#">×</a>'+
    '<div class="leaflet-popup-content-wrapper">'+
    '<div id="trackPopUpLink" class="leaflet-popup-content" style="max- 300px;"></div>'+
    '</div>'+
    '<div class="leaflet-popup-tip-container">'+
    '<div class="leaflet-popup-tip"></div>'+
    '</div>'+
    '</div>'+
    '</div>';
    $("#"+cesium.mapDivId).append(infoDiv);

    气泡窗口 div 面板看实际情况的,也可以设置在页面 htm l里面,我这里由于需要,是在 js 动态添加进来的。

    更多的详情见GIS之家小专栏

    文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

  • 相关阅读:
    [LeetCode]2. Add Two Numbers链表相加
    Integration between Dynamics 365 and Dynamics 365 Finance and Operation
    向视图列添加自定义图标和提示信息 -- PowerApps / Dynamics365
    Update the Power Apps portals solution
    Migrate portal configuration
    Use variable to setup related components visible
    Loyalty management on Retail of Dynamic 365
    Modern Fluent UI controls in Power Apps
    Change screen size and orientation of a canvas app in Power App
    Communication Plan for Power Platform
  • 原文地址:https://www.cnblogs.com/giserhome/p/7069155.html
Copyright © 2011-2022 走看看