|
@@ -0,0 +1,366 @@
|
|
|
+import weizi from "./data.js"
|
|
|
+class Map{
|
|
|
+ constructor(){
|
|
|
+ Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1OTY1NTk0My04OTliLTRlYzAtYWNlNC0yOGNkZWZlMjgxNmIiLCJpZCI6NTE3ODIsImlhdCI6MTYxODMwMzE5OX0.iY_pexbzlJVWZBi9hglcPZnOejagrHmwB2Zbk4uHBec'
|
|
|
+ //加载在线地形图数据
|
|
|
+ this._worldTerrain = Cesium.createWorldTerrain({
|
|
|
+ // required for water effects
|
|
|
+ requestWaterMask : true,
|
|
|
+ // required for terrain lighting
|
|
|
+ requestVertexNormals : true
|
|
|
+ });
|
|
|
+
|
|
|
+ // 服务负载子域
|
|
|
+ let subdomains = ['0', '1', '2', '3', '4', '5', '6', '7',"8","9"];
|
|
|
+ let tiandituTk = "ac8f435fa9098eda8c1f40ba97b0b0f2";
|
|
|
+ let provider = new Cesium.WebMapTileServiceImageryProvider({
|
|
|
+ //影像底图
|
|
|
+ url: "http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + tiandituTk,
|
|
|
+ subdomains: subdomains,
|
|
|
+ layer: "img",
|
|
|
+ style: "default",
|
|
|
+ format: "image/jpeg",
|
|
|
+ tileMatrixSetID: "GoogleMapsCompatible", //使用谷歌的瓦片切片方式
|
|
|
+ show: true
|
|
|
+ });
|
|
|
+
|
|
|
+ this._viewer = new Cesium.Viewer('container', {
|
|
|
+ shouldAnimate: true,
|
|
|
+ infoBox: false, //是否显示点击要素之后显示的信息
|
|
|
+ selectionIndicator:false,
|
|
|
+ fullscreenButton: false,
|
|
|
+ orderIndependentTranslucency: false,
|
|
|
+ homeButton:false,
|
|
|
+ sceneModePicker:false,
|
|
|
+ baseLayerPicker:false,
|
|
|
+ navigationHelpButton:false ,
|
|
|
+ vrButton:false,
|
|
|
+ geocoder: false, //是否显示地名查找控件
|
|
|
+ timeline: false, //是否显示时间线控件
|
|
|
+ animation:false,
|
|
|
+ imageryProvider:provider,
|
|
|
+ terrainProvider: this._worldTerrain,
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ this._viewer.scene.backgroundColor =new Cesium.Color(0,7/255,25/255);
|
|
|
+ this._viewer._cesiumWidget._creditContainer.style.display = "none";
|
|
|
+ this._viewer.scene.skyAtmosphere.show = false;
|
|
|
+ this._viewer.scene.globe.showGroundAtmosphere=false;
|
|
|
+ this._viewer.scene.globe.showWaterEffect=false;
|
|
|
+ this._viewer.scene.fog.enabled = false;
|
|
|
+ this._viewer.scene.skyBox.show=false;
|
|
|
+ this._viewer.shadowMap.darkness=0.2;
|
|
|
+ this._viewer.isPointLight=true;
|
|
|
+ //是否开启抗锯齿
|
|
|
+ this._viewer.scene.fxaa = true;
|
|
|
+ this._viewer.scene.postProcessStages.fxaa.enabled = true;
|
|
|
+
|
|
|
+
|
|
|
+ this._tileset1 = new Cesium.Cesium3DTileset({
|
|
|
+ url: 'https://testgis.4dage.com/jiujiang-xiugai1-qp/tileset.json',
|
|
|
+ });
|
|
|
+ let tileset=this._tileset1;
|
|
|
+ this._tileset1.readyPromise.then(function () {
|
|
|
+ let boundingSphere = tileset.boundingSphere;
|
|
|
+ let cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
|
|
|
+ let surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
|
|
|
+ let offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + 20);
|
|
|
+ let translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
|
|
|
+ tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
|
|
|
+ })
|
|
|
+ this._viewer.scene.primitives.add(this._tileset1);
|
|
|
+
|
|
|
+ this._viewer.camera.flyTo({
|
|
|
+ destination:Cesium.Cartesian3.fromDegrees(116.21584100853136,29.738977165300618,243.68175872316817),
|
|
|
+ orientation:{
|
|
|
+ heading:0.05766205214782261,
|
|
|
+ pitch:-0.46911279010391693,
|
|
|
+ roll:0.000005273011606909961
|
|
|
+ },
|
|
|
+ duration:1
|
|
|
+ });
|
|
|
+ // 亮度设置
|
|
|
+ var stages = this._viewer.scene.postProcessStages;
|
|
|
+ this._viewer.scene.brightness = this._viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
|
|
|
+ this._viewer.scene.brightness.enabled = true;
|
|
|
+ this._viewer.scene.brightness.uniforms.brightness = Number(1.0);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this._handler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
|
|
|
+ let viewer=this._viewer;
|
|
|
+
|
|
|
+
|
|
|
+ this._handler.setInputAction(function (movement) {
|
|
|
+ var obj = viewer.scene.pick(movement.endPosition);
|
|
|
+
|
|
|
+ viewer.container.style.cursor = "default";
|
|
|
+ if(obj&&obj.id&&obj.id.label._text=="金湖国际小区"){
|
|
|
+ viewer.container.style.cursor = "pointer";
|
|
|
+ }
|
|
|
+ if(obj&&obj.id&&obj.id.label._text=="老县委宿舍"){
|
|
|
+ viewer.container.style.cursor = "pointer";
|
|
|
+ }
|
|
|
+ if(obj&&obj.id&&obj.id.label._text=="1#"){
|
|
|
+ viewer.container.style.cursor = "pointer";
|
|
|
+ }
|
|
|
+ if(obj&&obj.id&&obj.id.label._text=="叶家舍小区"){
|
|
|
+ viewer.container.style.cursor = "pointer";
|
|
|
+ }
|
|
|
+ }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
+
|
|
|
+ this._heilayer=new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
|
|
|
+ url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
|
|
|
+ }));
|
|
|
+ this._viewer.imageryLayers.add(this._heilayer)
|
|
|
+ this._heilayer.show=false;
|
|
|
+ this.name=null;
|
|
|
+ }
|
|
|
+
|
|
|
+ left_clickFun(clickjinghuguojiShowFun,jinghuguojiShowFun,laoxianweisusheShowFun,yejiaxiaosheShowFun){
|
|
|
+ let viewer=this._viewer;
|
|
|
+ this._handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
|
|
+ this._handler.setInputAction(function (movement) {
|
|
|
+ var obj = viewer.scene.pick(movement.position);
|
|
|
+
|
|
|
+ if(obj&&obj.id&&obj.id.label._text=="金湖国际小区"){
|
|
|
+ viewer.camera.flyTo({
|
|
|
+ destination:Cesium.Cartesian3.fromDegrees(116.21593231048116,29.740258229946367,162.62117710327865),
|
|
|
+ orientation:{
|
|
|
+ heading: 0.05766205214782261,
|
|
|
+ pitch:-0.46911279010391693,
|
|
|
+ roll:0.000005273011606909961
|
|
|
+ },
|
|
|
+ duration:1
|
|
|
+ });
|
|
|
+ clickjinghuguojiShowFun()
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if(obj&&obj.id&&obj.id.label._text=="老县委宿舍"){
|
|
|
+ viewer.camera.flyTo({
|
|
|
+ destination:Cesium.Cartesian3.fromDegrees(116.21644159026744,29.741029388219182,121.07007997440711),
|
|
|
+ orientation:{
|
|
|
+ heading: 0.05766205214782261,
|
|
|
+ pitch:-0.46911279010391693,
|
|
|
+ roll:0.000005273011606909961
|
|
|
+ },
|
|
|
+ duration:1
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if(obj&&obj.id&&obj.id.type=="jinghuguoji"&&obj.id.label._text=="1#"){
|
|
|
+ jinghuguojiShowFun()
|
|
|
+ // document.getElementById("child_form").style.display="block"
|
|
|
+ // document.getElementById("houses").style.display="block"
|
|
|
+ // document.getElementById("houses1").style.display="none"
|
|
|
+
|
|
|
+ // document.getElementById("form_img").src="../png/jinghuguoji/101.png";
|
|
|
+ }
|
|
|
+ if(obj&&obj.id&&obj.id.type=="laoxianweisushe"&&obj.id.label._text=="1#"){
|
|
|
+ laoxianweisusheShowFun()
|
|
|
+ // document.getElementById("child_form").style.display="block"
|
|
|
+ // document.getElementById("houses").style.display="none"
|
|
|
+ // document.getElementById("houses1").style.display="block"
|
|
|
+
|
|
|
+ // document.getElementById("form_img").src="../png/laoxianweisushe/101.png";
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if(obj&&obj.id&&obj.id.label._text=="叶家舍小区"){
|
|
|
+ yejiaxiaosheShowFun()
|
|
|
+ // document.getElementById("child1_form").style.display="block"
|
|
|
+ // document.getElementById("img3").src="../png/left1.png";
|
|
|
+ // document.getElementById("img5").src="../png/right1.png";
|
|
|
+ }
|
|
|
+
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ }
|
|
|
+
|
|
|
+ adddEntity1(position,str,background){
|
|
|
+ this._viewer.entities.add({
|
|
|
+ position:position,
|
|
|
+ label:{
|
|
|
+ text:str,
|
|
|
+ showBackground:true,
|
|
|
+ backgroundColor:background,
|
|
|
+ pixelOffset:new Cesium.Cartesian2(0,-140),
|
|
|
+ scale:0.5
|
|
|
+ },
|
|
|
+ billboard:{
|
|
|
+ image:"../png/triangle.png",
|
|
|
+ pixelOffset:new Cesium.Cartesian2(0,-125),
|
|
|
+ scale:0.5
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ adddEntity2(position,str,borderColor){
|
|
|
+ this._viewer.entities.add({
|
|
|
+ type:str.split("_")[0],
|
|
|
+ position:position,
|
|
|
+ label:{
|
|
|
+ text:str.split("_")[1],
|
|
|
+ outlineColor:borderColor,
|
|
|
+ fillColor:Cesium.Color.WHITE,
|
|
|
+ style:Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
|
+ showBackground:true,
|
|
|
+ backgroundColor:new Cesium.Color(13/255,146/255,246/255,0.1),
|
|
|
+ outlineWidth:20,
|
|
|
+ pixelOffset:new Cesium.Cartesian2(0,-120),
|
|
|
+ scale:0.5
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ addEntity(){
|
|
|
+ this.adddEntity1(new Cesium.Cartesian3 (-2448457.0543241943, 4972430.5303345295, 3145603.3914947766) ,"金湖国际小区",new Cesium.Color(13/255,146/255,246/255));
|
|
|
+ this.adddEntity2(new Cesium.Cartesian3 ( -2448463.0940114185, 4972437.1644585775, 3145587.8985699383),"jinghuguoji_1#",new Cesium.Color(13/255,146/255,246/255));
|
|
|
+ this.adddEntity2(new Cesium.Cartesian3 ( -2448474.523461309, 4972421.640874091, 3145603.5562153812),"jinghuguoji_2#",new Cesium.Color(13/255,146/255,246/255));
|
|
|
+ this.adddEntity1(new Cesium.Cartesian3 ( -2448508.4188250797, 4972329.740959639, 3145648.777494665),"老县委宿舍",new Cesium.Color(13/255,146/255,246/255));
|
|
|
+ this.adddEntity2(new Cesium.Cartesian3 ( -2448497.7840337977, 4972353.026540443, 3145637.2073454955),"laoxianweisushe_1#",new Cesium.Color(13/255,146/255,246/255));
|
|
|
+ this.adddEntity2(new Cesium.Cartesian3 ( -2448487.6369428034, 4972366.6064854115,3145602.2819039533),"laoxianweisushe_2#",new Cesium.Color(13/255,146/255,246/255));
|
|
|
+ this.adddEntity2(new Cesium.Cartesian3 ( -2448520.3171395767, 4972369.752162702, 3145592.3613111465),"laoxianweisushe_3#",new Cesium.Color(13/255,146/255,246/255));
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ addLocationName(event){
|
|
|
+ let name=""
|
|
|
+ weizi.map(w=>{
|
|
|
+ if(event.target.id===w.id){
|
|
|
+ let height=10;
|
|
|
+ name=w.name
|
|
|
+ if(w.name=="西门社区")
|
|
|
+ {
|
|
|
+ height=50;
|
|
|
+ console.log(this._viewer)
|
|
|
+ this._viewer.camera.flyTo({
|
|
|
+ destination:Cesium.Cartesian3.fromDegrees(116.21536139714668,29.735710683444914,210.11715193973072),
|
|
|
+ orientation:{
|
|
|
+ heading: 5.387296195840215,
|
|
|
+ pitch: -0.4462147819503275,
|
|
|
+ roll: 6.283184526554923
|
|
|
+ },
|
|
|
+ duration:0.5
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this._viewer.camera.flyTo({
|
|
|
+ destination:Cesium.Cartesian3.fromDegrees(w.lon,w.lat-0.02,1000),
|
|
|
+ orientation:{
|
|
|
+ heading: 0.05766205214782261,
|
|
|
+ pitch:-0.46911279010391693,
|
|
|
+ roll:0.000005273011606909961
|
|
|
+ },
|
|
|
+ duration:0.5
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ this._viewer.entities.add({
|
|
|
+ position:Cesium.Cartesian3.fromDegrees(w.lon,w.lat,height),
|
|
|
+ label:{
|
|
|
+ text:w.name,
|
|
|
+ fillColor:Cesium.Color.WHITE,
|
|
|
+ showBackground:true,
|
|
|
+ backgroundColor:new Cesium.Color(13/255,146/255,246/255,0.8),
|
|
|
+ outlineWidth:20,
|
|
|
+ scale:1
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(this._viewer)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ debugger
|
|
|
+ return name;
|
|
|
+ }
|
|
|
+
|
|
|
+ addGaode(){
|
|
|
+ this._tileset1.show=false;
|
|
|
+ this._viewer.entities.removeAll();
|
|
|
+ this._viewer.scene.terrainProvider=new Cesium.EllipsoidTerrainProvider({});
|
|
|
+ this._heilayer.show=true;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ removeGaode(){
|
|
|
+ this._tileset1.show=true;
|
|
|
+ this._viewer.camera.flyTo({
|
|
|
+ destination:Cesium.Cartesian3.fromDegrees(116.21584100853136,29.738977165300618,243.68175872316817),
|
|
|
+ orientation:{
|
|
|
+ heading:0.05766205214782261,
|
|
|
+ pitch:-0.46911279010391693,
|
|
|
+ roll:0.000005273011606909961
|
|
|
+ },
|
|
|
+ duration:1
|
|
|
+ });
|
|
|
+ this._viewer.entities.removeAll();
|
|
|
+ this.addEntity();
|
|
|
+ this._viewer.scene.terrainProvider=this._worldTerrain;
|
|
|
+ this._heilayer.show=false;
|
|
|
+ }
|
|
|
+
|
|
|
+ loadximen(){
|
|
|
+ this._tileset1.show=true;
|
|
|
+ this._viewer.camera.flyTo({
|
|
|
+ destination:Cesium.Cartesian3.fromDegrees(116.219468,29.737767,243.68175872316817),
|
|
|
+ orientation:{
|
|
|
+ heading:0.05766205214782261,
|
|
|
+ pitch:-0.46911279010391693,
|
|
|
+ roll:0.000005273011606909961
|
|
|
+ },
|
|
|
+ duration:1
|
|
|
+ });
|
|
|
+ this._viewer.entities.removeAll();
|
|
|
+ this._viewer.scene.terrainProvider=this._worldTerrain;
|
|
|
+ this._heilayer.show=false;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// var handler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
|
|
|
+// handler.setInputAction(function (event) {
|
|
|
+// //1.椭球面坐标:获取当前点击视线与椭球面相交处的坐标,在加载地形的场景上获取的坐标有误差
|
|
|
+// // var earthPosition = map.this._viewer.camera.pickEllipsoid(event.position,map.this._viewer.scene.globe.ellipsoid);
|
|
|
+
|
|
|
+// //2.场景坐标:获取场景中任意点击处的对应的世界坐标,需要开启“地形深度检测”(在未开启“地形深度检测”的情况下只能在3DTile上准确获取空间坐标,开启“地形深度检测”后,this._viewer.scene.pickPosition 也能在非3DTile上准确获取坐标)
|
|
|
+// this._viewer.scene.globe.depthTestAgainstTerrain = true;
|
|
|
+// var position1 = this._viewer.scene.pickPosition(event.position);
|
|
|
+// var ellipsoid = this._viewer.scene.globe.ellipsoid;
|
|
|
+// var cartographic = ellipsoid.cartesianToCartographic(position1);
|
|
|
+// var lat1 = Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
+// var lng1 = Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
+// var alt1 = cartographic.height;
|
|
|
+// console.log({
|
|
|
+// lat1:lat1,
|
|
|
+// lng1:lng1,
|
|
|
+// alt1:alt1
|
|
|
+// })
|
|
|
+// var cartographic = ellipsoid.cartesianToCartographic(this._viewer.camera.position);
|
|
|
+// var lat = Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
+// var lng = Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
+// var alt = cartographic.height;
|
|
|
+// console.log({
|
|
|
+// lat:lat,
|
|
|
+// lng:lng,
|
|
|
+// alt:alt,
|
|
|
+// heading:this._viewer.camera.heading,
|
|
|
+// pitch:this._viewer.camera.pitch,
|
|
|
+// roll:this._viewer.camera.roll
|
|
|
+// })
|
|
|
+
|
|
|
+// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// function GetWGS84FromDKR(coor)
|
|
|
+// {
|
|
|
+// let cartographic = Cesium.Cartographic.fromCartesian(coor);
|
|
|
+// let x=Cesium.Math.toDegrees(cartographic.longitude);l
|
|
|
+// let y=Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
+// let wgs84={
|
|
|
+// lon:x,
|
|
|
+// lat:y,
|
|
|
+// };
|
|
|
+// return wgs84;
|
|
|
+
|
|
|
+// }
|
|
|
+export default Map;
|