您的当前位置：首页正文

Cesiumjs加载天地图+绘制三角形+绘制点

来源：步旅网

HTML：

<body>
  <div id="cesiumContainer"></div>
  
  <div id="left-container">
	<span onclick="viewerflyToLonLat(m_lon,m_lat,5000);">Fly to</span>
	<span onclick="addPin()">Add Image Label</span>
	<span onclick="cdrawer.draw();sdrawer.draw();">Draw Cell</span>
  </div>
</body>
</html>

CSS：

      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
	  #left-container{
		position:absolute;
		width:120px;
		text-align:center;
		border:1px solid white;
		top:0px;
		left:0px;
		font-size:13.5px;
	  }
	  #left-container span{
		cursor:pointer;
		color:green;
		font-weight:700;
		display:block;
	  }

m_lon = 109.008936;
m_lat = 33.815059;
var viewer, scene;

//初始化并设置天地图为底图
function onload(Cesium) {
    viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            url: 'http://t0.tianditu.com/img_w/wmts',
            layer: 'img',
            style: 'default',
            format: 'tiles',
            tileMatrixSetID: 'w',
            credit: new Cesium.Credit('天地图全球影像服务'),
            maximumLevel: 18
        }),
        baseLayerPicker: false,
        animation: false,
        timeline: false
    });
    scene = viewer.scene;
};
onload(Cesium);
//添加一个多边形
var polygon = {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([100, 30,
        101, 30,
        100, 31
    ]),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
    material: Color.RED
}
var poly = new Cesium.Entity({
    id: "uid_001",
    polygon: polygon
});
viewer.entities.add(poly);
//添加一个点
viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(102,30),
    id: "uid_002",
    point: {
        pixelSize: 4,
        color: Color.RED,
        outlineColor: Color.BLACK,
        outlineWidth: 2
    }
});

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文