基于cesium的开源框架

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/Enbir/article/details/85088647
加载3Dtile模型数据

                                       

3D展示效果
geojson格式数据展示

白驹过隙,时光如梭,又到一年年尾。回想一年的工作,感觉做了很多,又感觉什么都没做成。so,在此回顾一下今年经历过的那些个不一定有头,不一定有尾的项目经历。今天讲讲Cesium。

我是个随性的人,想到哪里讲到哪里,但是逻辑还是很清晰的,细节即是如此。

Cesium是一个很强大的3D框架,很多大公司的底层框架都基于此。so自己实践做了一些实验,对Cesium做了比较详细的了解,并简单实现了测面、测距、加载各种格式的数据(.geojson 3Dtile .kml .czml等格式)。废话不多说,具体了解一下。

首先是Cesium开发包的引入,直接在Cesium的官网上下载就好了,然后新建的项目在项目的Apps里面存放即可。

头部导入.js类


 
 
  1. <!-- script部分 -->
  2. <script src="../../../Build/Cesium/Cesium.js"></script>

初始化Cesium界面


 
 
  1. var viewer = new Cesium.Viewer( 'map_container', {
  2. animation: false,
  3. baseLayerPicker: false,
  4. geocoder: true,
  5. timeline: false,
  6. sceneModePicker: true,
  7. navigationHelpButton: false,
  8. infoBox: true,
  9. fullscreenButton: false,
  10. vrButton: true,
  11. homeButton: false,
  12. selectionIndicator : false, //是否显示选取指示器组件
  13. });
  14. viewer._cesiumWidget._creditContainer.style.display = "none"; //去掉左下角那个不可爱的图标
  15. // viewer.extend(Cesium.viewerCesiumInspectorMixin); //那些个特效
  16. viewer.camera.setView({
  17. destination:Cesium.Cartesian3.fromDegrees( 111.07, 39.05, 20000000),
  18. orientation:{
  19. heading : Cesium.Math.toRadians( 0),
  20. pitch : Cesium.Math.toRadians( -90),
  21. roll : Cesium.Math.toRadians( 0) //heading、pitch和roll就是镜头相对于xyz轴的角度,比如pitch为-90°而另外两个为0时,就是90°向下俯视地球。
  22. }
  23. });

new操作的时候,后面{}里面的item都是可选的,改成true or false都可以,都是些特效类,玩腻了,除了必要的,都不要了,例如baselayerPicker底图选择器,里面包含多种数据源(google的啦,bingMap)

加载底图(天地图的,找了好久才找到)


 
 
  1. var layerone = viewer.scene.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({
  2. 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",
  3. layer: "tdtImgBasicLayer",
  4. style: "default",
  5. format: "image/jpeg",
  6. tileMatrixSetID: "GoogleMapsCompatible",
  7. show: false
  8. })); //卫星影像
  9. // layerone.alpha = 0.3;
  10. // layerone.brightness = 2.0;
  11. var layertwo = viewer.scene.imageryLayers.addImageryProvider( new Cesium.WebMapTileServiceImageryProvider({
  12. 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",
  13. layer: "tdtImgAnnoLayer",
  14. style: "default",
  15. format: "image/jpeg",
  16. tileMatrixSetID: "GoogleMapsCompatible",
  17. show: false
  18. })); //注记图层

加载数据,不具体去分开了,因为我自己代码就是写在一起的,来个大集合,.geojson、.KML、tileset.json(3Dtile数据)

3Dtile是什么格式?该知道的总会知道,Cesium加载3Dtile


 
 
  1. var URL_MODEL = "/officalCesium/Apps/baseData/";
  2. $( '#upLoadFile').change( function () {
  3. var file = $( '#upLoadFile').get( 0).files[ 0];
  4. var filename = file.name;
  5. var t = filename.lastIndexOf( ".");
  6. var s = filename.substring(t+ 1,filename.length).toUpperCase();
  7. var dataType = document.getElementById( "typeInput");
  8. var value = dataType.options[dataType.selectedIndex].value.toUpperCase();
  9. $( '#addLayerModal').modal( 'hide'); //隐藏对话框
  10. if(s == value){
  11. if(value == "GEOJSON"){
  12. var filepath = URL_MODEL+filename;
  13. var geosonView = viewer.dataSources.add(Cesium.GeoJsonDataSource.load(filepath,{
  14. stroke: Cesium.Color.YELLOW, //设置为TRANSPARENT的时候,透明
  15. fill: Cesium.Color.YELLOW,
  16. strokeWidth: 5,
  17. markerSymbol: '?',
  18. }));
  19. viewer.flyTo(geosonView);
  20. // alert(filepath+"");
  21. }
  22. else if (value == "JSON" && filename.toUpperCase() == "TILESET.JSON"){
  23. var filepath = URL_MODEL+filename;
  24. var tileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({
  25. url: filepath, //数据路径
  26. maximumScreenSpaceError: 2, //默认16,最大屏幕空间错误
  27. //maximumNumberOfLoadedTiles: 1000,
  28. maximumMemoryUsage: 1024 //默认512,内存MB的最大数量
  29. }));
  30. viewer.flyTo(tileset);
  31. // alert(filepath+"");
  32. }
  33. else if(value == "KML"){
  34. var filepath = URL_MODEL+filename;
  35. var kml_view = Cesium.KmlDataSource.load(filepath);
  36. viewer.flyTo(kml_view);
  37. // alert(filepath+"");
  38. } else if(value == "CZML"){
  39. var filepath = URL_MODEL+filename;
  40. var dataRecourse = new Cesium.CzmlDataSource(filepath);
  41. dataRecourse.load();
  42. viewer.dataSources.add(dataRecourse);
  43. viewer.flyTo(data_resouce);
  44. }
  45. } else {
  46. alert( "上传失败,不是."+value+ "类型的文件");
  47. }
  48. });

飞行、复位等实用工具如下:


 
 
  1. //飞行到某个点
  2. function dingwei(lon,lat,height){
  3. viewer.camera.flyTo({
  4. destination : Cesium.Cartesian3.fromDegrees(lon,lat,height), // 设置位置
  5. orientation: {
  6. heading : Cesium.Math.toRadians( 20.0), // 方向
  7. pitch : Cesium.Math.toRadians( -90.0), // 倾斜角度
  8. roll : 0
  9. },
  10. duration: 5, // 设置飞行持续时间,默认会根据距离来计算
  11. complete: function () {
  12. // 到达位置后执行的回调函数
  13. console.log( '到达目的地');
  14. },
  15. cancle: function () {
  16. // 如果取消飞行则会调用此函数
  17. console.log( '飞行取消')
  18. },
  19. pitchAdjustHeight: -90, // 如果摄像机飞越高于该值,则调整俯仰俯仰的俯仰角度,并将地球保持在视口中。
  20. maximumHeight: 500, // 相机最大飞行高度
  21. flyOverLongitude: 100, // 如果到达目的地有2种方式,设置具体值后会强制选择方向飞过这个经度
  22. });
  23. }
  24. //复位地图
  25. function clearMap(){
  26. // dingwei(115.446105254,22.771558650,2000);
  27. viewer.flyTo(tileset);
  28. clearAllPan();
  29. }
  30. //清空地图
  31. function clearAll(){
  32. clearAllPan();
  33. }

然后就是测距测面,测量分两种吧,一直贴地的,一种是3D的那种,贴地量算没问题,3D的我写的代码还是有问题。


 
 
  1. //* 测距测面 */
  2. var scene = viewer.scene;
  3. var canvas = viewer.canvas;
  4. var clock = viewer.clock;
  5. var camera = viewer.scene.camera;
  6. //布尔型变量
  7. var isPoint = false;
  8. var isPolyline = false;
  9. var isPolygon_line = false;
  10. //是否开始绘制标识
  11. var isStartDraw = false;
  12. var isclear = false;
  13. var points = viewer.entities.add( new Cesium.Entity());
  14. var polylines = viewer.entities.add( new Cesium.Entity());
  15. var Polygons_Line = viewer.entities.add( new Cesium.Entity());
  16. //画多边形过程中展示的线最后要移除或者不显示
  17. var Polygon_Lines_remove = viewer.entities.add( new Cesium.Entity());
  18. var ellipsoid = scene.globe.ellipsoid;
  19. canvas.onclick = function () {
  20. canvas.focus();
  21. };
  22. var handler = new Cesium.ScreenSpaceEventHandler(canvas);
  23. viewer.zoomTo(viewer.entities);
  24. defaultZoomAmount_ = 3000000.0;
  25. var lastPointLon = -999.0;
  26. var lastPointLat = -999.0;
  27. var firstPointLon = -999.0;
  28. var firstPointLat = -999.0;
  29. var measurePointsArray= new Array();
  30. measurePointsArray.splice( 0,measurePointsArray.length);
  31. var endCartographic = new Cesium.Cartographic();
  32. var geodesic = new Cesium.EllipsoidGeodesic();
  33. var PolygonPointArray_line = null;
  34. var PolygonPointArray_fill = null;
  35. //鼠标移动时的那条线
  36. var moveLine_first = viewer.entities.add({
  37. id: "moveLine_first",
  38. name: 'line on the surface',
  39. polyline: {
  40. show: false,
  41. width: 2,
  42. material: Cesium.Color.WHITE
  43. }
  44. });
  45. var moveLine_second = viewer.entities.add({
  46. id: "moveLine_second",
  47. name: 'line on the surface',
  48. polyline: {
  49. show: false,
  50. width: 2,
  51. material: Cesium.Color.WHITE
  52. }
  53. });
  54. /* handler.setInputAction(function(){},
  55. Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);*/
  56. //鼠标移动时做的操作
  57. handler.setInputAction( function (movement) {
  58. //捕获椭球体,将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标,返回球体表面的点
  59. var cartesian=viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
  60. if(cartesian) {
  61. //将笛卡尔三维坐标转为地图坐标(弧度)
  62. var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
  63. //将地图坐标(弧度)转为十进制的度数
  64. var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed( 4);
  65. var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed( 4);
  66. var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed( 2);
  67. longitude_show.innerHTML = log_String;
  68. latitude_show.innerHTML = lat_String;
  69. altitude_show.innerHTML = alti_String;
  70. }
  71. }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  72. function clearAllPan() {
  73. viewer.entities.removeAll();
  74. isStartDraw = false;
  75. isclear = true;
  76. document.body.style.cursor = "pointer";
  77. document.getElementById( "map_container").style.cursor = "pointer";
  78. handler.setInputAction( function(){
  79. },Cesium.ScreenSpaceEventType.LEFT_CLICK);
  80. }
  81. var QQ= 0;
  82. function clearAllPan1(id) {
  83. if(id!= undefined){
  84. var tempmark = viewer.entities.getById(id);
  85. viewer.entities.remove(tempmark);
  86. }
  87. QQ= 1;
  88. }
  89. //双击停止加线面
  90. function shuangji(){
  91. isPolyline = false;
  92. isPolygon_line = false;
  93. isPolygon_fill = false;
  94. isStartDraw = false;
  95. }
  96. //加点
  97. function addPoint() {
  98. isPoint = true;
  99. isPolyline = false;
  100. isPolygon_line = false;
  101. isPolygon_fill = false;
  102. isStartDraw = false;
  103. QQ= 0;
  104. }
  105. //加线
  106. function measureLength() {
  107. var select_measure = document.getElementById( "selOpt");
  108. var value_measure = select_measure.options[select_measure.selectedIndex].value;
  109. if(value_measure == 2){
  110. isPoint = false;
  111. isPolyline = true;
  112. isPolygon_line = false;
  113. isPolygon_fill = false;
  114. isStartDraw = false;
  115. QQ= 0;
  116. document.body.style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,crosshair";
  117. document.getElementById( "map_container").style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,crosshair";
  118. addOnClickListener();
  119. }
  120. }
  121. function addOnClickListener(){
  122. handler.setInputAction( function(){},
  123. Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
  124. //鼠标移动时做的操作
  125. handler.setInputAction( function (movement) {
  126. if (isPolyline || isPolygon_line ) {
  127. var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
  128. if (cartesian && isStartDraw) {
  129. //做清除工作把全局变量moveLine清除掉了 ,需要重新加到entities上 否则显示不正常
  130. if (isclear) {
  131. viewer.entities.add(moveLine_first);
  132. viewer.entities.add(moveLine_second);
  133. isclear = false;
  134. }
  135. var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  136. var curMovementLon = Cesium.Math.toDegrees(cartographic.longitude).toFixed( 12);
  137. var curMovementLat = Cesium.Math.toDegrees(cartographic.latitude).toFixed( 12);
  138. viewer.entities.getById( "moveLine_first").polyline.positions = Cesium.Cartesian3.fromDegreesArray([lastPointLon, lastPointLat ,curMovementLon,
  139. curMovementLat]); //修改属性
  140. viewer.entities.getById( "moveLine_first").polyline.show = true;
  141. if (PolygonPointArray_line != null) {
  142. if (PolygonPointArray_line.length >= 3) {
  143. viewer.entities.getById( "moveLine_second").polyline.positions = Cesium.Cartesian3.fromDegreesArray([curMovementLon, curMovementLat, firstPointLon, firstPointLat]); //修改属性
  144. viewer.entities.getById( "moveLine_second").polyline.show = true;
  145. }
  146. }
  147. }
  148. }
  149. //捕获椭球体,将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标,返回球体表面的点
  150. var cartesian=viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
  151. if(cartesian){
  152. //将笛卡尔三维坐标转为地图坐标(弧度)
  153. var cartographic=viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
  154. //将地图坐标(弧度)转为十进制的度数
  155. var lat_String=Cesium.Math.toDegrees(cartographic.latitude).toFixed( 4);
  156. var log_String=Cesium.Math.toDegrees(cartographic.longitude).toFixed( 4);
  157. var alti_String=(viewer.camera.positionCartographic.height/ 1000).toFixed( 2);
  158. longitude_show.innerHTML=log_String;
  159. latitude_show.innerHTML=lat_String;
  160. altitude_show.innerHTML=alti_String;
  161. }
  162. }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  163. //鼠标左击做的操作
  164. handler.setInputAction( function (click) {
  165. if(QQ== 1){
  166. var pickedObject = viewer.scene.pick(click.position);
  167. if (Cesium.defined(pickedObject) && (pickedObject.id != undefined)) {
  168. actEntity = pickedObject.id;
  169. clearAllPan1(actEntity._id);
  170. }
  171. }
  172. if (isPoint || isPolyline || isPolygon_line ) {
  173. var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
  174. if (cartesian) {
  175. var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  176. var currentClickLon = Cesium.Math.toDegrees(cartographic.longitude).toFixed( 12);
  177. var currentClickLat = Cesium.Math.toDegrees(cartographic.latitude).toFixed( 12);
  178. /* var currentClickHeight = cartographic.height;
  179. console.log(currentClickHeight); */
  180. if (!isStartDraw) {
  181. viewer.entities.add({
  182. position: cartesian,
  183. point: {
  184. parent: points,
  185. pixelSize: 5,
  186. color: Cesium.Color.YELLOW
  187. }
  188. });
  189. firstPointLon = currentClickLon;
  190. firstPointLat = currentClickLat;
  191. PolygonPointArray_line = null;
  192. PolygonPointArray_fill = null;
  193. measurePointsArray.splice( 0,measurePointsArray.length);
  194. // var startCartographic = Cesium.Cartographic.fromDegrees(firstPointLon, firstPointLat);
  195. measurePointsArray.push(cartographic);
  196. isStartDraw = true;
  197. } else {
  198. if (isPoint) {
  199. viewer.entities.add({
  200. position: cartesian,
  201. point: {
  202. parent: points,
  203. pixelSize: 5,
  204. color: Cesium.Color.YELLOW
  205. }
  206. });
  207. }
  208. if (isPolyline || isPolygon_line )
  209. {
  210. // endCartographic = Cesium.Cartographic.fromDegrees(currentClickLon, currentClickLat,currentClickHigh);
  211. endCartographic = Cesium.Cartographic.fromDegrees(currentClickLon, currentClickLat);
  212. console.log(endCartographic);
  213. measurePointsArray.push(endCartographic);
  214. var arrLength=measurePointsArray.length;
  215. var tmpDis= 0;
  216. var sumDis= 0;
  217. for( var i= 1;i<arrLength;i++)
  218. {
  219. geodesic.setEndPoints(measurePointsArray[i -1], measurePointsArray[i]);
  220. tmpDis= Math.round(geodesic.surfaceDistance);
  221. sumDis=sumDis+tmpDis;
  222. }
  223. if(sumDis> 1000)
  224. {
  225. var polylineDis= (sumDis / 1000).toFixed( 1) + " km";
  226. }
  227. else{
  228. var polylineDis= sumDis + " m";
  229. }
  230. // console.log(dis);
  231. viewer.entities.add({
  232. parent: polylines,
  233. polyline: {
  234. // positions: Cesium.Cartesian3.fromDegreesArray([lastPointLon, lastPointLat,lastPointHigh, currentClickLon, currentClickLat,currentClickHigh]),
  235. positions: Cesium.Cartesian3.fromDegreesArray([lastPointLon, lastPointLat, currentClickLon, currentClickLat]),
  236. width: 2,
  237. material: Cesium.Color.RED
  238. },
  239. label: {
  240. text: polylineDis.toString(),
  241. font: '20px SimHei ',
  242. Width: 10,
  243. style: Cesium.LabelStyle.FILL_AND_OUTLINE,
  244. fillColor: Cesium.Color.YELLOW,
  245. outlineColor : Cesium.Color.GRAY,
  246. outlineWidth : 5,
  247. horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
  248. verticalOrigin: Cesium.VerticalOrigin.BOTTOM
  249. },
  250. /* label : {
  251. // This callback updates the length to print each frame.
  252. text: polylineDis.toString(),
  253. font : '25px',
  254. pixelOffset : new Cesium.Cartesian2(1, 20)
  255. },*/
  256. // position: Cesium.Cartesian3.fromDegrees(currentClickLon, currentClickLat,currentClickHigh)
  257. position: Cesium.Cartesian3.fromDegrees(currentClickLon, currentClickLat)
  258. });
  259. viewer.entities.getById( "moveLine_first").polyline.show = false;
  260. viewer.entities.getById( "moveLine_second").polyline.show = false;
  261. }
  262. }
  263. //记录鼠标点击的当前位置 作为下一次画线的起始点位置
  264. lastPointLon = currentClickLon;
  265. lastPointLat = currentClickLat;
  266. // lastPointHigh = currentClickHigh;
  267. if (isPolygon_line) {
  268. if (PolygonPointArray_line == null)
  269. PolygonPointArray_line = new Array();
  270. PolygonPointArray_line.push(currentClickLon);
  271. PolygonPointArray_line.push(currentClickLat);
  272. // PolygonPointArray_line.push(currentClickHigh);
  273. }
  274. }
  275. }
  276. }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  277. //鼠标双击时做的操作
  278. handler.setInputAction( function (click)
  279. {
  280. if (isPolyline || isPolygon_line )
  281. {
  282. var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
  283. if (cartesian && isStartDraw)
  284. {
  285. var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  286. var endPointLon = Cesium.Math.toDegrees(cartographic.longitude).toFixed( 12);
  287. var endPointLat = Cesium.Math.toDegrees(cartographic.latitude).toFixed( 12);
  288. var endPointHigh = Cesium.Math.toDegrees(cartographic.height).toFixed( 12);
  289. measurePointsArray.push(cartographic);
  290. var arrLength=measurePointsArray.length;
  291. var tmpDis= 0;
  292. var sumDis= 0;
  293. for( var i= 1;i<arrLength;i++)
  294. {
  295. geodesic.setEndPoints(measurePointsArray[i -1], measurePointsArray[i]);
  296. tmpDis= Math.round(geodesic.surfaceDistance);
  297. sumDis=sumDis+tmpDis;
  298. }
  299. //考虑多边形最后显示距离
  300. geodesic.setEndPoints(measurePointsArray[ 0], measurePointsArray[arrLength -1]);
  301. tmpDis= Math.round(geodesic.surfaceDistance);
  302. sumDis1=sumDis+tmpDis;
  303. if(sumDis> 1000)
  304. {
  305. var polylineDis= (sumDis / 1000).toFixed( 1) + " km";
  306. var polygonDis = (sumDis1 / 1000).toFixed( 1) + " km";
  307. }
  308. else{
  309. var polylineDis= (sumDis) + " m";
  310. var polygonDis = (sumDis1) + " m";
  311. }
  312. if (isPolyline || isPolygon_line )
  313. {
  314. //画末线段
  315. viewer.entities.add({
  316. name: 'line on the surface',
  317. parent: polylines,
  318. polyline: {
  319. positions: Cesium.Cartesian3.fromDegreesArray([lastPointLon, lastPointLat, endPointLon, endPointLat]),
  320. width: 5,
  321. material: Cesium.Color.RED
  322. },
  323. label: {
  324. text: polylineDis.toString(),
  325. font: '20px SimHei ',
  326. Width: 10,
  327. style: Cesium.LabelStyle.FILL_AND_OUTLINE,
  328. fillColor: Cesium.Color.YELLOW,
  329. outlineColor : Cesium.Color.GRAY,
  330. outlineWidth : 5,
  331. horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
  332. verticalOrigin: Cesium.VerticalOrigin.BOTTOM
  333. },
  334. /*label : {
  335. // This callback updates the length to print each frame.
  336. text: polylineDis.toString(),
  337. font : '25px',
  338. pixelOffset : new Cesium.Cartesian2(1, 20)
  339. },*/
  340. position: Cesium.Cartesian3.fromDegrees(endPointLon, endPointLat)
  341. });
  342. if ( isPolygon_line )
  343. {
  344. viewer.entities.add({
  345. name: 'line on the surface',
  346. parent: polylines,
  347. polyline: {
  348. positions: Cesium.Cartesian3.fromDegreesArray([endPointLon, endPointLat, firstPointLon, firstPointLat]),
  349. width: 5,
  350. material: Cesium.Color.RED
  351. }
  352. });
  353. viewer.entities.getById( "moveLine_second").polyline.show = false;
  354. }
  355. viewer.entities.getById( "moveLine_first").polyline.show = false;
  356. }
  357. //画多边形 不带填充
  358. if (isPolygon_line)
  359. {
  360. if (PolygonPointArray_line != null) {
  361. PolygonPointArray_line.push(endPointLon);
  362. PolygonPointArray_line.push(endPointLat);
  363. }
  364. //当多边形数组中点的个数大于等于3时添加多边形
  365. if (PolygonPointArray_line.length >= 3) {
  366. viewer.entities.add({
  367. name: 'polygon on surface',
  368. polygon: {
  369. hierarchy: Cesium.Cartesian3.fromDegreesArray(PolygonPointArray_line),
  370. material: Cesium.Color.RED,
  371. fill: false, //不显示填充
  372. outline: true,
  373. outlineWidth: 5.0,
  374. outlineColor: Cesium.Color.RED
  375. },
  376. label: {
  377. text: polygonDis.toString(),
  378. font: '20px SimHei ',
  379. Width: 10,
  380. style: Cesium.LabelStyle.FILL_AND_OUTLINE,
  381. fillColor: Cesium.Color.YELLOW,
  382. outlineColor : Cesium.Color.GRAY,
  383. outlineWidth : 5,
  384. horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
  385. verticalOrigin: Cesium.VerticalOrigin.BOTTOM
  386. },
  387. /* label : {
  388. // This callback updates the length to print each frame.
  389. text: polygonDis.toString(),
  390. font : '25px',
  391. pixelOffset : new Cesium.Cartesian2(1, 1)
  392. },*/
  393. position: Cesium.Cartesian3.fromDegrees(firstPointLon, firstPointLat)
  394. });
  395. }
  396. PolygonPointArray_line = null;
  397. viewer.entities.getById( "moveLine_first").polyline.show = false;
  398. viewer.entities.getById( "moveLine_second").polyline.show = false;
  399. }
  400. isStartDraw = false;
  401. }
  402. }
  403. }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
  404. }
  405. //加多边形不带填充
  406. function measureArea() {
  407. var select_measure = document.getElementById( "selOpt");
  408. var value_measure = select_measure.options[select_measure.selectedIndex].value;
  409. if(value_measure == 2){
  410. isPoint = false;
  411. isPolyline = false;
  412. isPolygon_line = true;
  413. isPolygon_fill = false;
  414. isStartDraw = false;
  415. QQ= 0;
  416. document.body.style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,crosshair";
  417. document.getElementById( "map_container").style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,crosshair";
  418. addOnClickListener();
  419. }
  420. }

唔,大概主要功能就是这些了。给自己备忘,代码包我就不传了,如果有问题或者想了解更多的童鞋可以私信或者微我 ^V^

GeoJson格式的国界线数据展示

 

测量

Life is like a box of chocolate,you never know what you're gonna get next.

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值