zoukankan      html  css  js  c++  java
  • codepen demo

    
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta charset="utf-8" />
        <script src="../Build/Cesium/Cesium.js"></script>
        <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"
                integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
                crossorigin="anonymous"></script>
        <script src="../Source/bootstrap.min.js"></script>
        <script src="../Source/respond.min.js"></script>
        <link href="../ThirdParty/bootstrap.min.css" rel="stylesheet"/>
        <!--<link href="../sdk/third/css/essentials.css" rel="stylesheet" />-->
        <link href="../sdk/third/jstree/themes/proton/style.min.css" rel="stylesheet" />
        <link href="../sdk/viz/ui/default.css" rel="stylesheet" />
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <style type="text/css">
            canvas{min-height:600px}
            html, body{ border: 0;padding: 0;margin: 0; overflow-x:hidden;}
            .pr0 {padding-right: 0}
            .mt10{margin-top:10px}
            #bv_DefaultToolBar{ top:50px!important}
        </style>
    </head>
    <body>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" id="myTabs">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">地图</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">模型</a></li>
        </ul>
    
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="home">
                <nav class="navbar navbar-default" style="margin-bottom: 0px">
                    <div class="container-fluid">
    
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" style="padding-left: 0">
                            <form class="navbar-form navbar-left">
                                <div class="btn-group" data-toggle="buttons" id="opts">
                                    <label class="btn btn-default active">
                                        <input type="radio" name="opt" id="toolFree" autocomplete="off" checked>
                                        <i class="fa fa-arrows"></i>
                                        自由模式
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" name="opt" id="toolAddMark" autocomplete="off">
                                        <i class="fa fa-map-marker"></i>
                                        加标记
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" name="opt" id="toolClear" autocomplete="off">
                                        <i class="fa fa-eraser"></i>
                                        清除绘制
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" name="opt" id="toolDrawLine" autocomplete="off">
                                        <i class="fa fa-minus"></i>
                                        绘制线段
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" name="opt" id="toolDrawCircle" autocomplete="off">
                                        <i class="fa fa-circle-o"></i>
                                        绘制圆形
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" name="opt" id="toolDrawRect" autocomplete="off">
                                        <i class="fa fa-square-o"></i>
                                        绘制矩形
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" name="opt" id="toolDrawPoly" autocomplete="off">
                                        <i class="fa fa-map-o"></i>
                                        绘制多边形
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" name="opt" id="toolPickBuilding" autocomplete="off">
                                        <i class="fa fa-hand-o-up"></i>
                                        选取建筑
                                    </label>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-default">
                                        <i class="fa fa-eye"></i>
                                        保存视角
                                    </button>
                                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#flyToModal">
                                        <i class="fa fa-mail-forward"></i>
                                        跳转视角
                                    </button>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="输入关键字">
                                </div>
                                <button type="submit" class="btn btn-primary">搜索</button>
                            </form>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
            <div id="message" class="bg-warning" style="padding-top: 5px; padding-bottom: 5px; text-align: center; display: none"></div>
                <div class="row">
                    <div class="col-md-2">
                        <div class="panel">
                            <div class="panel-heading">
                                <i class="fa fa-map"></i>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="cbxPinLayer" checked="checked">
                                    标注层
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="cbxRoad" value="">
                                    道路及基本标注
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="cbxTestArc" value="">
                                    测试Arcgis Server的澳大利亚电网地图
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="satellite" checked>
                                    卫星地图
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="vec">
                                    矢量地图
                                </label>
                            </div>
                        </div>
                        <div class="panel">
                            <div class="panel-heading">
                                3D模型
                            </div>
                            <div>
                                <button id="poly-show" class="btn btn-primary">显示</button>
                                <button id="poly-hide" class="btn btn-default">隐藏</button>
                            </div>
                        </div>
                    </div>
    
                    <div class="col-md-10">
                        <div id="cesiumContainer" style="height:600px"></div>
                        <table class="table table-striped  table-hover table-condensed">
                            <thead>
                            <tr>
                                <th>建筑ID</th>
                                <th>名 称</th>
                                <th>竣工日期</th>
                                <th>所在街道</th>
                                <th>建筑面积</th>
                                <th>投资额</th>
                                <th>项目类型</th>
                                <th>投资类型</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>&nbsp;</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            </tbody>
                        </table>
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
    
                </div>
            </div>
        <div role="tabpanel" class="tab-pane fade" id="profile">
            <div id="viewport" style="100%">
            </div>
                <div id="messages"></div>
            </div>
    
        </div>
        <!-- Modal -->
        <!-- 跳转至经纬度坐标 -->
    <div class="modal fade" id="flyToModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">请输入跳转坐标</h4>
                </div>
                <div class="modal-body row">
                    <div class="col-sm-1 pr0">经度</div>
                    <div class="col-sm-4">
                        <input type="text" id="jumpLon"/>
                    </div>
                    <div class="col-sm-1 pr0">纬度</div>
                    <div class="col-sm-4">
                        <input type="text" id="jumpLat"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="goLocation" onclick="goLocation();">确定</button>
                </div>
            </div>
        </div>
    </div>
        <!-- 加标签 -->
        <div class="modal fade" id="addPinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel1">请输入标签内容和样式</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-sm-2 pr0">标签背景色</div>
                            <div class="col-sm-4">
                                <select id="pinColor" class="form-control">
                                    <option value="MIDNIGHTBLUE" style="background-color:#191970">&nbsp;</option>
                                    <option value="DIMGRAY" style="background-color:#696969">&nbsp;</option>
                                    <option value="SLATEGRAY" style="background-color:#708090">&nbsp;</option>
                                    <option value="SLATEGREY" style="background-color:#708090">&nbsp;</option>
                                    <option value="LIGHTSLATEGRAY" style="background-color:#778899">&nbsp;</option>
                                    <option value="MAROON" style="background-color:#800000">&nbsp;</option>
                                    <option value="PURPLE" style="background-color:#800080">&nbsp;</option>
                                    <option value="OLIVE" style="background-color:#808000">&nbsp;</option>
                                    <option value="GRAY" style="background-color:#808080">&nbsp;</option>
                                    <option value="BLACK" style="background-color:#000000">&nbsp;</option>
                                    <option value="NAVY" style="background-color:#000080">&nbsp;</option>
                                    <option value="DARKBLUE" style="background-color:#00008B">&nbsp;</option>
                                    <option value="MEDIUMBLUE" style="background-color:#0000CD">&nbsp;</option>
                                    <option value="BLUE" style="background-color:#0000FF">&nbsp;</option>
                                    <option value="DARKGREEN" style="background-color:#006400">&nbsp;</option>
                                    <option value="GREEN" style="background-color:#008000">&nbsp;</option>
                                    <option value="TEAL" style="background-color:#008080">&nbsp;</option>
                                    <option value="DARKCYAN" style="background-color:#008B8B">&nbsp;</option>
                                    <option value="DEEPSKYBLUE" style="background-color:#00BFFF">&nbsp;</option>
                                    <option value="DARKTURQUOISE" style="background-color:#00CED1">&nbsp;</option>
                                    <option value="MEDIUMSPRINGGREEN" style="background-color:#00FA9A">&nbsp;</option>
                                    <option value="LIME" style="background-color:#00FF00">&nbsp;</option>
                                    <option value="SPRINGGREEN" style="background-color:#00FF7F">&nbsp;</option>
                                    <option value="AQUA" style="background-color:#00FFFF">&nbsp;</option>
                                    <option value="CYAN" style="background-color:#00FFFF">&nbsp;</option>
                                    <option value="DODGERBLUE" style="background-color:#1E90FF">&nbsp;</option>
                                    <option value="LIGHTSEAGREEN" style="background-color:#20B2AA">&nbsp;</option>
                                    <option value="FORESTGREEN" style="background-color:#228B22">&nbsp;</option>
                                    <option value="SEAGREEN" style="background-color:#2E8B57">&nbsp;</option>
                                    <option value="DARKSLATEGRAY" style="background-color:#2F4F4F">&nbsp;</option>
                                    <option value="LIMEGREEN" style="background-color:#32CD32">&nbsp;</option>
                                    <option value="MEDIUMSEAGREEN" style="background-color:#3CB371">&nbsp;</option>
                                    <option value="TURQUOISE" style="background-color:#40E0D0">&nbsp;</option>
                                    <option value="ROYALBLUE" style="background-color:#4169E1">&nbsp;</option>
                                    <option value="STEELBLUE" style="background-color:#4682B4">&nbsp;</option>
                                    <option value="DARKSLATEBLUE" style="background-color:#483D8B">&nbsp;</option>
                                    <option value="MEDIUMTURQUOISE" style="background-color:#48D1CC">&nbsp;</option>
                                    <option value="INDIGO" style="background-color:#4B0082">&nbsp;</option>
                                    <option value="DARKOLIVEGREEN" style="background-color:#556B2F">&nbsp;</option>
                                    <option value="CADETBLUE" style="background-color:#5F9EA0">&nbsp;</option>
                                    <option value="CORNFLOWERBLUE" style="background-color:#6495ED">&nbsp;</option>
                                    <option value="MEDIUMAQUAMARINE" style="background-color:#66CDAA">&nbsp;</option>
                                    <option value="SLATEBLUE" style="background-color:#6A5ACD">&nbsp;</option>
                                    <option value="OLIVEDRAB" style="background-color:#6B8E23">&nbsp;</option>
                                    <option value="MEDIUMSLATEBLUE" style="background-color:#7B68EE">&nbsp;</option>
                                    <option value="LAWNGREEN" style="background-color:#7CFC00">&nbsp;</option>
                                    <option value="CHARTREUSE" style="background-color:#7FFF00">&nbsp;</option>
                                    <option value="AQUAMARINE" style="background-color:#7FFFD4">&nbsp;</option>
                                    <option value="SKYBLUE" style="background-color:#87CEEB">&nbsp;</option>
                                    <option value="LIGHTSKYBLUE" style="background-color:#87CEFA">&nbsp;</option>
                                    <option value="BLUEVIOLET" style="background-color:#8A2BE2">&nbsp;</option>
                                    <option value="DARKRED" style="background-color:#8B0000">&nbsp;</option>
                                    <option value="DARKMAGENTA" style="background-color:#8B008B">&nbsp;</option>
                                    <option value="SADDLEBROWN" style="background-color:#8B4513">&nbsp;</option>
                                    <option value="DARKSEAGREEN" style="background-color:#8FBC8F">&nbsp;</option>
                                    <option value="LIGHTGREEN" style="background-color:#90EE90">&nbsp;</option>
                                    <option value="MEDIUMPURPLE" style="background-color:#9370DB">&nbsp;</option>
                                    <option value="DARKVIOLET" style="background-color:#9400D3">&nbsp;</option>
                                    <option value="PALEGREEN" style="background-color:#98FB98">&nbsp;</option>
                                    <option value="DARKORCHID" style="background-color:#9932CC">&nbsp;</option>
                                    <option value="YELLOWGREEN" style="background-color:#9ACD32">&nbsp;</option>
                                    <option value="SIENNA" style="background-color:#A0522D">&nbsp;</option>
                                    <option value="BROWN" style="background-color:#A52A2A">&nbsp;</option>
                                    <option value="DARKGRAY" style="background-color:#A9A9A9">&nbsp;</option>
                                    <option value="DARKGREY" style="background-color:#A9A9A9">&nbsp;</option>
                                    <option value="LIGHTBLUE" style="background-color:#ADD8E6">&nbsp;</option>
                                    <option value="GREENYELLOW" style="background-color:#ADFF2F">&nbsp;</option>
                                    <option value="PALETURQUOISE" style="background-color:#AFEEEE">&nbsp;</option>
                                    <option value="LIGHTSTEELBLUE" style="background-color:#B0C4DE">&nbsp;</option>
                                    <option value="POWDERBLUE" style="background-color:#B0E0E6">&nbsp;</option>
                                    <option value="FIREBRICK" style="background-color:#B22222">&nbsp;</option>
                                    <option value="DARKGOLDENROD" style="background-color:#B8860B">&nbsp;</option>
                                    <option value="MEDIUMORCHID" style="background-color:#BA55D3">&nbsp;</option>
                                    <option value="ROSYBROWN" style="background-color:#BC8F8F">&nbsp;</option>
                                    <option value="DARKKHAKI" style="background-color:#BDB76B">&nbsp;</option>
                                    <option value="SILVER" style="background-color:#C0C0C0">&nbsp;</option>
                                    <option value="MEDIUMVIOLETRED" style="background-color:#C71585">&nbsp;</option>
                                    <option value="INDIANRED" style="background-color:#CD5C5C">&nbsp;</option>
                                    <option value="PERU" style="background-color:#CD853F">&nbsp;</option>
                                    <option value="CHOCOLATE" style="background-color:#D2691E">&nbsp;</option>
                                    <option value="TAN" style="background-color:#D2B48C">&nbsp;</option>
                                    <option value="LIGHTGRAY" style="background-color:#D3D3D3">&nbsp;</option>
                                    <option value="THISTLE" style="background-color:#D8BFD8">&nbsp;</option>
                                    <option value="ORCHID" style="background-color:#DA70D6">&nbsp;</option>
                                    <option value="GOLDENROD" style="background-color:#DAA520">&nbsp;</option>
                                    <option value="PALEVIOLETRED" style="background-color:#DB7093">&nbsp;</option>
                                    <option value="CRIMSON" style="background-color:#DC143C">&nbsp;</option>
                                    <option value="GAINSBORO" style="background-color:#DCDCDC">&nbsp;</option>
                                    <option value="PLUM" style="background-color:#DDA0DD">&nbsp;</option>
                                    <option value="BURLYWOOD" style="background-color:#DEB887">&nbsp;</option>
                                    <option value="LIGHTCYAN" style="background-color:#E0FFFF">&nbsp;</option>
                                    <option value="LAVENDER" style="background-color:#E6E6FA">&nbsp;</option>
                                    <option value="DARKSALMON" style="background-color:#E9967A">&nbsp;</option>
                                    <option value="VIOLET" style="background-color:#EE82EE">&nbsp;</option>
                                    <option value="PALEGOLDENROD" style="background-color:#EEE8AA">&nbsp;</option>
                                    <option value="LIGHTCORAL" style="background-color:#F08080">&nbsp;</option>
                                    <option value="KHAKI" style="background-color:#F0E68C">&nbsp;</option>
                                    <option value="ALICEBLUE" style="background-color:#F0F8FF">&nbsp;</option>
                                    <option value="HONEYDEW" style="background-color:#F0FFF0">&nbsp;</option>
                                    <option value="AZURE" style="background-color:#F0FFFF">&nbsp;</option>
                                    <option value="SANDYBROWN" style="background-color:#F4A460">&nbsp;</option>
                                    <option value="WHEAT" style="background-color:#F5DEB3">&nbsp;</option>
                                    <option value="BEIGE" style="background-color:#F5F5DC">&nbsp;</option>
                                    <option value="WHITESMOKE" style="background-color:#F5F5F5">&nbsp;</option>
                                    <option value="MINTCREAM" style="background-color:#F5FFFA">&nbsp;</option>
                                    <option value="GHOSTWHITE" style="background-color:#F8F8FF">&nbsp;</option>
                                    <option value="SALMON" style="background-color:#FA8072">&nbsp;</option>
                                    <option value="ANTIQUEWHITE" style="background-color:#FAEBD7">&nbsp;</option>
                                    <option value="LINEN" style="background-color:#FAF0E6">&nbsp;</option>
                                    <option value="LIGHTGOLDENRODYELLOW" style="background-color:#FAFAD2">&nbsp;</option>
                                    <option value="OLDLACE" style="background-color:#FDF5E6">&nbsp;</option>
                                    <option value="RED" style="background-color:#FF0000">&nbsp;</option>
                                    <option value="FUSCHIA" style="background-color:#FF00FF">&nbsp;</option>
                                    <option value="MAGENTA" style="background-color:#FF00FF">&nbsp;</option>
                                    <option value="DEEPPINK" style="background-color:#FF1493">&nbsp;</option>
                                    <option value="ORANGERED" style="background-color:#FF4500">&nbsp;</option>
                                    <option value="TOMATO" style="background-color:#FF6347">&nbsp;</option>
                                    <option value="HOTPINK" style="background-color:#FF69B4">&nbsp;</option>
                                    <option value="CORAL" style="background-color:#FF7F50">&nbsp;</option>
                                    <option value="DARKORANGE" style="background-color:#FF8C00">&nbsp;</option>
                                    <option value="ORANGE" style="background-color:#FFA500">&nbsp;</option>
                                    <option value="LIGHTPINK" style="background-color:#FFB6C1">&nbsp;</option>
                                    <option value="PINK" style="background-color:#FFC0CB">&nbsp;</option>
                                    <option value="GOLD" style="background-color:#FFD700">&nbsp;</option>
                                    <option value="PEACHPUFF" style="background-color:#FFDAB9">&nbsp;</option>
                                    <option value="NAVAJOWHITE" style="background-color:#FFDEAD">&nbsp;</option>
                                    <option value="MOCCASIN" style="background-color:#FFE4B5">&nbsp;</option>
                                    <option value="BISQUE" style="background-color:#FFE4C4">&nbsp;</option>
                                    <option value="MISTYROSE" style="background-color:#FFE4E1">&nbsp;</option>
                                    <option value="BLANCHEDALMOND" style="background-color:#FFEBCD">&nbsp;</option>
                                    <option value="PAPAYAWHIP" style="background-color:#FFEFD5">&nbsp;</option>
                                    <option value="LAVENDAR_BLUSH" style="background-color:#FFF0F5">&nbsp;</option>
                                    <option value="SEASHELL" style="background-color:#FFF5EE">&nbsp;</option>
                                    <option value="CORNSILK" style="background-color:#FFF8DC">&nbsp;</option>
                                    <option value="LEMONCHIFFON" style="background-color:#FFFACD">&nbsp;</option>
                                    <option value="FLORALWHITE" style="background-color:#FFFAF0">&nbsp;</option>
                                    <option value="SNOW" style="background-color:#FFFAFA">&nbsp;</option>
                                    <option value="YELLOW" style="background-color:#FFFF00">&nbsp;</option>
                                    <option value="LIGHTYELLOW" style="background-color:#FFFFE0">&nbsp;</option>
                                    <option value="IVORY" style="background-color:#FFFFF0">&nbsp;</option>
                                    <option value="WHITE" style="background-color:#FFFFFF">&nbsp;</option>
    
                                </select>
                            </div>
                            <div class="col-sm-3">标签文字(2个以内)</div>
                            <div class="col-sm-3">
                                <input type="text" id="pinLabel" class="form-control" />
                            </div>
                        </div>
                        <div class="row mt10">
                            <div class="col-sm-2">详细内容</div>
                            <div class="col-sm-10">
                                <input type="text" id="pinContent" class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="addPin();">添加</button>
                    </div>
                </div>
            </div>
        </div>
    
        <script src="/sdk/third/jstree/jstree.min.js"></script>
        <!--<script src="/sdk/third/jquery-slider/jquery-ui-slider-pips.min.js"></script>-->
        <script src="/sdk/viz/bimviz.js"></script>
    
        <script src="/sdk/viz/ui/DefaultMessageControl.js"></script>
        <script src="/sdk/viz/ui/DefaultToolBar.js"></script>
        <script src="/sdk/viz/ui/DefaultFileControl.js"></script>
        <script src="/sdk/viz/ui/DefaultSpaceControl.js"></script>
        <script src="/sdk/viz/ui/DefaultDomainControl.js"></script>
        <script src="/sdk/viz/ui/DefaultPropertyControl.js"></script>
        <script src="/sdk/viz/ui/DefaultSearchControl.js"></script>
        <script src="/sdk/viz/ui/DefaultMarkControl.js"></script>
        <script src="/sdk/viz/ui/DefaultMarkSimpleListControl.js"></script>
        <script src="/sdk/viz/ui/DefaultBuildingStoreyControl.js"></script>
        <script src="/sdk/viz/ui/DefaultRoamingSettingControl.js"></script>
    
    <script type="text/javascript">
        //var CesiumEngine = function (containerId) {
        //    this._containerId = containerId;
        //    this._viewer = null;
    
        //    show = new function () {
        //        _viewer =
        //            new Cesium.Viewer(_containerId, {
        //                animation: false, //是否显示动画控件
        //                baseLayerPicker: false, //是否显示图层选择控件
        //                geocoder: true, //是否显示地名查找控件
        //                timeline: false, //是否显示时间线控件
        //                sceneModePicker: true, //是否显示投影方式控件
        //                navigationHelpButton: false, //是否显示帮助信息控件
        //                infoBox: true, //是否显示点击要素之后显示的信息
        //                imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        //                    url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
        //                    layer: "tdtBasicLayer",
        //                    style: "default",
        //                    format: "image/jpeg",
        //                    tileMatrixSetID: "GoogleMapsCompatible",
        //                    show: false
        //                })
        //            });
        //    };
        //};
    
        //CesiumEngine.prototype.viewer = function () {
        //    alert('ok');
        //};
    
        //var ce = new CesiumEngine('cc');
        //ce.show();
    
    
    
        var bimEngine; var msgControl; var toolbar; var fileControl; var spaceControl; var domainControl; var propertyControl; var searchControl; var markControl;
        var storeyControl; var roamingControl; var bimevent;
        
        var viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false, //是否显示动画控件
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: true, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: true, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: true, //是否显示点击要素之后显示的信息
            imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
                layer: "tdtBasicLayer",
                style: "default",
                format: "image/jpeg",
                tileMatrixSetID: "GoogleMapsCompatible",
                show: false
            })
        });
        var scene = viewer.scene;
        var pinBuilder = new Cesium.PinBuilder();
    
        var vecLayer = null, roadLayer = null, electricLayers = null;
    
        /*
    
        viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
            layer: "tdtImgBasicLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
        }));
    
    
        viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
            layer: "tdtAnnoLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
        }));
        */
        
        var getEnumPropertyNames = function(obj) {
            var props = [];
            for (prop in obj) {
                props.push(prop + ': ' + obj[prop]);
            }
            return props;
        }
    
        var models = new Array();
        models[0] = { id: 'house1', name: 'house1', url: '../SampleData/house/house1.gltf', lon: 121.41, lat: 31.22, height: 0, pid: '4e027d42-f033-4bab-87f1-e34c8860b90e' };
        models[1] = { id: 'house2', name: 'house2', url: '../SampleData/house/house2.gltf', lon: 121.42, lat: 31.21, height: 0, pid: '918dcfaa-4568-4468-ba03-e379deaa99b7' };
        models[2] = { id: 'house3', name: 'house3', url: '../SampleData/house/house3.gltf', lon: 121.43, lat: 31.20, height: 0, pid: '2071736b-0054-4041-ad34-34f2e7a975e5' };
        models[3] = { id: 'house4', name: 'house4', url: '../SampleData/house/house4.gltf', lon: 121.44, lat: 31.22, height: 0, pid: '4e027d42-f033-4bab-87f1-e34c8860b90e' };
        models[4] = { id: 'house5', name: 'house5', url: '../SampleData/house/house5.gltf', lon: 121.41, lat: 31.21, height: 0, pid: '918dcfaa-4568-4468-ba03-e379deaa99b7' };
        models[5] = { id: 'house6', name: 'house6', url: '../SampleData/house/house6.gltf', lon: 121.42, lat: 31.20, height: 0, pid: '2071736b-0054-4041-ad34-34f2e7a975e5' };
        models[6] = { id: 'house7', name: 'house7', url: '../SampleData/house/house7.gltf', lon: 121.43, lat: 31.22, height: 0, pid: '4e027d42-f033-4bab-87f1-e34c8860b90e' };
        models[7] = { id: 'house8', name: 'house8', url: '../SampleData/house/house8.gltf', lon: 121.44, lat: 31.21, height: 0, pid: '918dcfaa-4568-4468-ba03-e379deaa99b7' };
        models[8] = { id: 'house9', name: 'house9', url: '../SampleData/house/house9.gltf', lon: 121.45, lat: 31.20, height: 0, pid: '2071736b-0054-4041-ad34-34f2e7a975e5' };
        models[9] = { id: 'house10', name: 'house10', url: '../SampleData/house/house10.gltf', lon: 121.46, lat: 31.21, height: 0, pid: '918dcfaa-4568-4468-ba03-e379deaa99b7' };
        models[10] = { id: 'house11', name: 'house11', url: '../SampleData/house/house11.gltf', lon: 121.40, lat: 31.20, height: 0, pid: '4e027d42-f033-4bab-87f1-e34c8860b90e' };
        models[11] = { id: 'villa', name: 'villa', url: '../SampleData/house3/house3.gltf', lon: 121.45, lat: 31.22, height: 0, pid: '2071736b-0054-4041-ad34-34f2e7a975e5' };
    
        var loadedModels = [];
    
        var shapes = new Array();
        shapes[0] = { layer: '测试层', author: 'liu', date: '2017-06-18', ploy: [
            { name: 'A区', type: 'ploy', points: [] }
        ]};
    
        var tempPoints = [];
        var tempEntities = [];
        var tempPinEntities = [];
        var tempPinLon, tempPinLat;
    
        var handler = null;
    
        $(function() {
    
            /**初始化**/
            $("input[name='optionsRadios']").click(function() {
                if ($("input[name='optionsRadios']:eq(1)").prop("checked")) {
                    //viewer.imageryLayers.addImageryProvider(vecLayer);
                    vecLayer = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
                        url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
                        layer: "tdtVecBasicLayer",
                        style: "default",
                        format: "image/jpeg",
                        tileMatrixSetID: "GoogleMapsCompatible",
                        show: false
                    }));
                } else if ($("input[name='optionsRadios']:eq(0)").prop("checked")) {
                    if (viewer.imageryLayers.contains(vecLayer)) {
                        viewer.imageryLayers.remove(vecLayer);
                    }
                }
            });
            //标记层
            $("#cbxPinLayer").change(function() {
                if ($("#cbxPinLayer").prop("checked")) {
                    for (var i = 0; i < tempPinEntities.length; i++) {
                        viewer.entities.add(tempPinEntities[i]);
                    }
    
                } else {
                    for (var i = 0; i < tempPinEntities.length; i ++) {
                        viewer.entities.remove(tempPinEntities[i]);
                    }
                }
            });
            $("#pinColor").change(function() {
                $(this).css("background-color", $(this).val());
            });
    
            $("#cbxRoad").click(function() {
                if ($(this).prop("checked")) {
                    roadLayer = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
                        url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
                        layer: "tdtImgAnnoLayer",
                        style: "default",
                        format: "image/jpeg",
                        tileMatrixSetID: "GoogleMapsCompatible",
                        show: false
                    }));
                } else {
                    viewer.imageryLayers.remove(roadLayer);
                }
            });
            $("#cbxTestArc").click(function() {
                if ($(this).prop("checked")) {
                    electricLayers = viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
                        url: 'https://nationalmap.gov.au/proxy/http://services.ga.gov.au/site_3/rest/services/Electricity_Infrastructure/MapServer'
                    }));
                    viewer.camera.flyTo({
                        destination: Cesium.Rectangle.fromDegrees(114.591, -45.837, 148.970, -5.730)
                    });
                } else {
                    viewer.imageryLayers.remove(electricLayers);
                }
            });
            $("#opts .btn").click(function () {
                window.setTimeout(function() {
                    if ($("input[name='opt']:eq(0)").prop("checked")) {
                        clearEffects();
                        setTips("");
                    }
                    else if ($("input[name='opt']:eq(1)").prop("checked")) {
                        clearEffects();
                        SetMode("addPin");
                        setTips("首先在地图上点击需要加点的位置,然后在弹出框内选取颜色,设置提示文字和显示内容,点击保存");
                    }
                    else if ($("input[name='opt']:eq(2)").prop("checked")) {
                        tempPoints = [];
                        for (var i = 0; i < tempEntities.length; i++) {
                            viewer.entities.remove(tempEntities[i]);
                        }
                        for (var i = 0; i < loadedModels.length; i++) {
                            if (loadedModels[i].color == Cesium.Color.SPRINGGREEN) {
                                loadedModels[i].color = {red:1,green:1, blue:1, alpha:1};
                            }
                        }
                        clearEffects();
                        setTips("绘制的图形被清除,点选页面标记可以删除标记");
                        SetMode("erase");
                    }
                    else if ($("input[name='opt']:eq(3)").prop("checked")) {
                        clearEffects();
                        SetMode("drawLine");
                        setTips("在地图上分别点击,即可绘制多个线段,点右键结束绘制");
                    }
                    else if ($("input[name='opt']:eq(4)").prop("checked")) {
                        clearEffects();
                        SetMode("drawCircle");
                        setTips("第一次点击绘制圆心,第二次点击根据和圆心的位置绘制半径");
                    }
                    else if ($("input[name='opt']:eq(5)").prop("checked")) {
                        clearEffects();
                        SetMode("drawSquare");
                        setTips("第一、二次点击绘制长方形的一个边,再次点击根据点和边的距离绘制方形");
                    }
                    else if ($("input[name='opt']:eq(6)").prop("checked")) {
                        clearEffects();
                        SetMode("drawPloy");
                        setTips("如果需要绘制多边形,在地图上使用左键逐个点选地点,右击闭合多边形");
                    }
                    else if ($("input[name='opt']:eq(7)").prop("checked")) {
                        clearEffects();
                        SetMode("pickBuilding");
                        setTips("点选建筑查看详细的三维模型");
                    }
                },100);
            });
    
            var homeView = {
                destination: new Cesium.Cartesian3(-2852877.756667368, 4655857.919027944, 3288673.682311567),
                orientation: {
                    direction: new Cesium.Cartesian3(0.5437275903005284, -0.8386290220423197, -0.03258329225728158),
                    up: new Cesium.Cartesian3(0.05520718287689969, -0.00299987805272847, 0.9984704140286108)
                },
                complete: function() { LoadModel(); },
            };
            
            setTimeout(
                function() {
                    // scene.primitives.removeAll();
                    //reset();
                    viewer.camera.flyTo(homeView);
                    
                    //viewer.zoomTo(wyoming);
                }, 3000);
    
            //var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
            //Cesium.Cartesian3.fromDegrees(121.49, 31.22, 0.0));
            //var model = scene.primitives.add(Cesium.Model.fromGltf({
            //    url: '../SampleData/house/house1.gltf',
            //    modelMatrix: modelMatrix,
            //    scale: 20.0,
            //    name: 'SampleHouse',
            //    color: getColor('Red', 1)
            //}));
    
            $("#poly-show").click(function () {
                LoadModel();
            });
    
            $("#poly-hide").click(function () {
                HideModel();
            });
    
            //alert(getEnumPropertyNames(model).join('
    '));
    
        });
    
        function LoadModel() {
            for (var i = 0; i < models.length; i++) {
                var hasLoaded = false;
                for (var j = 0; j < loadedModels.length; j ++) {
                    if (models[i].id == loadedModels[j].id) {
                        hasLoaded = true;
                    }
                }
                if (!hasLoaded) {
                    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
                        Cesium.Cartesian3.fromDegrees(models[i].lon, models[i].lat, models[i].height));
    
                    var model = scene.primitives.add(
                        Cesium.Model.fromGltf({
                            url: models[i].url,
                            modelMatrix: modelMatrix,
                            scale: 20.0,
                            name: models[i].name,
                            id: models[i].id
                        }));
                    loadedModels.push(model);
                }
            }
            //var cartesian = viewer.camera.pickEllipsoid(loadedModels[0].modelMatrix, scene.globe.ellipsoid);
            //alert(getEnumPropertyNames(cartesian).join('
    '));
            
        }
    
        function HideModel() {
            for (var i = 0; i < loadedModels.length; i++) {
                scene.primitives.remove(loadedModels[i]);
            }
            loadedModels = [];
        }
    
        function setTips(message, close) {
            if ("" == message) {
                $("#message").fadeOut();
            } else {
                if (close != undefined && close == true) {
                    $("#message").html(message).fadeOut();
                } else {
                    $("#message").html(message).fadeIn();
                }
            }
        }
    
        function clearEffects() {
            if (handler != null) {
                handler.destroy();
            }
        }
    
        //设置各种操作模式
        function SetMode(mode) {
            if (mode == "drawPloy")
            {
                tempPoints = [];
                handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                handler.setInputAction(function (click) {
                    var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                    if (cartesian) {
                        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                        tempPoints.push({ lon: longitudeString, lat: latitudeString });
                        var tempLength = tempPoints.length;
                        drawPoint(tempPoints[tempPoints.length-1]);
                        if (tempLength > 1) {
                            drawLine(tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1], true);
                        }
                    } 
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    
                handler.setInputAction(function (click) {
                    var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                    if (cartesian) {
                        var tempLength = tempPoints.length;
                        if (tempLength < 3) {
                            alert('请选择3个以上的点再执行闭合操作命令');
                        } else {
                            drawLine(tempPoints[0], tempPoints[tempPoints.length - 1], true);
                            drawPoly(tempPoints);
                            highLightAssetsInArea(tempPoints);
                            alert('多边形面积' + SphericalPolygonAreaMeters(tempPoints) + '平方米');
                            tempPoints = [];
                        }
    
                    }
                }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
            }
            else if (mode == "pickBuilding")
            {
                handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                handler.setInputAction(function(click) {
                    var pick = scene.pick(click.position);
                    if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
                        for (var i = 0; i < models.length; i ++) {
                            if (models[i].id == pick.node._model.id) {
                                var modelName = models[i].name;
                                var modelId = models[i].id;
                                var modelBimId = models[i].pid;
                                highLigthModel(modelId);
                                viewer.camera.flyTo({
                                    destination: Cesium.Cartesian3.fromDegrees(models[i].lon, parseFloat(models[i].lat) - 0.01, 2000.0),
                                    orientation: {
                                        direction: new Cesium.Cartesian3(0.5437275903005284, -0.8386290220423197, -0.03258329225728158),
                                        up: new Cesium.Cartesian3(0.05520718287689969, -0.00299987805272847, 0.9984704140286108)
                                    },
                                    complete: function() {
                                        if (confirm("你选择的是" + modelName + ",是否查看详细模型?")) {
                                            LoadBim(modelBimId);
                                        }
                                        unHighLightModel(modelId);
                                    },
                                });
                            }
                        }
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            }
            else if ("addPin" == mode)
            {
                handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                handler.setInputAction(function (click) {
                    var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                    if (cartesian) {
                        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                        tempPinLon = Cesium.Math.toDegrees(cartographic.longitude);
                        tempPinLat = Cesium.Math.toDegrees(cartographic.latitude);
                        $('#addPinModal').modal('show');
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            }
            else if ("erase" == mode)
            {
                handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                handler.setInputAction(function (click) {
                    var pick = scene.pick(click.position);
                    if (Cesium.defined(pick) && Cesium.defined(pick.id) && Cesium.defined(pick.id._id)) {
                        for (var i = 0; i < models.length; i++) {
                            if ( pick.id != undefined && tempPinEntities[i].id == pick.id._id) {
                                removePoint(tempPinEntities[i]);
                                tempPinEntities.splice(i, 1);
                            }
                        }
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            }
            else if ("drawLine" == mode)
            {
                tempPoints = [];
                handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                handler.setInputAction(function (click) {
                    var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                    if (cartesian) {
                        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                        tempPoints.push({ lon: longitudeString, lat: latitudeString });
                        var tempLength = tempPoints.length;
                        drawPoint(tempPoints[tempPoints.length - 1]);
                        if (tempLength > 1) {
                            drawLine(tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1], true);
                        }
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
                handler.setInputAction(function (click) {
                    tempPoints = [];
                }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
            }
            else if ("drawCircle" == mode)
            {
                tempPoints = [];
                handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                handler.setInputAction(function (click) {
                    var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                    if (cartesian) {
                        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                        tempPoints.push({ lon: longitudeString, lat: latitudeString });
                        var tempLength = tempPoints.length;
                        if (tempLength == 1) {
                            drawPoint(tempPoints[0]);
                        }
                        else if (tempLength == 2) {
                            drawPoint(tempPoints[1]);
                            drawLine(tempPoints[0], tempPoints[1], true);
                            //算两点间距离
                            var distance = getFlatternDistance(tempPoints[0].lat, tempPoints[0].lon, tempPoints[1].lat, tempPoints[1].lon);
    
                            var entity =
                            viewer.
                            entities.add({
                                position: Cesium.Cartesian3.fromDegrees(tempPoints[0].lon, tempPoints[0].lat),
                                ellipse: {
                                    semiMinorAxis: distance,
                                    semiMajorAxis: distance,
                                    height: 0,
                                    material: Cesium.Color.fromRandom({ alpha: 0.8 })
                                }
                            });
                            tempEntities.push(entity);
    
                            //高亮圈内模型
                            for (var i = 0; i < loadedModels.length; i++) {
                                for (var j = 0; j < models.length; j++) {
                                    if (loadedModels[i].id == models[j].id && getFlatternDistance(models[j].lat, models[j].lon, tempPoints[0].lat, tempPoints[0].lon) <= distance) {
                                        loadedModels[i].color = Cesium.Color.SPRINGGREEN;
                                    }
                                }
                            }
    
                            //面积
                            setTimeout(function () { alert("面积是 " + Math.PI * distance * distance + "平方米") },500);
    
                            tempPoints = [];
                        }
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            }
            else if ("drawSquare" == mode) {
                tempPoints = [];
                handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                handler.setInputAction(function (click) {
                    var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                    if (cartesian) {
                        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                        tempPoints.push({ lon: longitudeString, lat: latitudeString });
                        var tempLength = tempPoints.length;
                        if (tempLength == 1) {
                            drawPoint(tempPoints[0]);
                        }
                        else if (tempLength == 2) {
                            //算两点间距离
                            var distance = getFlatternDistance(tempPoints[0].lat, tempPoints[0].lon, tempPoints[1].lat, tempPoints[1].lon);
    
                            var entity =
                            viewer.
                            entities.add({
                                position: Cesium.Cartesian3.fromDegrees(tempPoints[0].lon, tempPoints[0].lat),
                                ellipse: {
                                    semiMinorAxis: distance,
                                    semiMajorAxis: distance,
                                    height: 0,
                                    material: Cesium.Color.fromRandom({ alpha: 0.8 })
                                }
                            });
                            tempEntities.push(entity);
    
                            //高亮圈内模型
                            for (var i = 0; i < loadedModels.length; i++) {
                                for (var j = 0; j < models.length; j++) {
                                    if (loadedModels[i].id == models[j].id && getFlatternDistance(models[j].lat, models[j].lon, tempPoints[0].lat, tempPoints[0].lon) <= distance) {
                                        loadedModels[i].color = Cesium.Color.SPRINGGREEN;
                                    }
                                }
                            }
    
                            tempPoints = [];
                        }
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            }
        }
    
        function drawPoint(point) {
            var entity = 
            viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
                point: {
                    pixelSize: 10,
                    color: Cesium.Color.CHARTREUSE
                }
            });
            tempEntities.push(entity);
        }
    
        function removePoint(entity) {
            viewer.entities.remove(entity);
        }
    
        function drawLine(point1, point2, showDistance) {
            var entity =
            viewer.entities.add({
                polyline: {
                    positions: [Cesium.Cartesian3.fromDegrees(point1.lon, point1.lat), Cesium.Cartesian3.fromDegrees(point2.lon, point2.lat)],
                     10.0,
                    material: new Cesium.PolylineGlowMaterialProperty({
                        color: Cesium.Color.CHARTREUSE.withAlpha(.5)
                    })
                }
            });
            tempEntities.push(entity);
            if (showDistance) {
                var w = Math.abs(point1.lon - point2.lon);
                var h = Math.abs(point1.lat - point2.lat);
                var offsetV = w >= h ? 0.0005 : 0;
                var offsetH = w < h ? 0.001 : 0;
                var distance = getFlatternDistance(point1.lat, point1.lon, point2.lat, point2.lon);
                entity =
                    viewer.entities.add({
                        position: Cesium.Cartesian3.fromDegrees(((point1.lon + point2.lon) / 2) + offsetH,
                        ((point1.lat + point2.lat) / 2) + offsetV),
                        label: {
                            text: distance.toFixed(1) + 'm',
                            font: '22px Helvetica',
                            fillColor: Cesium.Color.WHITE
                        }
                    });
                tempEntities.push(entity);
            }
        }
    
        function drawPoly(points) {
            var pArray = [];
            for (var i = 0; i < points.length; i ++) {
                pArray.push(points[i].lon);
                pArray.push(points[i].lat);
            }
            var entity =
            viewer.entities.add({
                polygon: {
                    hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(pArray)),
                    material: Cesium.Color.CHARTREUSE.withAlpha(.5)
                }
            });
            tempEntities.push(entity);
        }
    
        function getColor(colorName, alpha) {
            var color = Cesium.Color[colorName.toUpperCase()];
            return Cesium.Color.fromAlpha(color, parseFloat(alpha));
        }
    
        //判断点是否在多边形内
        function PointInPoly(point, polyPoints) {
            for (var c = false, i = -1, l = polyPoints.length, j = l - 1; ++i < l; j = i)
                ((polyPoints[i].lat <= point.lat && point.lat < polyPoints[j].lat) || (polyPoints[j].lat <= point.lat && point.lat < polyPoints[i].lat))
                && (point.lon < (polyPoints[j].lon - polyPoints[i].lon) * (point.lat - polyPoints[i].lat) / (polyPoints[j].lat - polyPoints[i].lat) + polyPoints[i].lon)
                && (c = !c);
            return c;
        }
    
        //选区内模型高亮
        function highLightAssetsInArea(points) {
            
            for (var i = 0; i < loadedModels.length; i++) {
                for (var j = 0; j < models.length; j ++) {
                    if (loadedModels[i].id == models[j].id && PointInPoly(models[j], points)) {
                        loadedModels[i].color = Cesium.Color.SPRINGGREEN;
                    }
                }
            }
        }
    
        //高亮模型
        function highLigthModel(modelId) {
            for (var i = 0; i < loadedModels.length; i ++) {
                if (loadedModels[i].id == modelId) {
                    loadedModels[i].color = Cesium.Color.SPRINGGREEN;
                }
            }
        }
    
        //取消高亮模型
        function unHighLightModel(modelId) {
            for (var i = 0; i < loadedModels.length; i++) {
                if (loadedModels[i].id == modelId) {
                    loadedModels[i].color = {
                        red: 1,
                        green: 1,
                        blue: 1,
                        alpha: 1
                    };
                }
            }
        }
    
        //定位
        function goLocation() {
            $('#flyToModal').modal('hide');
            $('#flyToModal').on('hidden.bs.modal', function(e) {
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees($("#jumpLon").val(), $("#jumpLat").val(), 1000.0)
                });
            });
        }
    
        //加点
        function addPin() {
            $('#addPinModal').modal('hide');
            var pin = viewer.entities.add({
                name: $("#pinContent").val(),
                position: Cesium.Cartesian3.fromDegrees(tempPinLon, tempPinLat),
                billboard: {
                    image: $("#pinLabel").val() == "" ? pinBuilder.fromColor(Cesium.Color[$("#pinColor").val().toUpperCase()], 48).toDataURL() :
                pinBuilder.fromText($("#pinLabel").val(), Cesium.Color[$("#pinColor").val().toUpperCase()], 64).toDataURL(),
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                }
            });
            tempPinEntities.push(pin);
            $("#pinLabel").val("");
            $("#pinContent").val("");
        }
    
        //计算两点间距离
        function getFlatternDistance(lat1, lng1, lat2, lng2) {
            var EARTH_RADIUS = 6378137.0;    //单位M
            var PI = Math.PI;
    
            function getRad(d) {
                return d * PI / 180.0;
            }
            var f = getRad((lat1 + lat2) / 2);
            var g = getRad((lat1 - lat2) / 2);
            var l = getRad((lng1 - lng2) / 2);
    
            var sg = Math.sin(g);
            var sl = Math.sin(l);
            var sf = Math.sin(f);
    
            var s, c, w, r, d, h1, h2;
            var a = EARTH_RADIUS;
            var fl = 1 / 298.257;
    
            sg = sg * sg;
            sl = sl * sl;
            sf = sf * sf;
    
            s = sg * (1 - sl) + (1 - sf) * sl;
            c = (1 - sg) * (1 - sl) + sf * sl;
    
            w = Math.atan(Math.sqrt(s / c));
            r = Math.sqrt(s * c) / w;
            d = 2 * w * a;
            h1 = (3 * r - 1) / 2 / c;
            h2 = (3 * r + 1) / 2 / s;
    
            return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
        }
    
        //计算多边形面积
        var earthRadiusMeters = 6371000.0;
        var metersPerDegree = 2.0 * Math.PI * earthRadiusMeters / 360.0;
        var radiansPerDegree = Math.PI / 180.0;
        var degreesPerRadian = 180.0 / Math.PI;
        var pointArr;
        function SphericalPolygonAreaMeters(points) {
            var totalAngle = 0;
            for (var i = 0; i < points.length; i++) {
                var j = (i + 1) % points.length;
                var k = (i + 2) % points.length;
                totalAngle += Angle(points[i], points[j], points[k]);
            }
            var planarTotalAngle = (points.length - 2) * 180.0;
            var sphericalExcess = totalAngle - planarTotalAngle;
            if (sphericalExcess > 420.0) {
                totalAngle = points.length * 360.0 - totalAngle;
                sphericalExcess = totalAngle - planarTotalAngle;
            } else if (sphericalExcess > 300.0 && sphericalExcess < 420.0) {
                sphericalExcess = Math.abs(360.0 - sphericalExcess);
            }
            return sphericalExcess * radiansPerDegree * earthRadiusMeters * earthRadiusMeters;
        }
    
        /*角度*/
        function Angle(p1, p2, p3) {
            var bearing21 = Bearing(p2, p1);
            var bearing23 = Bearing(p2, p3);
            var angle = bearing21 - bearing23;
            if (angle < 0) {
                angle += 360;
            }
            return angle;
        }
        /*方向*/
        function Bearing(from, to) {
            var lat1 = from.lat * radiansPerDegree;
            var lon1 = from.lon * radiansPerDegree;
            var lat2 = to.lat * radiansPerDegree;
            var lon2 = to.lon * radiansPerDegree;
            var angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
            if (angle < 0) {
                angle += Math.PI * 2.0;
            }
            angle = angle * degreesPerRadian;
            return angle;
        }
    
        function LoadBim(projId) {
            //加载模型
            $('#myTabs li:eq(1) a').tab('show');
    
            bimEngine = new BIMVIZ.RenderEngine({
                projectId: projId,
                renderDomId: 'viewport',
                ip: "101.231.52.92",
                port: 7005,
                key: 'B3056CC9-13DB-4fcc-9FC3-6604D93304F4',
                resizeMode: 'fullpage',
                resourcePath: '/sdk/viz/data/',
                logo: false,
            });
    
            // 消息输出控件,包括调试信息,进度信息
            msgControl = new BIMVIZ.UI.DefaultMessageControl(bimEngine, 'messages');
    
            // 工具栏
            toolbar = new BIMVIZ.UI.DefaultToolBar(bimEngine);
    
            // 添加文件控件
            fileControl = new BIMVIZ.UI.DefaultFileControl("文件", "fa-file-o");
            toolbar.addControl(fileControl);
    
            // 添加场景树控件
            spaceControl = new BIMVIZ.UI.DefaultSpaceControl("场景树", "fa-tree");
            toolbar.addControl(spaceControl);
    
            // 添加类型控件
            domainControl = new BIMVIZ.UI.DefaultDomainControl("类型", "fa-map-o");
            toolbar.addControl(domainControl);
    
            // 添加属性控件
            propertyControl = new BIMVIZ.UI.DefaultPropertyControl("属性", "fa-info-circle");
            toolbar.addControl(propertyControl);
    
            // 添加搜索控件
            searchControl = new BIMVIZ.UI.DefaultSearchControl("搜索", "fa-search");
            toolbar.addControl(searchControl);
    
            // 添加标注控件
            // 或者可以调用仅显示列表的简化版本 BIMVIZ.UI.DefaultMarkSimpleListControl
            markControl = new BIMVIZ.UI.DefaultMarkControl("标注", "fa-map-marker");
            toolbar.addControl(markControl);
    
            // 添加楼层控件
            storeyControl = new BIMVIZ.UI.DefaultBuildingStoreyControl("楼层", "fa-list");
            toolbar.addControl(storeyControl);
    
            // 添加漫游控制控件
            //roamingControl = new BIMVIZ.UI.DefaultRoamingSettingControl("漫游控制", "fa-send");
            //toolbar.addControl(roamingControl);
    
    
            //bimEngine.addListener(BIMVIZ.EVENT.OnSelectElementPropertyList, onShowElementPropertyList);
    
            setTimeout(function () {
                bimEngine.start();
            }, 200);
        }
    </script>
    </body>
    </html>
    

    Cesium是一个非常优秀的三维地球GIS引擎(开源且免费)。能够加载各种符合标准的地图图层,瓦片图、矢量图等都支持。支持3DMax等建模软件生成的obj文件,支持通用的GIS计算;支持DEM高程图。测试中的3D-Tiles分支还支持倾斜摄影生成的城市三维建筑群。国内许多三维GIS产品都基于Cesium进行封装(包括一些大厂)。因为工作关系,我对Cesium的一些基本GIS功能进行了研究,特此记录下来。

    pic_aa6bb1f6.png

    如上图,这是一个给市政GISBIM管理平台做的原型,GIS部分使用Cesium,BIM部分使用第三方商业引擎。GIS控制宏观、BIM支持微观(现在还没有什么好的引擎能做到GISBIM的无缝切换)。

    常用功能介绍:

    • 卫星矢量地图切换

    pic_db2e7269.png

    我这里使用的是天地图提供的服务,卫星地图和矢量地图分别调用不同的接口,卫星地图显示效果如上图,矢量地图显示如下图:

    pic_f3f22a69.png

    • 道路及基本标注

    点“道路及基本标注”后,将路名等显示并加载在原先的图层上

    pic_ec94c14e.png

    • 加标记点

    首先在地图上点击需要加点的位置,然后在弹出框内选取颜色,设置提示文字和显示内容,点击保存;可以添加多个标记。

    pic_be38fdd2.png

    pic_8011c4ef.png

    • 绘制线段

    连续点击地图两次就可以绘制线段(可绘制折线)

    pic_7f0c124c.png

    • 绘制圆形

    支持绘制多个圆形,每个圆形随机颜色,能够显示园的半径、面积等

    pic_88f9e5bf.png

    • 绘制多边形

    连续点击地图上的点,再右键闭合,就可以绘制多边形,能够计算多边形每一边的边长、总面积等

    pic_a3ea2966.png

    • 保存视角、跳转视角

    保存当前的视角;输入经纬度,跳转到指定位置

    pic_d3526f39.png

    • 隐藏、加载模型

    可以动态加载、隐藏三维模型(为了便于演示,所有的模型均放大了几百倍);地图上的绘制功能对所有模型都有效,包含在范围内的模型会自动高亮并显示;点选模型能自动居中并提示是否跳转到BIM模型显示(BIM模型也是基于三维WebGL的)

    pic_211ac0e6.png

    pic_c80f25e0.png

    • 搜索

    可以根据输入的关键词进行搜索,使用百度或者高德的API,或者使用天地图的API,搜索后进行定位,只是百度、高德、天地图等用的是不同的坐标系,转换非常麻烦。

    • 清除绘制

    清除所有绘制的部分

    以上功能只要再完善下,封装下就可以成为一个很不错的三维GIS项目基础平台了,附我们公司做的GIS+BIM的产品截图,使用了3D-Tiles:)

    pic_05d16818.png

    附:示例程序的js部分代码

    pic_80818b41.png pic_7d22ef00.png

    1     var bimEngine; var msgControl; var toolbar; var fileControl; var spaceControl; var domainControl; var propertyControl; var searchControl; var markControl;
      2     var storeyControl; var roamingControl; var bimevent;
      3     
      4     var viewer = new Cesium.Viewer("cesiumContainer", {
      5         animation: false, //是否显示动画控件
      6         baseLayerPicker: false, //是否显示图层选择控件
      7         geocoder: true, //是否显示地名查找控件
      8         timeline: false, //是否显示时间线控件
      9         sceneModePicker: true, //是否显示投影方式控件
     10         navigationHelpButton: false, //是否显示帮助信息控件
     11         infoBox: true, //是否显示点击要素之后显示的信息
     12         imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
     13             url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
     14             layer: "tdtBasicLayer",
     15             style: "default",
     16             format: "image/jpeg",
     17             tileMatrixSetID: "GoogleMapsCompatible",
     18             show: false
     19         })
     20     });
     21     var scene = viewer.scene;
     22     var pinBuilder = new Cesium.PinBuilder();
     23 
     24     var vecLayer = null, roadLayer = null, electricLayers = null;
     25     
     26     var getEnumPropertyNames = function(obj) {
     27         var props = [];
     28         for (prop in obj) {
     29             props.push(prop + ': ' + obj[prop]);
     30         }
     31         return props;
     32     }
     33 
     34     var models = new Array();
     35     models[0] = { id: 'house1', name: 'house1', url: '../SampleData/house/house1.gltf', lon: 121.41, lat: 31.22, height: 0, pid: '4e027d42-f033-4bab-87f1-e34c8860b90e' };
     36     models[1] = { id: 'house2', name: 'house2', url: '../SampleData/house/house2.gltf', lon: 121.42, lat: 31.21, height: 0, pid: '918dcfaa-4568-4468-ba03-e379deaa99b7' };
     37     models[2] = { id: 'house3', name: 'house3', url: '../SampleData/house/house3.gltf', lon: 121.43, lat: 31.20, height: 0, pid: '2071736b-0054-4041-ad34-34f2e7a975e5' };
     38     models[3] = { id: 'house4', name: 'house4', url: '../SampleData/house/house4.gltf', lon: 121.44, lat: 31.22, height: 0, pid: '4e027d42-f033-4bab-87f1-e34c8860b90e' };
     39     models[4] = { id: 'house5', name: 'house5', url: '../SampleData/house/house5.gltf', lon: 121.41, lat: 31.21, height: 0, pid: '918dcfaa-4568-4468-ba03-e379deaa99b7' };
     40     models[5] = { id: 'house6', name: 'house6', url: '../SampleData/house/house6.gltf', lon: 121.42, lat: 31.20, height: 0, pid: '2071736b-0054-4041-ad34-34f2e7a975e5' };
     41     models[6] = { id: 'house7', name: 'house7', url: '../SampleData/house/house7.gltf', lon: 121.43, lat: 31.22, height: 0, pid: '4e027d42-f033-4bab-87f1-e34c8860b90e' };
     42     models[7] = { id: 'house8', name: 'house8', url: '../SampleData/house/house8.gltf', lon: 121.44, lat: 31.21, height: 0, pid: '918dcfaa-4568-4468-ba03-e379deaa99b7' };
     43     models[8] = { id: 'house9', name: 'house9', url: '../SampleData/house/house9.gltf', lon: 121.45, lat: 31.20, height: 0, pid: '2071736b-0054-4041-ad34-34f2e7a975e5' };
     44     models[9] = { id: 'house10', name: 'house10', url: '../SampleData/house/house10.gltf', lon: 121.46, lat: 31.21, height: 0, pid: '918dcfaa-4568-4468-ba03-e379deaa99b7' };
     45     models[10] = { id: 'house11', name: 'house11', url: '../SampleData/house/house11.gltf', lon: 121.40, lat: 31.20, height: 0, pid: '4e027d42-f033-4bab-87f1-e34c8860b90e' };
     46     models[11] = { id: 'villa', name: 'villa', url: '../SampleData/house3/house3.gltf', lon: 121.45, lat: 31.22, height: 0, pid: '2071736b-0054-4041-ad34-34f2e7a975e5' };
     47 
     48     var loadedModels = [];
     49 
     50     var shapes = new Array();
     51     shapes[0] = { layer: '测试层', author: 'liu', date: '2017-06-18', ploy: [
     52         { name: 'A区', type: 'ploy', points: [] }
     53     ]};
     54 
     55     var tempPoints = [];
     56     var tempEntities = [];
     57     var tempPinEntities = [];
     58     var tempPinLon, tempPinLat;
     59 
     60     var handler = null;
     61 
     62     $(function() {
     63 
     64         /**初始化**/
     65         $("input[name='optionsRadios']").click(function() {
     66             if ($("input[name='optionsRadios']:eq(1)").prop("checked")) {
     67                 //viewer.imageryLayers.addImageryProvider(vecLayer);
     68                 vecLayer = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
     69                     url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
     70                     layer: "tdtVecBasicLayer",
     71                     style: "default",
     72                     format: "image/jpeg",
     73                     tileMatrixSetID: "GoogleMapsCompatible",
     74                     show: false
     75                 }));
     76             } else if ($("input[name='optionsRadios']:eq(0)").prop("checked")) {
     77                 if (viewer.imageryLayers.contains(vecLayer)) {
     78                     viewer.imageryLayers.remove(vecLayer);
     79                 }
     80             }
     81         });
     82         //标记层
     83         $("#cbxPinLayer").change(function() {
     84             if ($("#cbxPinLayer").prop("checked")) {
     85                 for (var i = 0; i < tempPinEntities.length; i++) {
     86                     viewer.entities.add(tempPinEntities[i]);
     87                 }
     88 
     89             } else {
     90                 for (var i = 0; i < tempPinEntities.length; i ++) {
     91                     viewer.entities.remove(tempPinEntities[i]);
     92                 }
     93             }
     94         });
     95         $("#pinColor").change(function() {
     96             $(this).css("background-color", $(this).val());
     97         });
     98 
     99         $("#cbxRoad").click(function() {
    100             if ($(this).prop("checked")) {
    101                 roadLayer = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    102                     url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
    103                     layer: "tdtImgAnnoLayer",
    104                     style: "default",
    105                     format: "image/jpeg",
    106                     tileMatrixSetID: "GoogleMapsCompatible",
    107                     show: false
    108                 }));
    109             } else {
    110                 viewer.imageryLayers.remove(roadLayer);
    111             }
    112         });
    113         $("#cbxTestArc").click(function() {
    114             if ($(this).prop("checked")) {
    115                 electricLayers = viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
    116                     url: 'https://nationalmap.gov.au/proxy/http://services.ga.gov.au/site_3/rest/services/Electricity_Infrastructure/MapServer'
    117                 }));
    118                 viewer.camera.flyTo({
    119                     destination: Cesium.Rectangle.fromDegrees(114.591, -45.837, 148.970, -5.730)
    120                 });
    121             } else {
    122                 viewer.imageryLayers.remove(electricLayers);
    123             }
    124         });
    125         $("#opts .btn").click(function () {
    126             window.setTimeout(function() {
    127                 if ($("input[name='opt']:eq(0)").prop("checked")) {
    128                     clearEffects();
    129                     setTips("");
    130                 }
    131                 else if ($("input[name='opt']:eq(1)").prop("checked")) {
    132                     clearEffects();
    133                     SetMode("addPin");
    134                     setTips("首先在地图上点击需要加点的位置,然后在弹出框内选取颜色,设置提示文字和显示内容,点击保存");
    135                 }
    136                 else if ($("input[name='opt']:eq(2)").prop("checked")) {
    137                     tempPoints = [];
    138                     for (var i = 0; i < tempEntities.length; i++) {
    139                         viewer.entities.remove(tempEntities[i]);
    140                     }
    141                     for (var i = 0; i < loadedModels.length; i++) {
    142                         if (loadedModels[i].color == Cesium.Color.SPRINGGREEN) {
    143                             loadedModels[i].color = {red:1,green:1, blue:1, alpha:1};
    144                         }
    145                     }
    146                     clearEffects();
    147                     setTips("绘制的图形被清除,点选页面标记可以删除标记");
    148                     SetMode("erase");
    149                 }
    150                 else if ($("input[name='opt']:eq(3)").prop("checked")) {
    151                     clearEffects();
    152                     SetMode("drawLine");
    153                     setTips("在地图上分别点击,即可绘制多个线段,点右键结束绘制");
    154                 }
    155                 else if ($("input[name='opt']:eq(4)").prop("checked")) {
    156                     clearEffects();
    157                     SetMode("drawCircle");
    158                     setTips("第一次点击绘制圆心,第二次点击根据和圆心的位置绘制半径");
    159                 }
    160                 else if ($("input[name='opt']:eq(5)").prop("checked")) {
    161                     clearEffects();
    162                     SetMode("drawSquare");
    163                     setTips("第一、二次点击绘制长方形的一个边,再次点击根据点和边的距离绘制方形");
    164                 }
    165                 else if ($("input[name='opt']:eq(6)").prop("checked")) {
    166                     clearEffects();
    167                     SetMode("drawPloy");
    168                     setTips("如果需要绘制多边形,在地图上使用左键逐个点选地点,右击闭合多边形");
    169                 }
    170                 else if ($("input[name='opt']:eq(7)").prop("checked")) {
    171                     clearEffects();
    172                     SetMode("pickBuilding");
    173                     setTips("点选建筑查看详细的三维模型");
    174                 }
    175             },100);
    176         });
    177 
    178         var homeView = {
    179             destination: new Cesium.Cartesian3(-2852877.756667368, 4655857.919027944, 3288673.682311567),
    180             orientation: {
    181                 direction: new Cesium.Cartesian3(0.5437275903005284, -0.8386290220423197, -0.03258329225728158),
    182                 up: new Cesium.Cartesian3(0.05520718287689969, -0.00299987805272847, 0.9984704140286108)
    183             },
    184             complete: function() { LoadModel(); },
    185         };
    186         
    187         setTimeout(
    188             function() {
    189                 // scene.primitives.removeAll();
    190                 //reset();
    191                 viewer.camera.flyTo(homeView);
    192                 
    193                 //viewer.zoomTo(wyoming);
    194             }, 3000);
    195 
    196         //var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
    197         //Cesium.Cartesian3.fromDegrees(121.49, 31.22, 0.0));
    198         //var model = scene.primitives.add(Cesium.Model.fromGltf({
    199         //    url: '../SampleData/house/house1.gltf',
    200         //    modelMatrix: modelMatrix,
    201         //    scale: 20.0,
    202         //    name: 'SampleHouse',
    203         //    color: getColor('Red', 1)
    204         //}));
    205 
    206         $("#poly-show").click(function () {
    207             LoadModel();
    208         });
    209 
    210         $("#poly-hide").click(function () {
    211             HideModel();
    212         });
    213 
    214         //alert(getEnumPropertyNames(model).join('
    '));
    215 
    216     });
    217 
    218     function LoadModel() {
    219         for (var i = 0; i < models.length; i++) {
    220             var hasLoaded = false;
    221             for (var j = 0; j < loadedModels.length; j ++) {
    222                 if (models[i].id == loadedModels[j].id) {
    223                     hasLoaded = true;
    224                 }
    225             }
    226             if (!hasLoaded) {
    227                 var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
    228                     Cesium.Cartesian3.fromDegrees(models[i].lon, models[i].lat, models[i].height));
    229 
    230                 var model = scene.primitives.add(
    231                     Cesium.Model.fromGltf({
    232                         url: models[i].url,
    233                         modelMatrix: modelMatrix,
    234                         scale: 20.0,
    235                         name: models[i].name,
    236                         id: models[i].id
    237                     }));
    238                 loadedModels.push(model);
    239             }
    240         }
    241         //var cartesian = viewer.camera.pickEllipsoid(loadedModels[0].modelMatrix, scene.globe.ellipsoid);
    242         //alert(getEnumPropertyNames(cartesian).join('
    '));
    243         
    244     }
    245 
    246     function HideModel() {
    247         for (var i = 0; i < loadedModels.length; i++) {
    248             scene.primitives.remove(loadedModels[i]);
    249         }
    250         loadedModels = [];
    251     }
    252 
    253     function setTips(message, close) {
    254         if ("" == message) {
    255             $("#message").fadeOut();
    256         } else {
    257             if (close != undefined && close == true) {
    258                 $("#message").html(message).fadeOut();
    259             } else {
    260                 $("#message").html(message).fadeIn();
    261             }
    262         }
    263     }
    264 
    265     function clearEffects() {
    266         if (handler != null) {
    267             handler.destroy();
    268         }
    269     }
    270 
    271     //设置各种操作模式
    272     function SetMode(mode) {
    273         if (mode == "drawPloy")
    274         {
    275             tempPoints = [];
    276             handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    277             handler.setInputAction(function (click) {
    278                 var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
    279                 if (cartesian) {
    280                     var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    281                     var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
    282                     var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
    283                     tempPoints.push({ lon: longitudeString, lat: latitudeString });
    284                     var tempLength = tempPoints.length;
    285                     drawPoint(tempPoints[tempPoints.length-1]);
    286                     if (tempLength > 1) {
    287                         drawLine(tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1], true);
    288                     }
    289                 } 
    290             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    291 
    292             handler.setInputAction(function (click) {
    293                 var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
    294                 if (cartesian) {
    295                     var tempLength = tempPoints.length;
    296                     if (tempLength < 3) {
    297                         alert('请选择3个以上的点再执行闭合操作命令');
    298                     } else {
    299                         drawLine(tempPoints[0], tempPoints[tempPoints.length - 1], true);
    300                         drawPoly(tempPoints);
    301                         highLightAssetsInArea(tempPoints);
    302                         alert('多边形面积' + SphericalPolygonAreaMeters(tempPoints) + '平方米');
    303                         tempPoints = [];
    304                     }
    305 
    306                 }
    307             }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    308         }
    309         else if (mode == "pickBuilding")
    310         {
    311             handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    312             handler.setInputAction(function(click) {
    313                 var pick = scene.pick(click.position);
    314                 if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
    315                     for (var i = 0; i < models.length; i ++) {
    316                         if (models[i].id == pick.node._model.id) {
    317                             var modelName = models[i].name;
    318                             var modelId = models[i].id;
    319                             var modelBimId = models[i].pid;
    320                             highLigthModel(modelId);
    321                             viewer.camera.flyTo({
    322                                 destination: Cesium.Cartesian3.fromDegrees(models[i].lon, parseFloat(models[i].lat) - 0.01, 2000.0),
    323                                 orientation: {
    324                                     direction: new Cesium.Cartesian3(0.5437275903005284, -0.8386290220423197, -0.03258329225728158),
    325                                     up: new Cesium.Cartesian3(0.05520718287689969, -0.00299987805272847, 0.9984704140286108)
    326                                 },
    327                                 complete: function() {
    328                                     if (confirm("你选择的是" + modelName + ",是否查看详细模型?")) {
    329                                         LoadBim(modelBimId);
    330                                     }
    331                                     unHighLightModel(modelId);
    332                                 },
    333                             });
    334                         }
    335                     }
    336                 }
    337             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    338         }
    339         else if ("addPin" == mode)
    340         {
    341             handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    342             handler.setInputAction(function (click) {
    343                 var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
    344                 if (cartesian) {
    345                     var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    346                     tempPinLon = Cesium.Math.toDegrees(cartographic.longitude);
    347                     tempPinLat = Cesium.Math.toDegrees(cartographic.latitude);
    348                     $('#addPinModal').modal('show');
    349                 }
    350             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    351         }
    352         else if ("erase" == mode)
    353         {
    354             handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    355             handler.setInputAction(function (click) {
    356                 var pick = scene.pick(click.position);
    357                 if (Cesium.defined(pick) && Cesium.defined(pick.id) && Cesium.defined(pick.id._id)) {
    358                     for (var i = 0; i < models.length; i++) {
    359                         if ( pick.id != undefined && tempPinEntities[i].id == pick.id._id) {
    360                             removePoint(tempPinEntities[i]);
    361                             tempPinEntities.splice(i, 1);
    362                         }
    363                     }
    364                 }
    365             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    366         }
    367         else if ("drawLine" == mode)
    368         {
    369             tempPoints = [];
    370             handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    371             handler.setInputAction(function (click) {
    372                 var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
    373                 if (cartesian) {
    374                     var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    375                     var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
    376                     var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
    377                     tempPoints.push({ lon: longitudeString, lat: latitudeString });
    378                     var tempLength = tempPoints.length;
    379                     drawPoint(tempPoints[tempPoints.length - 1]);
    380                     if (tempLength > 1) {
    381                         drawLine(tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1], true);
    382                     }
    383                 }
    384             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    385             handler.setInputAction(function (click) {
    386                 tempPoints = [];
    387             }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    388         }
    389         else if ("drawCircle" == mode)
    390         {
    391             tempPoints = [];
    392             handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    393             handler.setInputAction(function (click) {
    394                 var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
    395                 if (cartesian) {
    396                     var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    397                     var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
    398                     var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
    399                     tempPoints.push({ lon: longitudeString, lat: latitudeString });
    400                     var tempLength = tempPoints.length;
    401                     if (tempLength == 1) {
    402                         drawPoint(tempPoints[0]);
    403                     }
    404                     else if (tempLength == 2) {
    405                         drawPoint(tempPoints[1]);
    406                         drawLine(tempPoints[0], tempPoints[1], true);
    407                         //算两点间距离
    408                         var distance = getFlatternDistance(tempPoints[0].lat, tempPoints[0].lon, tempPoints[1].lat, tempPoints[1].lon);
    409 
    410                         var entity =
    411                         viewer.
    412                         entities.add({
    413                             position: Cesium.Cartesian3.fromDegrees(tempPoints[0].lon, tempPoints[0].lat),
    414                             ellipse: {
    415                                 semiMinorAxis: distance,
    416                                 semiMajorAxis: distance,
    417                                 height: 0,
    418                                 material: Cesium.Color.fromRandom({ alpha: 0.8 })
    419                             }
    420                         });
    421                         tempEntities.push(entity);
    422 
    423                         //高亮圈内模型
    424                         for (var i = 0; i < loadedModels.length; i++) {
    425                             for (var j = 0; j < models.length; j++) {
    426                                 if (loadedModels[i].id == models[j].id && getFlatternDistance(models[j].lat, models[j].lon, tempPoints[0].lat, tempPoints[0].lon) <= distance) {
    427                                     loadedModels[i].color = Cesium.Color.SPRINGGREEN;
    428                                 }
    429                             }
    430                         }
    431 
    432                         //面积
    433                         setTimeout(function () { alert("面积是 " + Math.PI * distance * distance + "平方米") },500);
    434 
    435                         tempPoints = [];
    436                     }
    437                 }
    438             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    439         }
    440         else if ("drawSquare" == mode) {
    441             tempPoints = [];
    442             handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    443             handler.setInputAction(function (click) {
    444                 var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
    445                 if (cartesian) {
    446                     var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    447                     var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
    448                     var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
    449                     tempPoints.push({ lon: longitudeString, lat: latitudeString });
    450                     var tempLength = tempPoints.length;
    451                     if (tempLength == 1) {
    452                         drawPoint(tempPoints[0]);
    453                     }
    454                     else if (tempLength == 2) {
    455                         //算两点间距离
    456                         var distance = getFlatternDistance(tempPoints[0].lat, tempPoints[0].lon, tempPoints[1].lat, tempPoints[1].lon);
    457 
    458                         var entity =
    459                         viewer.
    460                         entities.add({
    461                             position: Cesium.Cartesian3.fromDegrees(tempPoints[0].lon, tempPoints[0].lat),
    462                             ellipse: {
    463                                 semiMinorAxis: distance,
    464                                 semiMajorAxis: distance,
    465                                 height: 0,
    466                                 material: Cesium.Color.fromRandom({ alpha: 0.8 })
    467                             }
    468                         });
    469                         tempEntities.push(entity);
    470 
    471                         //高亮圈内模型
    472                         for (var i = 0; i < loadedModels.length; i++) {
    473                             for (var j = 0; j < models.length; j++) {
    474                                 if (loadedModels[i].id == models[j].id && getFlatternDistance(models[j].lat, models[j].lon, tempPoints[0].lat, tempPoints[0].lon) <= distance) {
    475                                     loadedModels[i].color = Cesium.Color.SPRINGGREEN;
    476                                 }
    477                             }
    478                         }
    479 
    480                         tempPoints = [];
    481                     }
    482                 }
    483             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    484         }
    485     }
    486 
    487     function drawPoint(point) {
    488         var entity = 
    489         viewer.entities.add({
    490             position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
    491             point: {
    492                 pixelSize: 10,
    493                 color: Cesium.Color.CHARTREUSE
    494             }
    495         });
    496         tempEntities.push(entity);
    497     }
    498 
    499     function removePoint(entity) {
    500         viewer.entities.remove(entity);
    501     }
    502 
    503     function drawLine(point1, point2, showDistance) {
    504         var entity =
    505         viewer.entities.add({
    506             polyline: {
    507                 positions: [Cesium.Cartesian3.fromDegrees(point1.lon, point1.lat), Cesium.Cartesian3.fromDegrees(point2.lon, point2.lat)],
    508                  10.0,
    509                 material: new Cesium.PolylineGlowMaterialProperty({
    510                     color: Cesium.Color.CHARTREUSE.withAlpha(.5)
    511                 })
    512             }
    513         });
    514         tempEntities.push(entity);
    515         if (showDistance) {
    516             var w = Math.abs(point1.lon - point2.lon);
    517             var h = Math.abs(point1.lat - point2.lat);
    518             var offsetV = w >= h ? 0.0005 : 0;
    519             var offsetH = w < h ? 0.001 : 0;
    520             var distance = getFlatternDistance(point1.lat, point1.lon, point2.lat, point2.lon);
    521             entity =
    522                 viewer.entities.add({
    523                     position: Cesium.Cartesian3.fromDegrees(((point1.lon + point2.lon) / 2) + offsetH,
    524                     ((point1.lat + point2.lat) / 2) + offsetV),
    525                     label: {
    526                         text: distance.toFixed(1) + 'm',
    527                         font: '22px Helvetica',
    528                         fillColor: Cesium.Color.WHITE
    529                     }
    530                 });
    531             tempEntities.push(entity);
    532         }
    533     }
    534 
    535     function drawPoly(points) {
    536         var pArray = [];
    537         for (var i = 0; i < points.length; i ++) {
    538             pArray.push(points[i].lon);
    539             pArray.push(points[i].lat);
    540         }
    541         var entity =
    542         viewer.entities.add({
    543             polygon: {
    544                 hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(pArray)),
    545                 material: Cesium.Color.CHARTREUSE.withAlpha(.5)
    546             }
    547         });
    548         tempEntities.push(entity);
    549     }
    550 
    551     function getColor(colorName, alpha) {
    552         var color = Cesium.Color[colorName.toUpperCase()];
    553         return Cesium.Color.fromAlpha(color, parseFloat(alpha));
    554     }
    555 
    556     //判断点是否在多边形内
    557     function PointInPoly(point, polyPoints) {
    558         for (var c = false, i = -1, l = polyPoints.length, j = l - 1; ++i < l; j = i)
    559             ((polyPoints[i].lat <= point.lat && point.lat < polyPoints[j].lat) || (polyPoints[j].lat <= point.lat && point.lat < polyPoints[i].lat))
    560             && (point.lon < (polyPoints[j].lon - polyPoints[i].lon) * (point.lat - polyPoints[i].lat) / (polyPoints[j].lat - polyPoints[i].lat) + polyPoints[i].lon)
    561             && (c = !c);
    562         return c;
    563     }
    564 
    565     //选区内模型高亮
    566     function highLightAssetsInArea(points) {
    567         
    568         for (var i = 0; i < loadedModels.length; i++) {
    569             for (var j = 0; j < models.length; j ++) {
    570                 if (loadedModels[i].id == models[j].id && PointInPoly(models[j], points)) {
    571                     loadedModels[i].color = Cesium.Color.SPRINGGREEN;
    572                 }
    573             }
    574         }
    575     }
    576 
    577     //高亮模型
    578     function highLigthModel(modelId) {
    579         for (var i = 0; i < loadedModels.length; i ++) {
    580             if (loadedModels[i].id == modelId) {
    581                 loadedModels[i].color = Cesium.Color.SPRINGGREEN;
    582             }
    583         }
    584     }
    585 
    586     //取消高亮模型
    587     function unHighLightModel(modelId) {
    588         for (var i = 0; i < loadedModels.length; i++) {
    589             if (loadedModels[i].id == modelId) {
    590                 loadedModels[i].color = {
    591                     red: 1,
    592                     green: 1,
    593                     blue: 1,
    594                     alpha: 1
    595                 };
    596             }
    597         }
    598     }
    599 
    600     //定位
    601     function goLocation() {
    602         $('#flyToModal').modal('hide');
    603         $('#flyToModal').on('hidden.bs.modal', function(e) {
    604             viewer.camera.flyTo({
    605                 destination: Cesium.Cartesian3.fromDegrees($("#jumpLon").val(), $("#jumpLat").val(), 1000.0)
    606             });
    607         });
    608     }
    609 
    610     //加点
    611     function addPin() {
    612         $('#addPinModal').modal('hide');
    613         var pin = viewer.entities.add({
    614             name: $("#pinContent").val(),
    615             position: Cesium.Cartesian3.fromDegrees(tempPinLon, tempPinLat),
    616             billboard: {
    617                 image: $("#pinLabel").val() == "" ? pinBuilder.fromColor(Cesium.Color[$("#pinColor").val().toUpperCase()], 48).toDataURL() :
    618             pinBuilder.fromText($("#pinLabel").val(), Cesium.Color[$("#pinColor").val().toUpperCase()], 64).toDataURL(),
    619                 verticalOrigin: Cesium.VerticalOrigin.BOTTOM
    620             }
    621         });
    622         tempPinEntities.push(pin);
    623         $("#pinLabel").val("");
    624         $("#pinContent").val("");
    625     }
    626 
    627     //计算两点间距离
    628     function getFlatternDistance(lat1, lng1, lat2, lng2) {
    629         var EARTH_RADIUS = 6378137.0;    //单位M
    630         var PI = Math.PI;
    631 
    632         function getRad(d) {
    633             return d * PI / 180.0;
    634         }
    635         var f = getRad((lat1 + lat2) / 2);
    636         var g = getRad((lat1 - lat2) / 2);
    637         var l = getRad((lng1 - lng2) / 2);
    638 
    639         var sg = Math.sin(g);
    640         var sl = Math.sin(l);
    641         var sf = Math.sin(f);
    642 
    643         var s, c, w, r, d, h1, h2;
    644         var a = EARTH_RADIUS;
    645         var fl = 1 / 298.257;
    646 
    647         sg = sg * sg;
    648         sl = sl * sl;
    649         sf = sf * sf;
    650 
    651         s = sg * (1 - sl) + (1 - sf) * sl;
    652         c = (1 - sg) * (1 - sl) + sf * sl;
    653 
    654         w = Math.atan(Math.sqrt(s / c));
    655         r = Math.sqrt(s * c) / w;
    656         d = 2 * w * a;
    657         h1 = (3 * r - 1) / 2 / c;
    658         h2 = (3 * r + 1) / 2 / s;
    659 
    660         return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
    661     }
    662 
    663     //计算多边形面积
    664     var earthRadiusMeters = 6371000.0;
    665     var metersPerDegree = 2.0 * Math.PI * earthRadiusMeters / 360.0;
    666     var radiansPerDegree = Math.PI / 180.0;
    667     var degreesPerRadian = 180.0 / Math.PI;
    668     var pointArr;
    669     function SphericalPolygonAreaMeters(points) {
    670         var totalAngle = 0;
    671         for (var i = 0; i < points.length; i++) {
    672             var j = (i + 1) % points.length;
    673             var k = (i + 2) % points.length;
    674             totalAngle += Angle(points[i], points[j], points[k]);
    675         }
    676         var planarTotalAngle = (points.length - 2) * 180.0;
    677         var sphericalExcess = totalAngle - planarTotalAngle;
    678         if (sphericalExcess > 420.0) {
    679             totalAngle = points.length * 360.0 - totalAngle;
    680             sphericalExcess = totalAngle - planarTotalAngle;
    681         } else if (sphericalExcess > 300.0 && sphericalExcess < 420.0) {
    682             sphericalExcess = Math.abs(360.0 - sphericalExcess);
    683         }
    684         return sphericalExcess * radiansPerDegree * earthRadiusMeters * earthRadiusMeters;
    685     }
    686 
    687     /*角度*/
    688     function Angle(p1, p2, p3) {
    689         var bearing21 = Bearing(p2, p1);
    690         var bearing23 = Bearing(p2, p3);
    691         var angle = bearing21 - bearing23;
    692         if (angle < 0) {
    693             angle += 360;
    694         }
    695         return angle;
    696     }
    697     /*方向*/
    698     function Bearing(from, to) {
    699         var lat1 = from.lat * radiansPerDegree;
    700         var lon1 = from.lon * radiansPerDegree;
    701         var lat2 = to.lat * radiansPerDegree;
    702         var lon2 = to.lon * radiansPerDegree;
    703         var angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
    704         if (angle < 0) {
    705             angle += Math.PI * 2.0;
    706         }
    707         angle = angle * degreesPerRadian;
    708         return angle;
    709     }
    710 
    711     function LoadBim(projId) {
    712         //加载模型
    713         $('#myTabs li:eq(1) a').tab('show');
    714         
    715     }
    

    View Code

  • 相关阅读:
    Atitit. visual studio vs2003 vs2005 vs2008  VS2010 vs2012 vs2015新特性 新功能.doc
    Atitit. C#.net clr 2.0  4.0新特性
    Atitit. C#.net clr 2.0  4.0新特性
    Atitit.通过null 参数 反射  动态反推方法调用
    Atitit.通过null 参数 反射  动态反推方法调用
    Atitit..net clr il指令集 以及指令分类  与指令详细说明
    Atitit..net clr il指令集 以及指令分类  与指令详细说明
    Atitit.变量的定义 获取 储存 物理结构 基本类型简化 隐式转换 类型推导 与底层原理 attilaxDSL
    Atitit.变量的定义 获取 储存 物理结构 基本类型简化 隐式转换 类型推导 与底层原理 attilaxDSL
    Atitit.跨语言反射api 兼容性提升与增强 java c#。Net  php  js
  • 原文地址:https://www.cnblogs.com/hustshu/p/14864551.html
Copyright © 2011-2022 走看看