cesium编程中级(十)cesium导航

Cesium导航

今天看到 Google Earth 上的导航栏,想起百度地图,高德地图,leaflet(插件)等等好像都有提供导航条,但是cesium官方包里面是没有的,于是上网搜了一下,果然有个大神实现了,名字就叫Cesium-navigation,github地址,有人翻译了这篇文章 翻译地址

看起来好像很简单,下面我们来试试怎么用:

  1. 下载js文件

    可以在github上下载源码,自己编译,官方文档上有写

    How to build it?
    run npm install
    run node build.js

    这里我偷懒了,使用cnpm安装的,当然安装完也可以把它从node_modules中拷出来

    cnpm install cesium-navigation –save

  2. 新建示例页面,引入js

     

    //必须先引入cesium
    <script src="path/to/Cesium.js"></script>
    src="path/to/standalone/viewerCesiumNavigationMixin.js"></script>

  1. 创建对象,官方提供了另种方式,一般使用viewer比较多,我们用viewer
    // 这句不解释了
    var cesiumViewer = new Cesium.Viewer('cesiumContainer');
var options = {};
//两种方式设置默认视图
options.defaultResetView = Cesium.Rectangle.fromDegrees(71, 3, 90, 14);
//options.defaultResetView = new Cesium.Cartographic(Cesium.Math.toRadians(114), Cesium.Math.toRadians(33), 500);
// extend our view by the cesium navigaton mixin options.enableCompass= true; //罗盘 options.enableZoomControls= false; //缩放 options.enableDistanceLegend= false; //比例尺 options.enableCompassOuterRing= true; //指南针外环 cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin, options); //当然也可以使用默认的 cesiumViewer.extend(Cesium.viewerCesiumNavigationMixin, {}); //获取对象 var cesiumNavigation = cesiumViewer.cesiumNavigation;

刷新页面,发现。。。。。可以了,这就666了,如果使用requirejs,帮助里面也有说明,这里来补充一点东西:

  • 返回按钮(放大缩小按钮中间的)可以自行飞向自定义经纬度坐标
viewer.scene.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(101.88, 39.78,10000000)
          });
  • 默认的控件都放在左下角,如果想放在别的位置怎么办呢? 这里提供一种方式,通过修改css
<style>
    .compass {
        position: absolute;
        left: 0;
        top: 10px;
    }

    .navigation-controls {
        position: absolute;
        left: 30px;
        top: 120px;
        height: 90px;
    }
</style>

效果图:

rightbottom

lefttop

参考源码

21 thoughts to “cesium编程中级(十)cesium导航”

  1. 您好,通过npm安装,然后在vue中通过import引入后运行报错如下,请问怎么解决
    Uncaught Error: No ../lib/weakmap
    at callDep (webpack-internal:///./node_modules/cesium-navigation/navigation.js:117)
    at req (webpack-internal:///./node_modules/cesium-navigation/navigation.js:216)
    at v (webpack-internal:///./node_modules/cesium-navigation/navigation.js:3094)
    at eval (webpack-internal:///./node_modules/cesium-navigation/navigation.js:3108)
    at Object.eval (webpack-internal:///./node_modules/cesium-navigation/navigation.js:3109)
    at eval (webpack-internal:///./node_modules/cesium-navigation/navigation.js:6)
    at Object.eval (webpack-internal:///./node_modules/cesium-navigation/navigation.js:10)
    at eval (webpack-internal:///./node_modules/cesium-navigation/navigation.js:11906)
    at Object../node_modules/cesium-navigation/navigation.js (app.js:1398)
    at __webpack_require__ (app.js:708)

    1. 应该是引用路径出问题了吧? 你把npm下载好的插件从那个文件夹中复制出来,直接script标签引入使用。

        1. 更新 cesium-navigation版本,打包一次
          或者把viewerCesiumNavigationMixin.js里面的defineProperties改成Object.defineProperties

  2. 请问如何将重置按钮也就是+,-号中间那个按钮,点击之后视角飞到和home按钮一样的,也就是飞到自己加载的Tile的中心,而不是飞到自定义经纬度的地方。

  3. Uncaught ReferenceError: define is not defined报错这个原因是怎么回事,屏幕显示//必须先引入cesium,请问这是什么原因

发表评论

电子邮件地址不会被公开。 必填项已用*标注