使用cesium先引入cesium.js
// An highlighted block
<script type="text/javascript" src="Build/Cesium/Cesium.js"></script>
弹出的div
// An highlighted block
//这是弹出来的div 可以根据需求换成table
<div class="ysc-dynamic-layer" id="bubble" style="opacity: 1; left: 1012.88px; top: 238.831px; display: none;height: 400px">
<div class="line1" style="width: 50px;"></div>
<div class="main" style="display: block;">
<br>
<span style="color:red;" >* </span>位置描述: <span id="位置描述" style="font-size: 15px;margin-top: 3px"></span><br><br>
<span style="color:red">* </span>业主单位: <span id="业主单位" style="font-size: 15px"></span><br><br>
<span style="color:red">* </span>发现人: <span id="发现人" style="font-size: 15px"></span><br><br>
<span style="color:red">* </span>隐患描述: <span id="隐患描述" style="font-size: 15px"></span>
</div>
</div>
cesium
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNjhkMzFlNC02MjcxLTRkZWItOGFlYy1jMTZiN2YzZDAyNTAiLCJpZCI6NzU3MCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0OTg1NzUwM30.tVIk2kNyva3YmQgNQh0YFaD7AV-8FI8-c456lbRgTOs';
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否显示动画控件
baseLayerPicker: false, //是否显示图层选择控件
geocoder: false, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: false,
terrainProvider : Cesium.createWorldTerrain(),
sceneMode : Cesium.SceneMode.COLUMBUS_VIEW,//初始场景模式 2D、3D模式: SCENE2D |MORPHING/COLUMBUS_VIEW
shouldAnimate : true,
orderIndependentTranslucency: false,
contextOptions: {webgl: {alpha: true,}},
imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
url: ""
})
});
viewer.scene.skyBox.show = false;
viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
viewer.scene.globe.baseColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
图标显示的位置是根据从后台传过来的经纬度确定
// An highlighted block
function getThreatList1(){
var urlIp = "http://127.0.0.1:8081/server"
var type = "第三方施工";
var obj = document.getElementById("ORGID");
var ORGID = obj.options[obj.selectedIndex].value;
var option = JSON.stringify({ 'address':ORGID});
$.ajax({
url: urlIp+"/dpportal/highConsequenceAreaService/getHighConsequence",
data: option,
headers: {
'Access-Control-Allow-Origin': "*",
},
contentType: 'application/json;charset=utf-8',
dataType: "json",
async: false,
cache: false,
type:"POST",
success: function(data) {
var 高后果区 = data.data;
console.log("第三方施工:"+高后果区);
if(高后果区!=null&&高后果区.length>0){
for(var i=0;i<高后果区.length;i++){
if(高后果区[i].经度!="0"&&高后果区[i].经度!=null&&高后果区[i].纬度!="0"&&高后果区[i].纬度!=null) {
var bluePin = viewer.entities.add({
name: 'Blank blue pin',
position: Cesium.Cartesian3.fromDegrees(高后果区[i].经度, 高后果区[i].纬度),
billboard: {
//image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
image: 'images/icon-builda.png',
//model : {
// uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf'
//},
scale: 0.35,//和原始大小相比的缩放比例
//minimumPixelSize :100, //最小尺寸,防止太小而看不见
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 10000000),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
}
});
}
}
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (click) {
var pick = viewer.scene.pick(click.position);
//选中某模型 pick选中的对象
if(pick && pick.id){
$("#bubble").show();
var position = viewer.scene.pickPosition(click.position); //单击位置
//将笛卡尔坐标转化为经纬度坐标
var cartographic = Cesium.Cartographic.fromCartesian(position);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);//获取经度
console.log(longitude.toFixed(6)*1000000);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);//获取纬度
console.log(latitude.toFixed(6)*1000000);
for(var j=0;j<高后果区.length;j++){
if((高后果区[j].经度*1000000 >=longitude.toFixed(6)*1000000-90000 && 高后果区[j].经度*1000000 <=longitude.toFixed(6)*1000000+90000) && (高后果区[j].纬度*1000000>=latitude.toFixed(6)*1000000-1000 && 高后果区[j].纬度*1000000<=latitude.toFixed(6)*1000000+1000)){
$("#识别单位及负责人").text(高后果区[j].识别单位及负责人);
console.log("业主单位:"+$("#业主单位").text(高后果区[j].识别单位及负责人));
$("#位置描述").text(高后果区[j].位置描述);
$("#创建人").text(高后果区[j].创建人);
$("#隐患描述").text(高后果区[j].隐患描述);
$("#创建时间").text(高后果区[j].创建日期);
$("#经度").text(高后果区[j].经度);
$("#纬度").text(高后果区[j].纬度);
}
}
var point=[cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
var destination=Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0);
console.log(point[0]+","+point[1]);
var obj = {position:click.position,destination:destination};
var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
console.log("c:"+c);
var x = c.x-1000;
var y = c.y-430 ;
$('#bubble').css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');//设置点击时 div弹出来的位置
}else{
$("#bubble").hide();
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}else{
$("#第三方施工").text("0");
}
},
error: function(e) {
}
});
}
显示的图标位置
弹出的div