cesium+threejs结合实现GIS+BIM大场景-1_javascript gis bim

作者：你好赵伟 | 2024-08-04 16:24:21

踩

javascript gis bim

概述

前面已经花费了许多内容去介绍BIM如何搭建了。其实我不太担心抄袭，让有一些节省成本的老板想自己搞引擎的。（你搞去~看是不是能节省成本！）

那我们一步步说。有源码放源码。搭不出来说明你基础不好了。

首先Cesium入门准备。先下载吧。从这里可以找到：

下载

Cesium中文网：cesium编程入门(二)环境搭建 | cesium中文网，

当然官方最新版一定也要搞一个：CesiumJS – Cesium

此处插播广告。有BIM模型引擎的需求，可以找我们。

自研引擎产品试用，demo下载：

QModel-BIM模型浏览器

账号准备

Cesium可不像别的下载引入就能用。首先要去官方搞一个token

Cesium准备

新建应用App，生成Token，复制下来，

天地图准备

在中国，啥地图都不如用天地图，毕竟你得看一下，这是谁家的招牌！不过这个网站的信息不安全，小心你填写的学校信息，隔天就被骗子拿走了，说是京东客服，让老子在大学时期的啥手机号和证件还是什么的被拿去贷款老掉牙的套路，被我问候了他父母也没脾气。

说回正事，这里需要拿到一个Key，后面告诉你怎么用。

开始工作

首先，你得把Cesium的HelloWord跑起来。我在Cesium中文下载的1.40版本Demo，然后在官方下载的1.8SDK替换进去了。照样可以跑。如何跑起来这个helloword?,看官方教程或者Cesium中文，你可以在上一级使用node server.js

由于原版的Cesium的Helloword,是使用acrgis的。当你替换完cesium的token之后，已经可以看见地球了，但是没有中文，看着有点不适。

放出整个使用天地图的代码吧。替换进去即可。


<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
   <script src="http://www.qmodel.cn/js/jquery-3.2.1.min.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken='前面说的，Cesium的token';
   let viewerOption = {
        animation: false, // 控制场景动画的播放速度控件
        baseLayerPicker: false, // 底图切换控件
        fullscreenButton: false, // 全屏控件
        geocoder: false, // 地理位置查询定位控件
        homeButton: false, // 默认相机位置控件
        timeline: false, // 时间滚动条控件
        infoBox: false,           //是否显示信息框
        sceneModePicker: false, //是否显示3D/2D选择器
        selectionIndicator: false, // 点击点绿色弹出 是否显示选取指示器组件
        sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
        navigationHelpButton: false, // 默认的相机控制提示控件
        scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
        navigationInstructionsInitiallyVisible: false,
        showRenderLoopErrors: false, //是否显示渲染错误
        orderIndependentTranslucency:false,//设置背景透明
		errainProvider: Cesium.createWorldTerrain()
      };
	  
     let viewer = new Cesium.Viewer("cesiumContainer", viewerOption);
 
 
 
        var TDU_Key = "前面说的，天地图的Key"//天地图申请的**
 
        //在线天地图影像服务地址(墨卡托投影)
        var TDT_IMG_W = "http://{s}.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=" + TDU_Key;
        //在线天地图矢量地图服务(墨卡托投影) 
        var TDT_VEC_W = "http://{s}.tianditu.gov.cn/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&tk=" + TDU_Key;
        //在线天地图影像中文标记服务(墨卡托投影)  
        var TDT_CIA_W = "http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
            "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
            "&style=default.jpg&tk=" + TDU_Key
        //在线天地图矢量中文标记服务(墨卡托投影)            
        var TDT_CVA_W = "http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
            "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
            "&style=default.jpg&tk=" + TDU_Key;
 
//此处插播广告。有BIM模型引擎的需求，可以找我们。官网http://www.qmodel.cn/
 
        let Img = new Cesium.WebMapTileServiceImageryProvider({   //调用影响中文服务
            url: TDT_VEC_W,//url地址，换影像还是矢量，随便你喜欢
            layer: "img_w",	//WMTS请求的层名称
            style: "default",//WMTS请求的样式名称
            format: "tiles",//MIME类型，用于从服务器检索图像
            tileMatrixSetID: "GoogleMapsCompatible",//	用于WMTS请求的TileMatrixSet的标识符
            subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地图8个服务器
            minimumLevel: 0,//最小层级
            maximumLevel: 18,//最大层级
        })
 
        viewer.imageryLayers.addImageryProvider(Img)//添加到cesium图层上
 
 
        let cia = new Cesium.WebMapTileServiceImageryProvider({   //调用影响中文注记服务
            url: TDT_CVA_W,
            layer: "cia_w",
            style: "default",
            format: "tiles",
            tileMatrixSetID: "GoogleMapsCompatible",
            subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地图8个服务器
            minimumLevel: 0,
            maximumLevel: 18,
        })
 
        viewer.imageryLayers.addImageryProvider(cia)//添加到cesium图层上
		viewer.scene.globe.depthTestAgainstTerrain = !0;
 
        // 没有影像图层时地球的底色
        viewer.scene.globe.baseColor = Cesium.Color.BLACK;
 
        viewer.camera.setView({
            destination: new Cesium.Cartesian3(6788280.844465209, -81980750.10214644, 1061921.04004376)
        });
        viewer.camera.flyTo({
          //  destination: new Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
          //  duration:8
		    destination: new Cesium.Cartesian3.fromDegrees(116.435314, 22.960521, 2000.0),
            duration:18
        });
 
  </script>
</body>
</html>

来了来了。此处插播广告。有BIM模型引擎的需求，可以找我们。官网TestPage

换个效果再看下

今天先到这，下回继续。。。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/928632