Cesium之地图研究

Cesium之地图研究

 作者：璐璐

##### entities(可添加 point、polyline、billboard、wall、model、polylineVolume等等)

* 添加点

```js
viewer.entities.add({
    name: '',
    position: Cesium.Cartesian3.fromDegrees(lon, lat, 0),
    point: {
        show: true, // default
        color: ,
        pixelSize: 15, // default: 1
        outlineWidth: 0
        // scaleByDistance: new Cesium.NearFarScalar(
        //   10,
        //   10,
        //   1200000,
        //   5
        // )
    }
})
```

* 添加线

```js
// data = [lon1,lat1,h1,lon2,lat2,h2]
viewer.entities.add({
    name : 'line',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights(data),
        width : 4,
        material : this.getMaterial2(item, color)
    }
})
```

* 添加图片 Billboard

```js
viewer.entities.add({
    name: '',
    position: Cesium.Cartesian3.fromDegrees(lon, lat, heights),
    billboard: {
        image: '/images/1.png',
         300,
        height: 150,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT
    }
})
```

* 添加墙 Wall

```js
viewer.entities.add({
    name: '',
    wall: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(dataArr),
        // 渐变色
        material: new Cesium.ImageMaterialProperty({
            //  fe3b3c    10f7b0    fffd8f
            //添加回调
            image:
            types == 1
            ? red1
            : types == 2
            ? red11
            : types == 3
            ? light4
            : purple,
            repeat: new Cesium.Cartesian2(50, 1.0),
            transparent: true
        })
        // outlineColor: Cesium.Color.WHITE,
        // outlineWidth: 30
        // 纯色
        // material: colors,
    }
    // // 添加其他属性
    // properties: {
    //   name: v.name ? v.name : '--',
    //   address: v.address ? v.address : '--'
    // }
})
```

* 添加实体

```js
// 将经纬度坐标转换为三维空间坐标
var position = Cesium.Cartesian3.fromDegrees(120, 27, 1000);
var heading = Cesium.Math.toRadians(135);
var pitch = Cesium.Math.toRadians(10);
var roll = Cesium.Math.toRadians(10);
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    hpr
);
viewer.entities.add({
    //模型所在位置
    position: position,
    orientation: orientation,
    model: {
        uri: '/gltf/yuan.gltf',
        minimumPixelSize: 100,
        maximumScale: 50,
        scale: 100,
        show: true,
        color: Cesium.Color.fromCssColorString('#ff5b3d').withAlpha(0.5),
        // silhouetteColor: Cesium.Color.fromAlpha(Cesium.Color.fromCssColorString('#ffba0c'),0.4),
        // silhouetteSize: 5,
    }
})
```

* 删除

```js
// 1
viewer.entities.removeById(id)
// 2
removeEntities(name) {
    let viewer = this._earth.czm.viewer
    let entities = viewer.entities._entities._array
    for (var i = 0; i < entities.length; i++) {
        if (entities[i]._name == name) {
            viewer.entities.remove(entities[i])
            i--
        }
    }
}
```

##### dataSource

* 直接加载

```js
Cesium.GeoJsonDataSource.load('/topuLine/roomLine.json').then(dataSource => {
    dataSource.name = "Expressway";
    viewer.dataSources.add(dataSource);
    let entities = dataSource.entities.values;
    for (let i = 0; i < entities.length; i++) {
        let entity = entities[i];
        entity.material = Cesium.Material.fromType('Color');
        entity.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 0.1);
        // Cesium.Color.fromCssColorString(lineColor)
        entity.polyline.width = 2;
        entity.polyline.translucent  = true;
    }
})
```

* 先创建 dataSource 实体集合，再添加

```js
// 创建实体集合
var dataSource = new Cesium.CustomDataSource('lines');
for (let i=0; i< lineArr.length;i++) {
    dataSource.entities.add({
        polylineVolume: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights(lineArr[i]),
            // shape: computeCircle(60000), // 圆柱子
            // shape: computeStar(3, 26000, 50000), // 三角形柱子
            // shape: computeStar(2, 50000, 50000), // 正方型柱子
            // shape: computeStar(5, 40000, 50000), // 五边形柱子
            shape: computeStar(5, 4000, 5000), // 五边形柱子
            // shape: computeStar(5, 70000, 40000), // 五角星柱子
            material: stripeMaterial,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 1
        }
    });
}
return viewer.dataSources.add(dataSource)
```

##### primitives

```js
let tiles = new Cesium.Cesium3DTileset({
    url: '/tileset/tileset.json',
    maximumScreenSpaceError: 1, // Temporary workaround for low memory mobile devices - Increase maximum error to 8.
    maximumNumberOfLoadedTiles: 1000 // Temporary workaround for low memory mobile devices - Decrease (disable) tile cache.
})
tiles.readyPromise.then(arg => {})
viewer.scene.primitives.add(tiles)
```

##### 定位

```js
//
viewer.zoomTo(viewer.entities)
// 
viewer.scene.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(120.272496,31.483777,1000),
    orientation: {
        heading: Cesium.Math.toRadians(0), //左右平移
        pitch: Cesium.Math.toRadians(-35), // 水平翻转
        roll: Cesium.Math.toRadians(0) // 垂直翻转
    },
    duration: 2 //定位的时间间隔
})
```

* 各种坐标转换

```js
// 经纬度 --> 世界坐标
var ellipsoid = viewer.scene.globe.ellipsoid
var cartographic = Cesium.Cartographic.fromDegrees(lon, lat, 0)
var cartesian3 = ellipsoid.cartographicToCartesian(cartographic)
// 世界坐标 --> 屏幕坐标
var cartesian2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
    viewer.scene,
    cartesian3
)

// position 世界坐标 --> 经纬度 lon,lat
var ellipsoid = viewer.scene.globe.ellipsoid
var cartesian3 = viewer.camera.pickEllipsoid(position,ellipsoid)
var cartographic = ellipsoid.cartesianToCartographic(cartesian3)
var lon = Cesium.Math.toDegrees(cartographic.longitude)
var lat = Cesium.Math.toDegrees(cartographic.latitude)
```

#### earthSdk (经纬度为弧度)

##### 常规

* 添加点

```js
const objConfig = {
    name: 'Pin1',
    xbsjType: 'Pin',
    position: [lon, lat, 500],
    near: 20000,
    imageUrl: '/images/earth/img/station.png',
    disableDepthTestDistance: 0,
    scale: 1,
    origin: [5, 5] // 类似 offset
}
const pin = new XE.Obj.Pin(earth)
pin.xbsjFromJSON(objConfig)
pin.onclick = () => {
    // 点击事件逻辑
}
```

* 添加线

```js
// 处理数据
var busLines = []
var p = [
    [
        [2.120576951415724, 0.5453286305283411, 0],
        [2.1206180324809942, 0.5452742515355276, 0],
        [2.1206522870077222, 0.5452127930893627, 0],
        [2.1206589437154424, 0.5451630655115893, 0],
        [2.1207314498206467, 0.5450382941603948, 9.313225746154785e-10]
    ]
]
let timeDuration = 10.0
let moveBaseDuration = 4.0

busLines = p.map(e => {
    return {
        positions: e.map(ee => [ee[0], ee[1]]),
        color: [
            Math.random() * 0.5 + 0.5,
            Math.random() * 0.8 + 0.2,
            0.0,
            1.0
        ],
         2.0,
        startTime: timeDuration * Math.random(),
        duration: moveBaseDuration + 1.0 * Math.random()
    }
})

// 添加线
const odlines = new XE.Obj.ODLines(earth);
odlines.data = busLines
odlines.timeDuration = timeDuration
odlines.playing = true
```

* 添加 primitives

```js
// 添加一些复杂集合体，柱体、锥体等
const renderState = XE.Obj.CustomPrimitive.getRenderState(true,true)
const evalString = `
    p.canvasWidth = 1;
    p.canvasHeight = 256;
    p.drawCanvas(ctx => {
        ctx.clearRect(0, 0, 1, 256);

        var lingrad2 = ctx.createLinearGradient(0,0,0,256);
        lingrad2.addColorStop(0, 'rgba(255,255,255,0)');
        lingrad2.addColorStop(1, 'rgba(255,255,255,1)');

        ctx.fillStyle = lingrad2;
        ctx.fillRect(0, 0, 1, 256);
    }); 
`;

const preUpdateEvalString = `
    if (typeof p.dt === 'undefined') p.dt = 0.0;
    p.dt += 0.01 * 0.3;
    if (p.dt > 1.0) {
        p.dt = 0.0;
    }

    const b = (1.0-Math.cos(p.dt*Math.PI*2.0))*0.5;
    p.scale[0] = p.scale[1] = 200 * (1.0-Math.cos(p.dt*Math.PI))*0.5;
    p.scale[2] = 50 * b;
    p.color[3] = 2.0 * b;
`;

const config = {
    evalString,
    preUpdateEvalString,
    position,
    scale: [200, 200, 100],
    positions: positions, // 位置数组 [0,-1,0, 0,1,0, 0,1,2, 0,-1,2,]  cylinder.positions or unitSquare.positions 等等
    sts: sts,             // 纹理坐标数组 [0,0, 1,0, 1,1, 0,1, ]
    indices: indices,     // 索引数组 [0, 1, 2, 0, 2, 3,]
    renderState: renderState,
    canvasWidth: 1,
    canvasHeight: 256,
    color: [0.5, 0.8, 1, 2],
}

const p = new XE.Obj.CustomPrimitive(earth);
p.xbsjFromJSON(config);
```

* 其他

```js
// XE.Obj.CustomPrimitive.Geometry.unitSquare
// XE.Obj.CustomPrimitive.Geometry.createCylinder(1.0, 1.0, 1.0, 30)
// XE.Obj.CustomPrimitive.Geometry.unitBillboard
```

##### mapV (处理大量数据)

```js
var dataSet = new mapv.DataSet(data)
var options = {
    fillStyle: 'rgba(55, 50, 250, 0.8)', // 填充颜色
    shadowColor: 'rgba(255, 250, 50, 1)', // 投影颜色
    shadowBlur: 5, // 投影模糊级数
    max: 100, // 数值最大值范围
    size: 42, // 大小值
    label: {
        // 是否显示文字标签
        show: true,
        fillStyle: 'white', // 填充颜色
        // shadowColor: 'yellow',
        font: '18px Arial'
        // shadowBlur: 10,
    },
    globalAlpha: 0.7, // 透明度
    gradient: {
        0.25: 'rgb(87,119,232)',
        0.55: 'rgb(76,117,189)',
        0.85: 'rgb(255,216,0)',
        1.0: 'rgb(227,117,120)'
    }, // 渐变色
    draw: 'honeycomb' // 蜂窝状展示
    // eg: 'honeycomb'/'simple'/'circle'/'rect'/'intensity'/'heatmap'/'category'/'bubble'/'choropleth'
    // eg: 'grid'/'cluster'/'text'/'icon'/'clip'/'time'/
}

XE.mixins.mapVLayer(viewer, dataSet, options)
```



### 参考

1. [cesium 沙盒](https://sandcastle.cesium.com/?)

2. [cesium 官方文档](https://cesium.com/docs/cesiumjs-ref-doc/)
3. [cesium 中文文档](http://cesium.xin/cesium/cn/Documentation1.62/)    **版本可能滞后**
4. [cesium文档（火星科技）](http://cesium.marsgis.cn/go.html?id=12)
5. [earthSdk 沙盒](http://earthsdk.com/v/last/Apps/Examples/?menu=true&url=./startup-createEarth.html)
6. [earthSdk 文档](http://www.earthsdk.com/#/help)
7. [百度mapV示例](https://mapv.baidu.com/examples/)