cesium导入kml文件

最新推荐文章于 2024-04-28 00:25:13 发布

Can_Yue_

最新推荐文章于 2024-04-28 00:25:13 发布

阅读量3.1k

点赞数 3

本文链接：https://blog.csdn.net/Can_Yue_/article/details/116429626

版权

GIS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

cesium

3 篇文章 0 订阅

订阅专栏

cesium官网有导入kml文件的例子，但是sandcastle里的kml源文件相对于复杂，如果在本地项目上加载的话没有实际效果，kml文件里请求的图片和数据本地的路径下并没有，而且去改它文件里的路径的话感觉太过于复杂，于是自己找了一个简单的kml文件实现导入的目的。
本次导入的kml文件和如果想稍微了解一下kml的话可以看这里
如果想进一步了解的话，可以点这里

主要代码

 viewer.dataSources.add(Cesium.KmlDataSource.load('source\\kml\\sTest.kml',
     {
          camera: viewer.scene.camera,
          canvas: viewer.scene.canvas
     })
    );

kml文件：

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2"> 
	<Placemark>
 		<name>The Pentagon</name>
 		<Polygon>
 			<extrude>1</extrude>
 			<altitudeMode>relativeToGround</altitudeMode>
 			<outerBoundaryIs>
 				<LinearRing>
 					<coordinates>
 						-77.05788457660967,38.87253259892824,100 
 						-77.05465973756702,38.87291016281703,100 
 						-77.05315536854791,38.87053267794386,100 
 						-77.05552622493516,38.868757801256,100 
 						-77.05844056290393,38.86996206506943,100 
 						-77.05788457660967,38.87253259892824,100
 					</coordinates>
 				</LinearRing>
 			</outerBoundaryIs>
 			<innerBoundaryIs>
 				<LinearRing>
 					<coordinates>
 						-77.05668055019126,38.87154239798456,100 
 						-77.05542625960818,38.87167890344077,100 
 						-77.05485125901024,38.87076535397792,100 
 						-77.05577677433152,38.87008686581446,100 
 						-77.05691162017543,38.87054446963351,100 
 						-77.05668055019126,38.87154239798456,100
 					</coordinates>
 				</LinearRing>
 			</innerBoundaryIs>
 		</Polygon>
 	</Placemark> 
</kml>

全部代码（包含之前其他功能的代码）

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8" />
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Hello World!</title>
  <script src="Build/Cesium/Cesium.js"></script>
  <script src="source/Js/knockout-3.5.1.debug.js"></script>
  <script src="source/Js/Sandcastle-header.js"></script>
  <!-- <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> -->
  <style>
    @import url(Build/Cesium/Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
      position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
    }
    #toolbar select{
      display: inline-block;
            position: relative;
            background: #303336;
            border: 1px solid #444;
            color: #edffff;
            fill: #edffff;
            border-radius: 4px;
            padding: 5px 12px;
            margin: 2px 3px;
            cursor: pointer;
            overflow: hidden;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;

    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <div id="map"></div>
  <div id="toolbar">
    <select data-bind="options: options, optionsText: '_text', value: selectedOption, optionsCaption:'选择相机功能'"></select>
  </div>
  <script>

    
 
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3MTc0NmI2My00NWVlLTQzYjYtOGVhOC1jMGI5Mzc0MGU3ODEiLCJpZCI6MzkxMDMsImlhdCI6MTYwNzE2NjEwMX0.OZNA22OAC1XGQXem2-S-Vb0ew7W3EtK2CrUMiv1JuUY';

    var viewer = new Cesium.Viewer('cesiumContainer', {

      geocoder: false, // 查找位置工具，默认使用bing地图
      navigationHelpButton: false, // 导航帮助按钮
      animation: false, // 动画器件
      timeline: false, // 时间线
      fullscreenButton: false, // 全屏按钮

      terrainProvider: Cesium.createWorldTerrain(), //地形
      shadows: true, //阴影
    });


    // 显示帧速（FPS）
    viewer.scene.debugShowFramesPerSecond = true;
    viewer.cesiumWidget.creditContainer.style.display = "none";

    // 初始化场景位置
    window.viewer.scene.camera.setView({
      // 初始化相机经纬度
      destination: new Cesium.Cartesian3.fromDegrees(-77.05,38.87,800),
      // orientation: {"heading": 5.462412729374679, "roll": 6.280834231188946, "pitch": -0.3856971665320348}
      endTransform: Cesium.Matrix4.IDENTITY,
    });

  

    viewer.dataSources.add(Cesium.KmlDataSource.load('source\\kml\\sTest.kml',
     {
          camera: viewer.scene.camera,
          canvas: viewer.scene.canvas
     })
    );

    
  </script>
</body>

</html>

最终效果图：

在这里插入图片描述

Can_Yue_

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
7
评论
cesium导入kml文件

cesium官网有导入kml文件的例子，但是sandcastle里的kml源文件相对于复杂，如果在本地项目上加载的话没有实际效果，kml文件里请求的图片和数据本地的路径下并没有，而且去改它文件里的路径的话感觉太过于复杂，于是自己找了一个简单的kml文件实现导入的目的。本次导入的kml文件和如果想稍微了解一下kml的话可以看这里如果想进一步了解的话，可以点这里主要代码 viewer.dataSources.add(Cesium.KmlDataSource.load('source\\kml\\sTes
复制链接

扫一扫