cesium版本2 加入了点

最新推荐文章于 2024-06-03 17:33:35 发布
最新推荐文章于 2024-06-03 17:33:35 发布
阅读量2.3k 收藏
点赞数
分类专栏： cesium
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/less_cold/article/details/52623508
版权
我们把之前画的所有的点去掉的函数是

viewer.entities.removeAll();

这个又一个问题就是说为什么加点只能在viewer中，而不能在widget中，这个需要解决，希望有人看到了可以给我提出新的意见

点击点可以让弹出的位置有内容：在加点的时候加上属性name

<!--made by zhaowei  
    time:2015.9.22  
    email: 
-->  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  
    <meta name="description" content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">  
    <meta name="cesium-sandcastle-labels" content="Beginner, Showcases">  
    <title>Cesium Demo</title>  
    <script type="text/javascript" src="../Sandcastle-header.js"></script>  
     <script type="text/javascript" src="../jquery-1.10.1.min.js"></script>  
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>  
    <script type="text/javascript">  
    require.config({  
        baseUrl : '../../../Source'  
    });  
    </script>  
</head>  
<body>  
<style>  
    @import url(../templates/bucket.css);  
</style>  
<!--下面这一行用来添加2d。3d转换按钮-->  
  
<div id="cesiumContainer" class="fullSize">  
	<div style="border-style:solid;border-color:black;width:1500px;height:32px;background-color: black;position:absolute; bottom:0;z-index: 999;"></div>
    <div style="position:fixed;top:20px;left:120px;z-index:1000" id＝"twoandthree">  
        <button οnclick="twodEarth(1996)">平面地图</button>  
        <button οnclick="threedEarth(1996)">立体地图</button>  
    </div>  
    <div style="position:fixed;top:20px;left:520px;z-index:1000;opacity:0.8;background:#f0f0f0;color:blue;font-size:large;float: left">  
        <span>清华大学</span><span style="color:red"><b id="title">2015年</b></span><span>SCI发文情况可视化展示</span>  
    </div>  
        <img src="../../../timeline/legend.jpg" style="width:115px;position:fixed;bottom:2px;left:2px;z-index: 1000;border:2px solid black">  
    <div style="position:fixed;bottom:0;left:120px;z-index: 1010" id="playcontainer">  
        <img src="../../../timeline/play.png" οnclick='playEarth()' style="width:30px">  
        </div>  
    <div style="position:fixed;bottom:0;left:120px;z-index: 1000">  
    <ul>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">1996</p>  
    <a οnclick="showEarth(1996)"><img src="../../../timeline/open.png" style="width:50px; height:10px"></a>  
            <div style="position:absolute;bottom:3px;" id="container1996">  
            </div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
        <div style="position: relative">  
    <p style="color:red">1997</p>  
    <a οnclick="showEarth(1997)"><img src="../../../timeline/second.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container1997"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">1998</p>  
    <a οnclick="showEarth(1998)"><img src="../../../timeline/third.png" style="width:50px; height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container1998"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">1999</p>  
    <a οnclick="showEarth(1999)"><img src="../../../timeline/forth.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container1999"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2000</p>  
    <a οnclick="showEarth(2000)"><img src="../../../timeline/fifth.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2000"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2001</p>  
    <a οnclick="showEarth(2001)"><img src="../../../timeline/first.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2001"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2002</p>  
    <a οnclick="showEarth(2002)"><img src="../../../timeline/second.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2002"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2003</p>  
    <a οnclick="showEarth(2003)"><img src="../../../timeline/third.png" style="width:50px; height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2003"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2004</p>  
    <a οnclick="showEarth(2004)"><img src="../../../timeline/forth.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2004"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2005</p>  
    <a οnclick="showEarth(2005)"><img src="../../../timeline/fifth.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2005"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2006</p>  
    <a οnclick="showEarth(2006)"><img src="../../../timeline/first.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2006"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2007</p>  
    <a οnclick="showEarth(2007)"><img src="../../../timeline/second.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2007"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2008</p>  
    <a οnclick="showEarth(2008)"><img src="../../../timeline/third.png" style="width:50px; height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2008"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2009</p>  
    <a οnclick="showEarth(2009)"><img src="../../../timeline/forth.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2009"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2010</p>  
    <a οnclick="showEarth(2010)"><img src="../../../timeline/fifth.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2010"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2011</p>  
    <a οnclick="showEarth(2011)"><img src="../../../timeline/first.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2011"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2012</p>  
    <a οnclick="showEarth(2012)"><img src="../../../timeline/second.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2012"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2013</p>  
    <a οnclick="showEarth(2013)"><img src="../../../timeline/third.png" style="width:50px; height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2013"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2014</p>  
    <a οnclick="showEarth(2014)"><img src="../../../timeline/forth.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2014"></div>  
    </div>  
    </li>  
    <li style="float: left;list-style: none;">  
    <div style="position: relative">  
    <p style="color:red">2015</p>  
    <a οnclick="showEarth(2015)"><img src="../../../timeline/last.png" style="width:50px ;height:10px"></a>  
    <div style="position:absolute;bottom:3px;" id="container2015"><img src="../../../timeline/at.png" style="width: 10px"></div>  
    </div>  
    </li>  
    </ul>  
</div></div>  
<script id="cesium_sandcastle_script"> 
latitude =new Array();
longitude =new Array();
country=new Array();
number=new Array();
firstnumber=new Array();
years=2015;
 
$.ajax({
		type:"GET",
		url:"qinghua.php",
		data:{'year':2015},
		dataType:"json",
		success:function(data){
			//str＝JSON.stringify(eval(data)[0][0]);
			for(var i=0;i<eval(data)[5][0];i++){
			longitude[i]=Object.getOwnPropertyDescriptor(eval(data)[0][i],"x(site)").value;
			latitude[i]=Object.getOwnPropertyDescriptor(eval(data)[1][i],"y(site)").value;
			country[i]=eval(data)[2][i];
			number[i]=eval(data)[3][i];
			firstnumber[i]=eval(data)[4][i];
			}	
			num=eval(data)[5][0];
			//alert (latitude);
			//alert (Object.keys(latitude[0]));
			//console.log (Object.getOwnPropertyDescriptor(latitude[0],"x(site)").value);
			//console.log(data);
		}
});
d=3;  
function startup(Cesium) {  
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/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
    })
	});  
	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.jpg",
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible"
}));
url='http://115.28.101.41:8088/geoserver/cite/wms'; //Geoserver URL  
layers = viewer.scene.globe.imageryLayers;  
    //layers.removeAll();  
    blackMarble=layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({  
        url : url,          
        layers: 'cite:2015',// Here just give layer n  
        version:'1.1.0'  
    }));  
    blackMarble.alpha = 0.5;//给一个透明度  
    blackMarble.brightness = 1.0;  
    titlehtml="";  
    titlehtml="2015年";  
    $("#title").html(titlehtml);  
// Start off looking at china.  
viewer.camera.setView({  
    destination: Cesium.Rectangle.fromDegrees(-100, -20, 310, 90)  
});//Sandcastle_End  
function addMultiplePoints() {
    Sandcastle.declare(addMultiplePoints);
for(i=0;i<num;i++){
  viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(longitude[i], latitude[i]),
        name:country[i]+" "+number[i]+" "+firstnumber[i],
        point : {
            color : Cesium.Color.RED,
            pixelSize : 8
        }
    });
}
}
       	addMultiplePoints();
Sandcastle.finishedLoading();  
}  
if (typeof Cesium !== "undefined") {  
    startup(Cesium);  
} else if (typeof require === "function") {  
    require(["Cesium"], startup);  
}  
function showEarth(year){  
    years=year;  
    $.ajax({
		type:"GET",
		url:"qinghua.php",
		data:{'year':year},
		dataType:"json",
		success:function(data){
			//str＝JSON.stringify(eval(data)[0][0]);
			for(var i=0;i<eval(data)[5][0];i++){
			longitude[i]=Object.getOwnPropertyDescriptor(eval(data)[0][i],"x(site)").value;
			latitude[i]=Object.getOwnPropertyDescriptor(eval(data)[1][i],"y(site)").value;
			country[i]=eval(data)[2][i];
			number[i]=eval(data)[3][i];
			firstnumber[i]=eval(data)[4][i];
			}	
			num=eval(data)[5][0];
			//alert (latitude);
			//alert (Object.keys(latitude[0]));
			//console.log (Object.getOwnPropertyDescriptor(latitude[0],"x(site)").value);
			//console.log(data);
		}
});
html= new Array('','','','','','','','','','','','','','','','','','','','');  
html[year-1996]='<img src="../../../timeline/at.png" style="width: 10px">';  
//alert(layer);  
var layer='cite:'+year;  
function startup(Cesium) {  
	viewer.entities.removeAll();
    layers.remove(blackMarble);
    //blackMarble.destroy(); 
    blackMarble=layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({  
        url : url,          
        layers: layer,// Here just give layer name  
        version:'1.1.0'  
    })); 
    blackMarble.alpha = 0.5;//给一个透明度  
    blackMarble.brightness = 1.0;   
    titlehtml="";  
    titlehtml=year+"年";  
    $("#title").html(titlehtml);  
// Start off looking at china.  
if(d==3){  
viewer.camera.setView({  
   destination: Cesium.Rectangle.fromDegrees(-100, -20, 310, 90)  
});//Sandcastle_End  
}  
if(d==2){  
    viewer.camera.setView({  
   destination: Cesium.Rectangle.fromDegrees(-30, -90, 340, 90)  
});//Sandcastle_End  
}  
function addMultiplePoints() {
    Sandcastle.declare(addMultiplePoints);
for(i=0;i<num;i++){
    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(longitude[i], latitude[i]),
        name:country[i]+" "+number[i]+" "+firstnumber[i],
        point : {
            color : Cesium.Color.RED,
            pixelSize : 8
        }
    });
}
}
       	addMultiplePoints();
Sandcastle.finishedLoading();}  
if (typeof Cesium !== "undefined") {  
    startup(Cesium);  
} else if (typeof require === "function") {  
    require(["Cesium"], startup);  
for(i=1996;i<2016;i++){  
    var id='#container'+i;  
    $(id).html(html[i-1996]);  
}  
}  
}  
b=0;  
function playEarth(){  
        html1="";  
        html1='<img src="../../../timeline/stop.png" οnclick="stopEarth()" style="width:30px">';  
        $("#playcontainer").html(html1);  
    intervaltime=5000;//他们之间的间隔时间  
    stop=0;  
    timename=new Array();  
    num=1;//间隔时间的一个控制  
    for(j=1;j<21;j++){     
        if(j<b){j=b+1;num=num-b;}//b是一个标记，记录运行到了哪个年份  
        a=j%20;  
        switch(a){  
        case 1:  
        timename[0]=setTimeout("if(!stop){showEarth(1996);b=1;}",0);  
        break;  
        case 2:   
        timename[1]=setTimeout("if(!stop){showEarth(1997);b=2;}",num*intervaltime);  
        break;  
        case 3:   
        timename[2]=setTimeout("if(!stop){showEarth(1998);b=3;}",(num+1)*intervaltime);  
        break;  
        case 4:   
        timename[3]=setTimeout("if(!stop){showEarth(1999);b=4;}",(num+2)*intervaltime);  
        break;  
        case 5:   
        timename[4]=setTimeout("if(!stop){showEarth(2000);b=5;}",(num+3)*intervaltime);  
        break;  
        case 6:   
        timename[5]=setTimeout("if(!stop){showEarth(2001);b=6;}",(num+4)*intervaltime);  
        break;  
        case 7:   
        timename[6]=setTimeout("if(!stop){showEarth(2002);b=7;}",(num+5)*intervaltime);  
        break;  
        case 8:  
        timename[7]=setTimeout("if(!stop){showEarth(2003);b=8;}",(num+6)*intervaltime);  
        break;  
        case 9:   
        timename[8]=setTimeout("if(!stop){showEarth(2004);b=9;}",(num+7)*intervaltime);  
        break;  
        case 10:   
        timename[9]=setTimeout("if(!stop){showEarth(2005);b=10;}",(num+8)*intervaltime);  
        break;  
        case 11:  
        timename[10]=setTimeout("if(!stop){showEarth(2006);b=11;}",(num+9)*intervaltime);  
        break;  
        case 12:  
        timename[11]=setTimeout("if(!stop){showEarth(2007);b=12;}",(num+10)*intervaltime);  
        break;  
        case 13:   
        timename[12]=setTimeout("if(!stop){showEarth(2008);b=13;}",(num+11)*intervaltime);  
        break;  
        case 14:   
        timename[13]=setTimeout("if(!stop){showEarth(2009);b=14;}",(num+12)*intervaltime);  
        break;  
        case 15:   
        timename[14]=setTimeout("if(!stop){showEarth(2010);b=15;}",(num+13)*intervaltime);  
        break;  
        case 16:   
        timename[15]=setTimeout("if(!stop){showEarth(2011);b=16;}",(num+14)*intervaltime);  
        break;  
        case 17:  
        timename[16]=setTimeout("if(!stop){showEarth(2012);b=17;}",(num+15)*intervaltime);  
        break;  
        case 18:   
        timename[17]=setTimeout("if(!stop){showEarth(2013);b=18;}",(num+16)*intervaltime);  
        break;  
        case 19:   
        timename[18]=setTimeout("if(!stop){showEarth(2014);b=19;}",(num+17)*intervaltime);  
        break;  
        case 0:   
        html3="<img src='../../../timeline/play.png' οnclick='playEarth()' style='width:30px'>";  
        timename[19]=setTimeout('if(!stop){showEarth(2015);b=20;$("#playcontainer").html(html3);}',(num+18)*intervaltime);  
        break;  
        default: break;  
        }  
    }  
}  
function stopEarth(){  
    html2="";  
        html2='<img src="../../../timeline/play.png" οnclick="playEarth()" style="width:30px">';  
        $("#playcontainer").html(html2);  
    stop=1;  
    clearTimeout(timename[0]);  
   clearTimeout(timename[1]);  
   clearTimeout(timename[2]);  
   clearTimeout(timename[3]);  
   clearTimeout(timename[4]);  
   clearTimeout(timename[5]);  
   clearTimeout(timename[6]);  
   clearTimeout(timename[7]);  
   clearTimeout(timename[8]);  
   clearTimeout(timename[9]);  
   clearTimeout(timename[10]);  
   clearTimeout(timename[11]);  
   clearTimeout(timename[12]);  
   clearTimeout(timename[13]);  
   clearTimeout(timename[14]);  
   clearTimeout(timename[15]);  
   clearTimeout(timename[16]);  
   clearTimeout(timename[17]);  
   clearTimeout(timename[18]);  
   clearTimeout(timename[19]);  
    }  
function twodEarth(){  
    d=2;  
        function startup(Cesium) {  
            viewer.destroy();  
viewer = new Cesium.Viewer('cesiumContainer',{
	sceneMode:Cesium.SceneMode.SCENE2D,
	animation: false,  
    baseLayerPicker: false, 
    geocoder: true, 
    timeline: false, 
    sceneModePicker: true, 
    navigationHelpButton: false, 
    infoBox: true,  
    imageryProvider : 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
    })
	});  
	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.jpg",
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible"
}));
url='http://115.28.101.41:8088/geoserver/cite/wms'; //Geoserver URL  
layers = viewer.scene.globe.imageryLayers;  
    //layers.removeAll();  
   var blackMarble=layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({  
        url : url,          
        layers: 'cite:'+years,// Here just give layer n  
        version:'1.1.0'  
    }));  
    blackMarble.alpha = 0.5;//给一个透明度  
    blackMarble.brightness = 1.0;  
// Start off looking at china.  
viewer.camera.setView({  
    destination: Cesium.Rectangle.fromDegrees(-30, -90, 340, 90)  
});//Sandcastle_End  
Sandcastle.finishedLoading();  
}  
if (typeof Cesium !== "undefined") {  
    startup(Cesium);  
} else if (typeof require === "function") {  
    require(["Cesium"], startup);  
}  
    }  
function threedEarth(){  
    d=3;  
        function startup(Cesium) {  
viewer.destroy();  
viewer = new Cesium.Viewer('cesiumContainer',{
	sceneMode:Cesium.SceneMode.SCENE3D,
	animation: false,  
    baseLayerPicker: false, 
    geocoder: true, 
    timeline: false, 
    sceneModePicker: true, 
    navigationHelpButton: false, 
    infoBox: true,  
    imageryProvider : 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
    })
	});  
	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.jpg",
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible"
}));
url='http://115.28.101.41:8088/geoserver/cite/wms'; //Geoserver URL  
layers = viewer.scene.globe.imageryLayers;  
    //layers.removeAll();  
   var blackMarble=layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({  
        url : url,          
        layers: 'cite:'+years,// Here just give layer n  
        version:'1.1.0'  
    }));  
    blackMarble.alpha = 0.5;//给一个透明度  
    blackMarble.brightness = 1.0;  
// Start off looking at china.  
viewer.camera.setView({  
    destination: Cesium.Rectangle.fromDegrees(-100, -20, 310, 90)  
});//Sandcastle_End  
Sandcastle.finishedLoading();  
}  
if (typeof Cesium !== "undefined") {  
    startup(Cesium);  
} else if (typeof require === "function") {  
    require(["Cesium"], startup);  
}  
    }  
</script>  
</body>  
</html>


less_cold
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
89.（cesium篇）cesium聚合图（自定义图片）
地图之家
06-29 603
地图之家：cesium+leaflet+echart+地图数据+地图工具等相关内容的介绍 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示：下面献上完整代码，代码重要位置会做相应解释 代码完整包下载...
cesium源码1.99版本
12-14
2. **新功能添加**：每个版本，Cesium都会引入新的API或功能，以增强其功能集。1.99版本可能增加了新的地形处理方法、3D模型支持、动画控制或者增强了对特定GIS数据格式的支持。 3. **错误修复**：开发者通常会在新...
cesium跨域加载问题
02-20
解决Cesium访问数据跨域问题，数据使用tomcat部署在服务器上。
cesium实现简单地图展示
yy_1028的博客
02-18 1738
vue中使用cesium初始化 cesium.vue内容如下： <template> <div class="mapBox"> <div id="cesium" ref="cesium"></div> </div> </template> <script> import mapMixin from "./js/mapMixin"; export default { data() {...
cesium绘制、编辑线
最新发布
梦寻汝的博客
06-03 311
Vue使用cesium绘制线，编辑线
Cesium.js 添加billboard广告牌，点击改变其文本和图标
热门推荐
jimjiayu
08-27 1万+
var monitorEntity = viewer.entities.add({ name: "video", position: Cesium.Cartesian3.fromDegrees(109.44, 32.11,30.0), point: { //点 p...
Cesium添加自定义弹窗并设置随地图移动位置移动
采花小盗周的博客
04-12 4318
项目中使用`Cesium`制作三维地图，在地图上铺点，对点位进行点击，弹出自定义弹窗（`form`+`charts`），且弹窗随地图一起动，
Cesium 绘制缓冲区 点 线 面缓冲区
04-10
本主题将深入探讨如何使用Cesium绘制点、线和面的缓冲区，这在构建复杂的三维地理信息系统（GIS）应用时尤其有用。通过理解和运用这些技术，开发者能够高效地展示大量数据并提升用户体验。 首先，让我们理解“缓冲...
68.（cesium篇）cesium获取两点（有高度差）之间的距离.zip
12-20
2. 计算两个地心笛卡尔坐标之间的大圆距离：Cesium并未直接提供计算大圆距离的函数，但我们可以通过计算两点在地球椭球体上的大圆弧长来实现。这通常涉及到地球半径、经度差、纬度差的三角运算和反正切函数。 3. ...
cesium中添加大量树_其它树
03-04
2. **创建3DTileset**：将树模型转换为3DTiles格式，这可以通过Cesium Ion或第三方工具如3DTile转换器完成。每个树模型会成为Tileset中的一个Tile。 3. **配置LOD策略**：在3DTileset的设置中，你可以定义LOD的选择...
vue-cesium:CesiumJS的Vue 3.x组件
04-02
VUE CESIUM VueCesium-用于GIS的CesiumJS的基于Vue 3.x的组件库。 :flexed_biceps: Vue 3.0合成API :fire: 用TypeScript编写 状态：测试版 该项目仍在大力开发中。 欢迎加入我们，并提出您的第一个请求。 语言...
Cesium加载图标，并实现图标点击监听
wo_buzhidao的博客
11-16 9841
Cesium加载图标，并实现图标点击监听 代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;cesium添加图标&lt;/title&gt; &lt;link rel="stylesheet" href=&quot
Cesium添加图标后点击该图标出现弹窗的具体实现方法
weixin_43312391的博客
02-25 7260
实现效果： 点击左上角视频弹窗按钮，视角飞行，出现图标，并定位至指定位置； 点击图标，出现弹窗，弹窗可播放视频； 实现方法： 1.vue文件中： template中： <template> <div class="video_main"> <!-- 左上角按钮 --!> <div class="switch_btn"> <el-button type="primary" @click="videoAdd.
【超图+CESIUM】【基础API使用示例】02、超图｜CESIUM初始化场景与销毁场景
汪同学丶的博客
02-24 3117
前言 缺少前置学习使用资料，请自行查阅：[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.csdn.net/weixin_44402694/article/details/123110136) 以下示例使用到的公共静态资料，不建议下载，建议官网自行下载超图Build资源，示例所涉及图片会在示例使用到时提供出来。如有需要可下载：[https://download.csdn.net/download/
cesium中加载点图标
苟冬新
01-30 3454
贴代码 // primitives可加载大量数据，性能方面比entities要好一些 let billboard = viewer.scene.primitives.add(new Cesium.BillboardCollection()); billboards.add({ image: imgUrl, // 图片地址 width: 22, height: 22, // scale: 1.0, // sizeInMeters : true, //图像的尺寸被指定成
Cesium添加百度地图
zy332719794的专栏
04-08 6799
百度地图的瓦块切片与大多数地图不同，其中心点位于地理坐标的0,0点，多数地图的切片是以地图左上角为瓦块切片的起点。Cesium中默认的切片地图（UrlTemplateImageryProvider）包括经纬度模式和投影（墨卡托）模式都是以左上角切片为基准。所以当我们加载百度地图瓦块地图时，需要自定义地图影像地图类。 BaiduImageryProvider = function(options) { this._errorEvent = new Cesium.Event(); this.
cesium实现图片与文字合成新图标
专注GIS开发
02-26 6478
cesium实现图片与文字合成新图标
cesium 地图添加柱状统计图，并且动态添加。
weixin_42476786的博客
01-14 3576
遇到一个需求，需要在三维地图上动态添加一个柱状图。 function echartsPlay() { dlEllipse = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.388481, 39.924949, 0), name: '电力', ellipse: ...
Cesium加载entities实体，包括文字标注,图标(动态缩放效果),线(尾迹线效果)，面(动态闪烁效果)，背景图，围栏(立体分层效果)，渐变色圆柱，扇形图等
weixin_39150852的博客
04-12 9050
cesium加载entities实体，包括文字标注,图标(扩撒动画效果),线，面(闪烁动画效果)，图片，围栏，立体区域，渐变色圆柱，扇形图
cesium 加入标牌
06-01
pixelOffset: new Cesium.Cartesian2(0, -9), heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND } }); ``` 这将在纬度为40.03883，经度为-75.59777的位置创建一个带有“Hello, World!”标签的实体。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值