• Cesium对三维模型进行查询并弹框展示信息

    一、简介

    Cesium三维模型3dtiles，然后添加鼠标交互事件进行查询，弹出信息框。

    二、示例代码

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <link rel="stylesheet" href="./css/common.css">
    7.     <title>
    8.         三维模型查询
    9.     title>
    10.     <script src="./js/config.js">script>
    11.     <script src="./scripts/vue.min.js">script>
    12.     <script type="text/javascript" src="../anov-gis-sdk/index.js">script>
    13.     <link rel="stylesheet" href="../anov-gis-sdk/index.css">
    14. head>
    15.  
    16. <body>
    17.     <div id="cesiumContainer">
    18.     div>
    19. body>
    20.  
    21. html>
    22.  
    23. <script>
    24.     var app = new Vue({
    25.         el: '#cesiumContainer',
    26.         mounted() {
    27.             // 初始化
    28.             window.viewer = new ANOVGIS.Viewer("cesiumContainer", {
    29.                 vrButton: false,
    30.                 baseLayerPicker: true,
    31.                 fullscreenButton: true,
    32.                 homeButton: true,
    33.                 sceneModePicker: true,
    34.                 navigationHelpButton: true
    35.             });
    36.             ANOVGIS.WidgetsControl.showAllControls({
    37.  
    38.             });
    39.             //影像
    40.             var baselayer = ANOVGIS.ImageryLayerFactory.createImageryLayer(
    41.                 ANOVGIS.ImageryType.TDT, {
    42.                 style: "img",
    43.                 key: globalConfig.tdtKey
    44.             }
    45.             );
    46.  
    47.             viewer.addBaseImageryLayer(baselayer);
    48.             // 三维模型加载
    49.             let layer = new ANOVGIS.TilesetLayer();
    50.             viewer.addLayer(layer);
    51.             let tileset = new ANOVGIS.Tileset({
    52.                 url: 'http://172.16.223.165/gis-share/beijingchouxi/tileset.json',
    53.                 highlight: {//鼠标滑过样式
    54.                     color: "#ff0000"
    55.                 },
    56.                 selectedHighlight:{//点击选中效果
    57.                     color: "rgba(255,0.0,255,0.8)"
    58.                 }
    59.             })
    60.             // 设置模型样式
    61.             const style = new ANOVGIS.TilesetStyle()
    62.             style.color = {
    63.                 conditions: [
    64.                     ['Number(${floor}) >= 40', 'rgba(45, 0, 75, 0.5)'],
    65.                     ['Number(${floor}) >= 30', 'rgb(102, 71, 151)'],
    66.                     ['Number(${floor}) >= 20', 'rgb(170, 162, 204)'],
    67.                     ['Number(${floor}) >= 10', 'rgb(248, 176, 87)'],
    68.                     ['Number(${floor}) >= 5', 'rgb(198, 106, 11)'],
    69.                     ['true', 'rgb(127, 59, 8)'],
    70.                 ],
    71.             }
    72.             tileset.setStyle(style)
    73.             layer.addGraphic(tileset);
    74.             //绑定点击弹框
    75.             layer.bindPopup({
    76.                 viewer: viewer,
    77.                 showTitle: true,
    78.                 useDefaultHtmlTemplate: true,//用默认模板
    79.             });
    80.             layer.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
    81.                 let infoData = {
    82.                     title: e.feature.getProperty('name1'),
    83.                     fieldsMap: [
    84.                         {
    85.                             nameC: '名称：',
    86.                             value: e.feature.getProperty('name1')
    87.                         }, {
    88.                             nameC: '楼层：',
    89.                             value: e.feature.getProperty('floor')
    90.                         }]
    91.                 }
    92.                 layer.popup.show(e.position, infoData);
    93.                 console.log(e);
    94.             })
    95.  
    96.             // 绑定鼠标MOUSE_MOVE事件
    97.             layer.bindTooltip({
    98.                 viewer: viewer,
    99.                 showTitle: true,
    100.                 offsetY: '-10',
    101.                 useDefaultHtmlTemplate: true,//用默认模板
    102.             });
    103.             layer.addEventListener(ANOVGIS.MouseEventType.MOUSE_MOVE, (e) => {
    104.                 let infoData = {
    105.                     title: e.feature.getProperty('name1'),
    106.                     fieldsMap: [
    107.                         {
    108.                             nameC: '名称：',
    109.                             value: e.feature.getProperty('name1')
    110.                         }, {
    111.                             nameC: '楼层：',
    112.                             value: e.feature.getProperty('floor')
    113.                         }]
    114.                 }
    115.                 layer.tooltip.show(e.position, infoData);
    116.             })
    117.  
    118.             // 定位
    119.             viewer.flyToTileset(tileset,2,0.5,-35);
    120.         }
    121.     });
    122. script>

  • 相关阅读:
    【超详细】手把手教你STM32上报温湿度到腾讯云
    2022世界VR产业大会圆满收官，酷雷曼惊艳亮相！
    【Leetcode刷题Python】300. 最长递增子序列
    导航app为什么知道还有几秒变绿灯？
    Java处理数据成为树状结构
    6.串口、时钟
    MySQL——命令行客户端的字符集问题
    对数据排序
    学信息系统项目管理师第4版系列28_组织级项目管理和量化项目管理
    [创业之路-120] ：全程图解：软件研发人员如何从企业的顶层看软件产品研发？
  • 原文地址：https://blog.csdn.net/u014556081/article/details/132971036