<!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> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </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">«</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">»</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">×</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">×</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"> </option>
<option value="DIMGRAY" style="background-color:#696969"> </option>
<option value="SLATEGRAY" style="background-color:#708090"> </option>
<option value="SLATEGREY" style="background-color:#708090"> </option>
<option value="LIGHTSLATEGRAY" style="background-color:#778899"> </option>
<option value="MAROON" style="background-color:#800000"> </option>
<option value="PURPLE" style="background-color:#800080"> </option>
<option value="OLIVE" style="background-color:#808000"> </option>
<option value="GRAY" style="background-color:#808080"> </option>
<option value="BLACK" style="background-color:#000000"> </option>
<option value="NAVY" style="background-color:#000080"> </option>
<option value="DARKBLUE" style="background-color:#00008B"> </option>
<option value="MEDIUMBLUE" style="background-color:#0000CD"> </option>
<option value="BLUE" style="background-color:#0000FF"> </option>
<option value="DARKGREEN" style="background-color:#006400"> </option>
<option value="GREEN" style="background-color:#008000"> </option>
<option value="TEAL" style="background-color:#008080"> </option>
<option value="DARKCYAN" style="background-color:#008B8B"> </option>
<option value="DEEPSKYBLUE" style="background-color:#00BFFF"> </option>
<option value="DARKTURQUOISE" style="background-color:#00CED1"> </option>
<option value="MEDIUMSPRINGGREEN" style="background-color:#00FA9A"> </option>
<option value="LIME" style="background-color:#00FF00"> </option>
<option value="SPRINGGREEN" style="background-color:#00FF7F"> </option>
<option value="AQUA" style="background-color:#00FFFF"> </option>
<option value="CYAN" style="background-color:#00FFFF"> </option>
<option value="DODGERBLUE" style="background-color:#1E90FF"> </option>
<option value="LIGHTSEAGREEN" style="background-color:#20B2AA"> </option>
<option value="FORESTGREEN" style="background-color:#228B22"> </option>
<option value="SEAGREEN" style="background-color:#2E8B57"> </option>
<option value="DARKSLATEGRAY" style="background-color:#2F4F4F"> </option>
<option value="LIMEGREEN" style="background-color:#32CD32"> </option>
<option value="MEDIUMSEAGREEN" style="background-color:#3CB371"> </option>
<option value="TURQUOISE" style="background-color:#40E0D0"> </option>
<option value="ROYALBLUE" style="background-color:#4169E1"> </option>
<option value="STEELBLUE" style="background-color:#4682B4"> </option>
<option value="DARKSLATEBLUE" style="background-color:#483D8B"> </option>
<option value="MEDIUMTURQUOISE" style="background-color:#48D1CC"> </option>
<option value="INDIGO" style="background-color:#4B0082"> </option>
<option value="DARKOLIVEGREEN" style="background-color:#556B2F"> </option>
<option value="CADETBLUE" style="background-color:#5F9EA0"> </option>
<option value="CORNFLOWERBLUE" style="background-color:#6495ED"> </option>
<option value="MEDIUMAQUAMARINE" style="background-color:#66CDAA"> </option>
<option value="SLATEBLUE" style="background-color:#6A5ACD"> </option>
<option value="OLIVEDRAB" style="background-color:#6B8E23"> </option>
<option value="MEDIUMSLATEBLUE" style="background-color:#7B68EE"> </option>
<option value="LAWNGREEN" style="background-color:#7CFC00"> </option>
<option value="CHARTREUSE" style="background-color:#7FFF00"> </option>
<option value="AQUAMARINE" style="background-color:#7FFFD4"> </option>
<option value="SKYBLUE" style="background-color:#87CEEB"> </option>
<option value="LIGHTSKYBLUE" style="background-color:#87CEFA"> </option>
<option value="BLUEVIOLET" style="background-color:#8A2BE2"> </option>
<option value="DARKRED" style="background-color:#8B0000"> </option>
<option value="DARKMAGENTA" style="background-color:#8B008B"> </option>
<option value="SADDLEBROWN" style="background-color:#8B4513"> </option>
<option value="DARKSEAGREEN" style="background-color:#8FBC8F"> </option>
<option value="LIGHTGREEN" style="background-color:#90EE90"> </option>
<option value="MEDIUMPURPLE" style="background-color:#9370DB"> </option>
<option value="DARKVIOLET" style="background-color:#9400D3"> </option>
<option value="PALEGREEN" style="background-color:#98FB98"> </option>
<option value="DARKORCHID" style="background-color:#9932CC"> </option>
<option value="YELLOWGREEN" style="background-color:#9ACD32"> </option>
<option value="SIENNA" style="background-color:#A0522D"> </option>
<option value="BROWN" style="background-color:#A52A2A"> </option>
<option value="DARKGRAY" style="background-color:#A9A9A9"> </option>
<option value="DARKGREY" style="background-color:#A9A9A9"> </option>
<option value="LIGHTBLUE" style="background-color:#ADD8E6"> </option>
<option value="GREENYELLOW" style="background-color:#ADFF2F"> </option>
<option value="PALETURQUOISE" style="background-color:#AFEEEE"> </option>
<option value="LIGHTSTEELBLUE" style="background-color:#B0C4DE"> </option>
<option value="POWDERBLUE" style="background-color:#B0E0E6"> </option>
<option value="FIREBRICK" style="background-color:#B22222"> </option>
<option value="DARKGOLDENROD" style="background-color:#B8860B"> </option>
<option value="MEDIUMORCHID" style="background-color:#BA55D3"> </option>
<option value="ROSYBROWN" style="background-color:#BC8F8F"> </option>
<option value="DARKKHAKI" style="background-color:#BDB76B"> </option>
<option value="SILVER" style="background-color:#C0C0C0"> </option>
<option value="MEDIUMVIOLETRED" style="background-color:#C71585"> </option>
<option value="INDIANRED" style="background-color:#CD5C5C"> </option>
<option value="PERU" style="background-color:#CD853F"> </option>
<option value="CHOCOLATE" style="background-color:#D2691E"> </option>
<option value="TAN" style="background-color:#D2B48C"> </option>
<option value="LIGHTGRAY" style="background-color:#D3D3D3"> </option>
<option value="THISTLE" style="background-color:#D8BFD8"> </option>
<option value="ORCHID" style="background-color:#DA70D6"> </option>
<option value="GOLDENROD" style="background-color:#DAA520"> </option>
<option value="PALEVIOLETRED" style="background-color:#DB7093"> </option>
<option value="CRIMSON" style="background-color:#DC143C"> </option>
<option value="GAINSBORO" style="background-color:#DCDCDC"> </option>
<option value="PLUM" style="background-color:#DDA0DD"> </option>
<option value="BURLYWOOD" style="background-color:#DEB887"> </option>
<option value="LIGHTCYAN" style="background-color:#E0FFFF"> </option>
<option value="LAVENDER" style="background-color:#E6E6FA"> </option>
<option value="DARKSALMON" style="background-color:#E9967A"> </option>
<option value="VIOLET" style="background-color:#EE82EE"> </option>
<option value="PALEGOLDENROD" style="background-color:#EEE8AA"> </option>
<option value="LIGHTCORAL" style="background-color:#F08080"> </option>
<option value="KHAKI" style="background-color:#F0E68C"> </option>
<option value="ALICEBLUE" style="background-color:#F0F8FF"> </option>
<option value="HONEYDEW" style="background-color:#F0FFF0"> </option>
<option value="AZURE" style="background-color:#F0FFFF"> </option>
<option value="SANDYBROWN" style="background-color:#F4A460"> </option>
<option value="WHEAT" style="background-color:#F5DEB3"> </option>
<option value="BEIGE" style="background-color:#F5F5DC"> </option>
<option value="WHITESMOKE" style="background-color:#F5F5F5"> </option>
<option value="MINTCREAM" style="background-color:#F5FFFA"> </option>
<option value="GHOSTWHITE" style="background-color:#F8F8FF"> </option>
<option value="SALMON" style="background-color:#FA8072"> </option>
<option value="ANTIQUEWHITE" style="background-color:#FAEBD7"> </option>
<option value="LINEN" style="background-color:#FAF0E6"> </option>
<option value="LIGHTGOLDENRODYELLOW" style="background-color:#FAFAD2"> </option>
<option value="OLDLACE" style="background-color:#FDF5E6"> </option>
<option value="RED" style="background-color:#FF0000"> </option>
<option value="FUSCHIA" style="background-color:#FF00FF"> </option>
<option value="MAGENTA" style="background-color:#FF00FF"> </option>
<option value="DEEPPINK" style="background-color:#FF1493"> </option>
<option value="ORANGERED" style="background-color:#FF4500"> </option>
<option value="TOMATO" style="background-color:#FF6347"> </option>
<option value="HOTPINK" style="background-color:#FF69B4"> </option>
<option value="CORAL" style="background-color:#FF7F50"> </option>
<option value="DARKORANGE" style="background-color:#FF8C00"> </option>
<option value="ORANGE" style="background-color:#FFA500"> </option>
<option value="LIGHTPINK" style="background-color:#FFB6C1"> </option>
<option value="PINK" style="background-color:#FFC0CB"> </option>
<option value="GOLD" style="background-color:#FFD700"> </option>
<option value="PEACHPUFF" style="background-color:#FFDAB9"> </option>
<option value="NAVAJOWHITE" style="background-color:#FFDEAD"> </option>
<option value="MOCCASIN" style="background-color:#FFE4B5"> </option>
<option value="BISQUE" style="background-color:#FFE4C4"> </option>
<option value="MISTYROSE" style="background-color:#FFE4E1"> </option>
<option value="BLANCHEDALMOND" style="background-color:#FFEBCD"> </option>
<option value="PAPAYAWHIP" style="background-color:#FFEFD5"> </option>
<option value="LAVENDAR_BLUSH" style="background-color:#FFF0F5"> </option>
<option value="SEASHELL" style="background-color:#FFF5EE"> </option>
<option value="CORNSILK" style="background-color:#FFF8DC"> </option>
<option value="LEMONCHIFFON" style="background-color:#FFFACD"> </option>
<option value="FLORALWHITE" style="background-color:#FFFAF0"> </option>
<option value="SNOW" style="background-color:#FFFAFA"> </option>
<option value="YELLOW" style="background-color:#FFFF00"> </option>
<option value="LIGHTYELLOW" style="background-color:#FFFFE0"> </option>
<option value="IVORY" style="background-color:#FFFFF0"> </option>
<option value="WHITE" style="background-color:#FFFFFF"> </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功能进行了研究，特此记录下来。
如上图，这是一个给市政GISBIM管理平台做的原型，GIS部分使用Cesium，BIM部分使用第三方商业引擎。GIS控制宏观、BIM支持微观（现在还没有什么好的引擎能做到GISBIM的无缝切换）。
常用功能介绍：
- 卫星矢量地图切换
我这里使用的是天地图提供的服务，卫星地图和矢量地图分别调用不同的接口，卫星地图显示效果如上图，矢量地图显示如下图：
- 道路及基本标注
点“道路及基本标注”后，将路名等显示并加载在原先的图层上
- 加标记点
首先在地图上点击需要加点的位置，然后在弹出框内选取颜色，设置提示文字和显示内容，点击保存；可以添加多个标记。
- 绘制线段
连续点击地图两次就可以绘制线段（可绘制折线）
- 绘制圆形
支持绘制多个圆形，每个圆形随机颜色，能够显示园的半径、面积等
- 绘制多边形
连续点击地图上的点，再右键闭合，就可以绘制多边形，能够计算多边形每一边的边长、总面积等
- 保存视角、跳转视角
保存当前的视角；输入经纬度，跳转到指定位置
- 隐藏、加载模型
可以动态加载、隐藏三维模型（为了便于演示，所有的模型均放大了几百倍）；地图上的绘制功能对所有模型都有效，包含在范围内的模型会自动高亮并显示；点选模型能自动居中并提示是否跳转到BIM模型显示（BIM模型也是基于三维WebGL的）
- 搜索
可以根据输入的关键词进行搜索，使用百度或者高德的API，或者使用天地图的API，搜索后进行定位，只是百度、高德、天地图等用的是不同的坐标系，转换非常麻烦。
- 清除绘制
清除所有绘制的部分
以上功能只要再完善下，封装下就可以成为一个很不错的三维GIS项目基础平台了，附我们公司做的GIS+BIM的产品截图，使用了3D-Tiles：）
附：示例程序的js部分代码
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