This is the 11th day of my participation in the August More Text Challenge
preface
As long as you understand the implementation, the idea is the same regardless of which map rendering engine you use, adding (clearing) circles and adding (clearing) points to the map API. The following figure shows a functional example
Function and dismantling
There are usually two ways to customize the default circle and add a circle with the default value of 500 meters according to the center point (the actual scene is generally the peripheral query).
1. Manually draw a circle and add it to the map (map engines on the market have methods that are not explained, the same below)
2. Get the center of the circle
3. Calculate the coordinate value of drag button according to the center point and add it to the map. Longitude coordinates plus 500 meters processing, latitude coordinates with the center point.
Usually, when the latitude and longitude coordinates are 4326, that is, in degrees, you need to convert them to 3857 projection coordinates in meters, and then add 500. You can see my other article on coordinate conversion
4. Bind the drag button events mousedown (mouse click and hold), mousemove(mousemove), mouseup(mouse release)
What do you do with mouse movement?
1. Disable map movement events first
2. Remove the original circle and button
3. According to the current mouse position, calculate the radius of the circle (known center point remains unchanged) and the coordinate value of the button
4. Add newly computed circles and drag buttons
What do you do with the mouse loose?
1. Recover map movement events
2. We usually need to call the interface after drawing, so we execute the callback function. Pass the center of the radius as a parameter.
conclusion
The above is to achieve the specific steps of the drag circle, detailed code in the next chapter.