Cesium 加载全球所有国家边界线以及添加button

最新推荐文章于 2024-09-13 22:09:19 发布

小_古

最新推荐文章于 2024-09-13 22:09:19 发布

阅读量4.7k

点赞数 5

分类专栏： Cesium 文章标签： Cesium 国界按钮

本文链接：https://blog.csdn.net/qq_26579715/article/details/103886182

版权

Cesium 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

静态资源文件如下：

 <script type="text/javascript" src="/emc/js/Cesium-1.64/Build/CesiumUnminified/Cesium.js"></script>
  <script type="text/javascript" src="/emc/js/Cesium-1.64/Apps/Sandcastle/Sandcastle-header.js"></script>
  <style>
      @import url(/emc/js/Cesium-1.64/Apps/Sandcastle/templates/bucket.css);
  </style>

html标签如下：

<div id="cesiumContainer" class="fullSize"></div>
<div id="toolbar"></div>

核心code

var viewer = new Cesium.Viewer('cesiumContainer');
  //去除版权
  viewer._cesiumWidget._creditContainer.style.display = "none";
  
  //加载json文件
	viewer.dataSources.add(Cesium.GeoJsonDataSource.load('countriesGeo.json',{
      stroke: Cesium.Color.RED,//颜色设置，自定义颜色请参考API
      
      strokeWidth: 3
  }));


	
  Sandcastle.addDefaultToolbarButton('显示国界', function() {
  	viewer.dataSources.get(0).show = true;	
  });

  Sandcastle.addDefaultToolbarButton('关闭国界', function() {
  	viewer.dataSources.get(0).show = false;
  });

json文件资源地址：https://download.csdn.net/download/qq_26579715/12089045

页面效果如图：