Draw a point wherever the mouse clicks
Directly copy the last picture code, any HTML with cesium, you can experience it directly as shown in the picture
Let me explain it step by step. Finally, I will put the overall code at the bottom. Cesium is too difficult to learn. Compared with other languages, there are too few learning resources and it is inconvenient. I am also learning, so I will give each attribute Everyone writes about its function, and the cesium tutorials on the Internet are too complicated for beginners, and sometimes they can’t understand them.
(Step 1) Create a globe, let the perspective look at a certain coordinate, and then create a screen control instance to obtain all canvas instances
//Build an Earth
const viewer = new Cesium.Viewer("pu", {
baseLayerPicker: false,
//imageryProvider:esri,
});
//Let the perspective look towards this coordinate
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 116.39), //The current perspective is looking here
});
let flag = 1; //Throttle valve
//Create a screen control instance and obtain all canvas instances under the scene under the viewer
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
(Step 2) Add a listening event. Complete all operations in the callback function in this listening event. See the next step for specific operations.
//Add a setInputAction listening event, which can monitor click and move events
handler.setInputAction(function (movement) {
//Get the world coordinates of the point. Here are the world coordinates, which cannot be used directly and need to be converted into longitude and latitude.
//pickEllipsoid returns the point on the ellipsoid or map surface in the world coordinate system
const start_point = viewer.scene.camera.pickEllipsoid(
movement.position, //First parameter world coordinates
viewer.scene.globe.ellipsoid //The second parameter globe is to obtain this map. ellipsoid is to obtain the ellipsoid describing the shape of the earth.
);
//Cartesian coordinates to radians fromCartesian creates a new cartography instance from the Cartesian position. The values in the result object will be expressed in radians.
let cartographic = Cesium.Cartographic.fromCartesian(//fromCartesian has three parameters
start_point,//The first one is the Cartesian position to be converted to a cartographic expression
viewer.scene.globe.ellipsoid,//The second one is the ellipsoid where the position is located
new Cesium.Cartographic()//The third one is the storage location
);
// Cesium.Math.toDegrees This is radian conversion, converting radian into longitude and latitude
let lng = Cesium.Math.toDegrees(cartographic.longitude);//longitude and latitude are precision and latitude
let lat = Cesium.Math.toDegrees(cartographic.latitude);
//let pick = viewer.scene.pick(movement.position)
//It can be used now
if (flag <= 2) {
flag + + ; //I only need two points this time, so I set the throttle and let it go to draw points multiple times.
let poly = viewer.entities.add({ //Add entities
position: new Cesium.Cartesian3.fromDegrees(lng, lat, 0), //Add the position information of the entity
point: { //Add point
pixelSize: 25, //Add the size of the point
color: new Cesium.Color(1, 0, 0, 1), //Color of point
},
});
}
//The current event is a click event
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
(Step 3) We can obtain the world coordinates through the event object of the listening function, which is “e”. Of course, this world coordinate cannot be used directly and needs to be converted. If used directly, the position of the point will also come out, but it does not It’s not the position we want. We need to convert it into a radian step by step and then draw points.
//Get the world coordinates of the point. Here are the world coordinates, which cannot be used directly and need to be converted into longitude and latitude.
//pickEllipsoid returns the point on the ellipsoid or map surface in the world coordinate system
const start_point = viewer.scene.camera.pickEllipsoid(
movement.position, //First parameter world coordinates
viewer.scene.globe.ellipsoid //The second parameter globe is to obtain this map. ellipsoid is to obtain the ellipsoid describing the shape of the earth.
);
//Cartesian coordinates to radians fromCartesian creates a new cartography instance from the Cartesian position. The values in the result object will be expressed in radians.
let cartographic = Cesium.Cartographic.fromCartesian(//fromCartesian has three parameters
start_point,//The first one is the Cartesian position to be converted to a cartographic expression
viewer.scene.globe.ellipsoid,//The second one is the ellipsoid where the position is located
new Cesium.Cartographic()//The third one is the storage location
);
// Cesium.Math.toDegrees This is radian conversion, converting radian into longitude and latitude
let lng = Cesium.Math.toDegrees(cartographic.longitude);//longitude and latitude are precision and latitude
let lat = Cesium.Math.toDegrees(cartographic.latitude);
(Step 4) After conversion, you can draw points directly
//You can use it now
if (flag <= 2) {
flag + + ; //I only need two points this time, so I set the throttle and let it go to draw points multiple times.
let poly = viewer.entities.add({ //Add entities
position: new Cesium.Cartesian3.fromDegrees(lng, lat, 0), //Add the position information of the entity
point: { //Add point
pixelSize: 25, //Add the size of the point
color: new Cesium.Color(1, 0, 0, 1), //Color of point
},
});
}
The following code is a summary of the above. You can directly copy it and experience it directly in the html file.
const viewer = new Cesium.Viewer("pu", {
baseLayerPicker: false,
//imageryProvider:esri,
});
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 116.39), //The current perspective is looking here
});
//The above code is not important, it is the basis for building the earth.
//------------------------------------------------ -----------------------------------------------
//The following is the core code
let flag = 1; //Throttle valve
//Create a screen control instance and obtain all canvas instances under the scene under the viewer
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
//Add a setInputAction listening event, which can monitor click and move events
handler.setInputAction(function (movement) {
//Get the world coordinates of the point. Here are the world coordinates, which cannot be used directly and need to be converted into longitude and latitude.
//pickEllipsoid returns the point on the ellipsoid or map surface in the world coordinate system
const start_point = viewer.scene.camera.pickEllipsoid(
movement.position, //First parameter world coordinates
viewer.scene.globe.ellipsoid //The second parameter globe is to obtain this map. ellipsoid is to obtain the ellipsoid describing the shape of the earth.
);
//Cartesian coordinates to radians fromCartesian creates a new cartography instance from the Cartesian position. The values in the result object will be expressed in radians.
let cartographic = Cesium.Cartographic.fromCartesian(//fromCartesian has three parameters
start_point,//The first one is the Cartesian position to be converted to a cartographic expression
viewer.scene.globe.ellipsoid,//The second one is the ellipsoid where the position is located
new Cesium.Cartographic()//The third one is the storage location
);
// Cesium.Math.toDegrees This is radian conversion, converting radian into longitude and latitude
let lng = Cesium.Math.toDegrees(cartographic.longitude);//longitude and latitude are precision and latitude
let lat = Cesium.Math.toDegrees(cartographic.latitude);
//let pick = viewer.scene.pick(movement.position)
//It can be used now
if (flag <= 2) {
flag + + ; //I only need two points this time, so I set the throttle and let it go to draw points multiple times.
let poly = viewer.entities.add({ //Add entities
position: new Cesium.Cartesian3.fromDegrees(lng, lat, 0), //Add the position information of the entity
point: { //Add point
pixelSize: 25, //Add the size of the point
color: new Cesium.Color(1, 0, 0, 1), //Color of point
},
});
}
//The current event is a click event
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill treeHomepageOverview 39861 people are learning the system