sailing_cesium v1.0.3

y

cesium_2021

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader. ############################################################################################################### Cesium基础知识 1、在Cesium中，数据按加载方式可以笼统地分为两种类型，即Entity和Primitive：海量数据是不能用Entity方式来加载的，它能卡爆你的内存。如果想要高性能，那么你还得了解一下Primitive。 (1)、Primitive: Primitive，即图元，Mesh的基本单位，这个是图形学里面的解释，Cesium中的Primitive感觉就英文的字面意思，我暂时叫它原始体吧，既然是原始的，那说明这种格式更接近于底层，比实体有着更高的性能。当然了它的缺点就是易用性差点，有过经验的小伙伴都知道，Primitive用起来要比Entity麻烦一点。 添加材质:Entity方式 // 创建一个有洞的多边形，并填充蓝色材质 var polygon = viewer.entities.add({ name: "Blue polygon with holes", polygon: { hierarchy: { positions: Cesium.Cartesian3.fromDegreesArray( -99.0, 30.0, -85.0, 30.0, -85.0, 40.0, -99.0, 40.0, ), holes: [{ positions: Cesium.Cartesian3.fromDegreesArray( -97.0, 31.0, -97.0, 39.0, -87.0, 39.0, -87.0, 31.0, ) }] }, material: Cesium.Color.BLUE.withAlpha(0.5), height: 0, outline: true } }); // 改变材质 // 方式一：通过类型创建材质 polygon.material = Cesium.Material.fromType('Color'); polygon.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0);

    // 方式二：创建一个默认材质
    polygon.material = new Cesium.Material();
    
    // 方式三：通过Fabric方式
    polygon.material = new Cesium.Material({
        fabric : {
            type : 'Color',
            uniforms : {
                color : new Cesium.Color(1.0, 1.0, 0.0, 1.0)
            }
        }
    });

添加材质:Primitive方式 // 画一个椭圆形，并使用西洋棋盘材质填充 var instance = new Cesium.GeometryInstance({ geometry : new Cesium.EllipseGeometry({ center : Cesium.Cartesian3.fromDegrees(-100.0, 20.0), semiMinorAxis : 500000.0, semiMajorAxis : 1000000.0, rotation : Cesium.Math.PI_OVER_FOUR, vertexFormat : Cesium.VertexFormat.POSITION_AND_ST }), id : 'ellipse' }); scene.primitives.add(new Cesium.Primitive({ geometryInstances : instance, appearance : new Cesium.EllipsoidSurfaceAppearance({ material : Cesium.Material.fromType('Checkerboard')//西洋棋盘材质填充 }) })); 上述代码只是很简单的例子，不过也基本能说明材质是如何应用到模型上的 ###############################################################################################################

############################################################################################################### 3dtiles设置渐变色非白膜shader，即着色器（使用开源平台怎么能不会改源码呢，这也是必备技能吧） var tileset = scene.primitives.add(new Cesium.Cesium3DTileset({ url : 'http://localhost:8002/tilesets/Seattle/tileset.json', skipLevelOfDetail : true, baseScreenSpaceError : 1024, skipScreenSpaceErrorFactor : 16, skipLevels : 1, immediatelyLoadDesiredLevelOfDetail : false, loadSiblings : false, cullWithChildrenBounds : true }));

tileset.style = new Cesium.Cesium3DTileStyle({ color : { conditions : [ '${Height} >= 100', 'color("purple", 0.5)', '${Height} >= 50', 'color("red")', 'true', 'color("blue")' ] }, show : '${Height} > 0', meta : { description : '"Building id ${id} has height ${Height}."' } }); ###############################################################################################################

//地理坐标(wgs84)==>世界坐标(笛卡尔坐标系) var ellipsoid = viewer.scene.globe.ellipsoid; var coord_wgs84 = Cesium.Cartographic.fromDegrees(lng, lat, alt);//单位：度，度，米 var coord_xyz = ellipsoid.cartographicToCartesian(coord_wgs84); console.log('x=' + coord_xyz.x + ',y=' + coord_xyz.y + ',z=' + coord_xyz.z);//单位：米，米，米

//世界坐标==>地理坐标 var ellipsoid = viewer.scene.globe.ellipsoid; var xyz = new Cesium.Cartesian3(x, y, z); var wgs84 = ellipsoid.cartesianToCartographic(xyz); console.log('lon=' + Cesium.Math.toDegrees(wgs84.longitude) + ',lat=' + Cesium.Math.toDegrees(wgs84.latitude) + ',height=' + wgs84.height); ———————————————— 版权声明：本文为CSDN博主「乱梦」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/u014646677/article/details/89637377