化石原创文章,转载请注明来源并保留原文链接


这篇文章集合Cesium中的术语,会逐步添加

ellipse: 椭圆, 2D 
ellipsoid: 椭球体, 3D
cartographic: 地图坐标,也就是经纬度的集合。比如cartographic(0, 0)
ECEF: Earth Centered, Earth Fixed。地球坐标系。
NEU:North East Up, 一种本地空间的定义法。


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


这个算是很基本的功能了,所以直接上代码,如下:

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function(click) {
        var pickedObject = viewer.scene.pick(click.position);
        if (Cesium.defined(pickedObject)) {
            var entityId = pickedObject.id._id;
            console.log("Picked entityId = " + entityId);
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

第1行代码创建了一个handler,这个handler用来跟踪canvas上的事件。第2行代码开始,设置了刚刚创建的handler要跟踪的事件的类型(第二个参数,这里跟踪的是鼠标左键的点击)和相应的事件发生后用来处理事件的代码(第一个参数对应的方法)。


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


这篇文章属于在使用Cesium的时候,边做边记录下来,所以会可能增加、修改、删除部分内容。

1、屏幕坐标

对于Cesium来说,原点在左上角,x轴正方向往右,y轴正方向往下。白话一点就是,左上角的屏幕坐标是(0,0),x坐标随屏幕越往右,值越大。y坐标随屏幕越往下,值越大。下面是一段代码可以用来验证这个结果:

var viewer = new Cesium.Viewer('cesiumContainer', {
    skyAtmosphere: false,
    shouldAnimate : true,
    terrainProvider: Cesium.createWorldTerrain(),
            baseLayerPicker: false,
            timeline: false,
            fullscreenButton: false,
            homeButton: false,
            navigationHelpButton: false,
            sceneModePicker: false,
            animation: false,
            geocoder:false
});


viewer.zoomTo(viewer.entities);
viewer.entities.add({
    id: 'mou',
    label: {
        // position : Cesium.Cartesian2.ZERO, 
        show: true,
    }
});
viewer.scene.canvas.addEventListener('mousemove', function(e) {
    var entity = viewer.entities.getById('mou');
    var ellipsoid = viewer.scene.globe.ellipsoid;
    // Mouse over the globe to see the cartographic position 
    console.log('(' + e.clientX + ', ' + e.clientY + ')');
});

2、Fixed Frame

在cesium中经常出现的字眼,这个对应到一些游戏引擎或者更接地气的说法,其实就是世界坐标系统。不过在地理信息引擎这里,因为这个坐标系统是固定在地球上的,所以用了Fixed这个字眼。在WSD84标准里,这个系统的原点在球心,x轴正方向指向经纬度(0,0),y轴正向指向(0,90),z轴方向根据右手判断。

3、EastNorthUp

Cesium中经常出现的字眼,有了上面的Fixed Frame铺垫,我这里直接就把这个系统叫做“本地坐标系统”。在Cesium中,实际上用户(开发者)很容易得到的信息是位置经纬度和离地面的高度信息。通过这些信息,Cesium提供了:

var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
var m = Cesium.Transforms.eastNorthUpToFixedFrame(position); 

这样的方式,能直接构造出一个基于该位置的矩阵出来。作用就是能让模型的所有的顶点和该矩阵做乘法后,呈现在该位置的样子。East、North、Up是在该经纬度出由East、North、和地面往上(up)方向构造出的三个轴形成的坐标系统。在该经纬度我们指定物体离地面高度,比如离地1米,那么上面的参数3就是给1。这一点也可以看出是一个“本地坐标”。


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


这个基础功能在实际中非常有用,比如要拖拽放置物体,就必须知道鼠标的移动和相应的鼠标对应到的球体位置,所以cesium中提供了相应的实现。下面是一段demo代码:

var viewer = new Cesium.Viewer('cesiumContainer', {
    skyAtmosphere: false,
    shouldAnimate : true,
    terrainProvider: Cesium.createWorldTerrain()
});


viewer.zoomTo(viewer.entities);
viewer.entities.add({
    id: 'mou',
    label: {
        // position : Cesium.Cartesian2.ZERO, 
        show: true,
    }
});
viewer.scene.canvas.addEventListener('mousemove', function(e) {
    var entity = viewer.entities.getById('mou');
    var ellipsoid = viewer.scene.globe.ellipsoid;
    // Mouse over the globe to see the cartographic position 
    var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian3(e.clientX, e.clientY), ellipsoid);
    if (cartesian) {
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(10);
        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(10);
        var height = cartographic.height.toFixed(10);
        entity.position = cartesian;
        entity.label.show = false;
        entity.label.font_style = 84;
        //entity.position= Cesium.Cartesian2.ZERO; 
        entity.label.text = '(' + longitudeString + ', ' + latitudeString + ',' + height + ')';
        var result = entity.label.text; // we can reuse this
        document.getElementById("demo").innerHTML = entity.label.text;
    } else {
        entity.label.show = false;
    }
});

这段代码在场景中放置了一个entity,所以在屏幕中间会显示鼠标对应的球体的经纬度信息,同时也会把这个信息输出到html中,就在屏幕的左下角。这个是靠下面的html div先配置好:

<style>
    @import url(../templates/bucket.css);
</style>
<div id="demo" style='z-index: 2000; position: absolute; height:100px; width:200px; right: 10px; bottom: 0px; text-color: white'></div>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>

上面的代码里的id=demo的div就是我们输出html信息的地方。

完毕。


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


WordPress后台修改帖子的Permalinks的格式(也就是我们在浏览器上看到的每个帖子的url的格式)。在我使用的版本中,第一个选项是PlainText,使用这种方式,随便找一个帖子测试,都没有什么问题。但是该其他的格式,无论是复杂的使用年、月、日、小时、分,还是简单的仅用一个帖子id,都不能成功,显示使用这个url访问不到内容(The requested URL was not found on this server)。

搜索了一下,大致明白了可以通过apache的.htaccess文件解决这个问题。于是在服务器的WordPress所在的目录下,创建了一个.htaccess文件,并且通过

chmod 666 .htaccess

命令把这个文件的写权限打开(我用的是centos 7)。然后通过linux命令

systemctl restart httpd

重新启动了apache服务器。

再次进入Word Press后台,尝试新的Permalinks方案,保存后用帖子测试。还是不行。后来无意中在stackoverflow上看到了一个解决方案:把后台生成的自定义链接的最前面加上index.php就可以了,大致如下:

/index.php/%year%/%monthnum%/%day%/%hour%/%post_id%/

最后生成的帖子url就会差不多是这个样子:

https://mysite.com/index.php/2019/05/22/06/6/

我估摸着大多数人可能通过放入一个.htaccess文件就能解决我这里遇到的问题。所以这里记录的方法,算是给有缘人吧。


化石原创文章,转载请注明来源并保留原文链接