Technology stack & resources
- frame ：EarthSDK（ be based on cesium Secondary development package ）
- Base map ：Arcgis Public map services
- Building white film ： have shape data , Use CesiumLab Slice for tileset.json
- glb Model ：window The resource manager comes with extraction
Car driving effect
Add vehicle model
let position = [1.998931022772786, 0.6645500890446009, 0]
// Add vehicles
var json = {
"czmObject": {
"xbsjType": "Model",
"url": "/assets/glb/delivery.glb",
"minimumPixelSize": 128,
"maximumScale": 20,
"viewDistance": 500,
// "maximumScale": 500,
// "viewDistance": 1000,
"xbsjPosition": position,
},
"ref": "model1",
}
// Add to scene
this._earth.sceneTree.root.children.push(json)
Add vehicle path
let path = [
[1.9996593978198705, 0.6643798949112332, 0],
[1.999667332682519, 0.6643399484248445, 0],
[1.999661980266788, 0.6643084183139442, 0],
[1.9996677912020882, 0.6642558052776021, 0],
[1.9996703854084483, 0.6642032457083487, 0],
........
]
let json_path = {
"ref": 'path1',
"czmObject": {
"xbsjType": "Path",
"positions": path,
"rotations": [
[0, 0, 0]
],
"currentSpeed": 50,// Current playback speed , The unit is rice.
"alwaysAlongThePath": true,// Always move along the path
"show": false, // According to the path
"loop": true, // Whether it is a loop line
"playing": true, // flight
// Loop or not
// If false, be playing Set to true when , Will play from the current position to the last key , And stop playing , here playing The property will automatically become false. If this property is true when , Play after the last key , Will automatically reset the first key to continue playing .
"loopPlay": true,
"cameraAttached": false// Camera binding
}
}
this._earth.sceneTree.root.children.push(json_path)
Bind vehicle and path , Let the vehicle run at a certain speed on the path
let model1 = this._earth.sceneTree.$refs.model1.czmObject;
let path1 = this._earth.sceneTree.$refs.path1.czmObject;
this._uw1 = XE.MVVM.watch(path1, 'currentPosition', position => {
model1.xbsjPosition = [...position];
});
other
The example code is for reference only , The following issues also need to be considered ,
- The front direction of the vehicle is consistent with the upcoming route
- camera Perspective binding
- Binding of vehicle head directional arrow
Building layering effect
Prepare the data
- Self owned building surface data , And there must be building height or floor number information
- Use arcmap or qgis And other data processing tools , to shp Add a field , The field content is the vertex information of the face
coordinates, To construct the face of each layer according to the vertex of the face - Use cesiumLab Vector building block slicing function shp section
- After slicing , stay cesiumLab In the service interface of , You can see the just sliced url Access path , Or put the results into your own web Access under the server
- Ideas
- Double click the building to hide the current building
- Read the vertex and level attributes of the building , Construct several layers of faces , The interval of each floor is floor height
- Generate floor annotations ,1F , 2F , 3F…
- Double click another building , Restore previous building's 1 , 2, 3 step , Then re execute the... Of the current building 1 , 2, 3 step
Load building white film
// Dynamic effect
var fsBody = `
// Parameters that can be modified
// Be careful shader Write floating-point numbers as , Be sure to bring a decimal point , Otherwise, an error will be reported , such as 0 Need to be written 0.0,1 To write 1.0
float _baseHeight = 0.0; // The base height of the object , It needs to be modified to an appropriate building foundation height
float _heightRange = 20.0; // Highlighted range (_baseHeight ~ _baseHeight + _heightRange) The default is 0-60 rice
float _glowRange = 120.0; // The moving range of the halo ( Height )
// Basic color of building
float vtxf_height = v_elevationPos.z - _baseHeight;
float vtxf_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
float vtxf_a12 = vtxf_height / _heightRange + sin(vtxf_a11) * 0.1;
gl_FragColor *= vec4(vtxf_a12, vtxf_a12, vtxf_a12, 1.0);
// Dynamic halo
float vtxf_a13 = fract(czm_frameNumber / 360.0);
float vtxf_h = clamp(vtxf_height / _glowRange, 0.0, 1.0);
vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;
float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13));
gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - vtxf_diff);
`;
this._earth.sceneTree.root.children.push({
"ref": "tileset_sjz_building",
"czmObject": {
"xbsjType": "Tileset",
"name": " Building white film ",
"url": "http://localhost/building3d-tiles/tileset.json",
"xbsjStyle": "var style = {\n color: \"vec4(0, 0.5, 1.0,1)\"\n}",// Color
"xbsjClippingPlanes": {},
"xbsjCustomShader": {// Dynamic effect of halo up and down
"fsBody": fsBody,
}
}
})
The building is layered
// Double-click the event , Building creation slice
var _that = this
this._earth._viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
// Judge whether it is 3DTileFeature object
if (pickedFeature !== undefined && pickedFeature instanceof Cesium.Cesium3DTileFeature) {
// Hide the current object , And create floor slices
pickedFeature.show = false;
//coordinate and floor That is, vertex and layer height information
var res = _that.createBuildingLevelImg(pickedFeature.getProperty("coordinate"), pickedFeature.getProperty("floor"));
}
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
// Create a floor slice
createBuildingLevelImg(coordinate, level) {
var l = parseFloat(level);
var positions = this.PolygonWktToArray(coordinate);
var x_min = positions[0];
var y_min = positions[1];
for (var i = 0; i < positions.length; i++) {
if (i % 2 == 0) {
if (x_min > positions[i]) {
x_min = positions[i]
}
} else {
if (y_min > positions[i]) {
y_min = positions[i]
}
}
}
// Set the material
var material = new Cesium.Material({
fabric: {
type: 'Color', //Image
uniforms: {
color: new Cesium.Color(30 / 255, 144 / 255, 1.0, 0.5) //imgUrl color
}
}
})
var primitives = [];
var indexs = []
// Cycle generation GeometryInstance, Highly cumulative
for (i = 1; i <= l; ++i) {
let height = 0 + 3 * (i - 1);
var t = "";
if (t < 10) {
t = i;
} else {
t = ("" + i).split('').join(' ')
}
// Add layers 1F、2F、3F、4F.......
this._earth._viewer.entities.add({
id: "building_label_" + i,
position: Cesium.Cartesian3.fromDegrees(x_min, y_min, height),
label: {
text: t + " F",
verticalOrigin: Cesium.VerticalOrigin.BASELINE,
font: "12px sans-serif",
pixeloffset: new Cesium.Cartesian2(300.0, 100.0),
scale: 0.2,
horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000),
scaleByDistance: new Cesium.NearFarScalar(100, 10, 2000, 1),
},
});
// Add face
var primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray(positions)
),
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
height: height
}),
id: "building_level_" + i
}),
appearance: new Cesium.EllipsoidSurfaceAppearance({
material: material,
aboveGround: true, // Show back
})
});
var index = this._earth._viewer.scene.primitives._primitives.length;
this._earth._viewer.scene.primitives.add(primitive, index)
primitives.push(primitive);
indexs.push(index);
}
}
other
- Double click the event to consider
- Judge whether the double-click object is 3DTileFeature object
- Dimensions and faces pass through ID Prefix to group , In a batch operation ID The prefix is consistent （ Personal clumsy skills , Can only think of this behavior to distinguish ）
- Whether only one object is allowed to be sliced , If not allowed , You need to double-click the last object （ 3DTileFeature and Floor surface ） Show status restore .
- After stratification , Face click event , for example ： Click to select red , The mouse is yellow
- Exit button ： and （3） Agreement , That is, double-click the object （ 3DTileFeature and Floor surface ） Show status restore .
- 3DTile Objects are also divided into level, stay level5 Double click the building to layer the building , If zoom to level6, The building will reappear , At this point, you need to record the clicked position , Monitor for changes in perspective （ Similar events can ）, When it changes , Re determine whether there is a new... At the double click 3DTileFeature Generate , If you have any , Then continue to hide .
Billboard 、Label、 Light effect
beam 、DIV Follow and hide beyond the distance
![Jerry's Bluetooth distribution network [chapter]](/img/e9/6474d7523f0feb3bad4ec3221fb2e9.png)
