A method for constructing and displaying a simulation map in an offline scenario

Abstract

The present invention provides a method for constructing and displaying a simulation map in an offline scenario, comprising the following steps: loading a rendering target image in a display area, and generating a canvas to cover the image display area; monitoring a wheel event or a click event in the display area, and configuring a zoom and drag function for the image based on the wheel orientation or the position coordinate information of the click event; monitoring the click event in the display area to perform a dot operation, and adding dot configuration information to generate a point information group corresponding to the coordinates; obtaining an image from a server based on the image configuration information, loading and rendering it to the display area, and configuring a zoom and drag function; obtaining all dot information in the current display area, and displaying the dot information according to the dot configuration information; monitoring and parsing the data sent by the server, and changing or enhancing the displayed dot information according to the server instruction or preset configuration. The present invention can provide a low-cost and fast map use solution for geographic information service demanders.

Description

Technical Field

[0001] The present invention relates to the technical field of simulation maps, and in particular to a method for constructing and displaying a simulation map in an offline scenario. Background Art

[0002] Most geographic information service providers provide online maps and functional services, which cannot be used in offline scenarios. The current solution for using map services in offline scenarios is to privatize the online map services of map service providers, or load maps by locally storing tile maps. In actual use, privatization is expensive, and the method of storing tile maps requires a lot of storage space. At the same time, the update speed of geographic information depends on the update speed of the supplier. Some geographic information map suppliers of newly built parks cannot provide them, which will affect the use of business systems.

[0003] Therefore, it is necessary to develop a method to achieve the goal of economical and convenient use of map services in offline scenarios, so as to adapt to various application scenarios and realize the construction and display of simulation maps in offline scenarios.

[0004] The Chinese patent with publication number CN116755726A proposes a method for storing, deploying and drawing high-precision offline maps in an isolated network environment. The method of the patent includes the following steps: downloading multiple levels of maps of a specified area through a tile map download tool; optimizing the storage of the obtained tile data by calculating the file MD5 value; using an image preprocessing algorithm to quickly customize the coloring of tiles to obtain new tiles; building an application server, loading the new tile resources obtained after the optimized coloring process into the application, and obtaining the map effect of the corresponding function through the access interface; using containerization technology to encapsulate container data packets, packaging and deploying map applications, and forming an offline map image. This method optimizes the storage and coloring of tile images, but does not take into account the problem of timely updating of map data and the large space occupied by tile image storage.

[0005] The Chinese patent with publication number CN117492602A proposes a terminal visualization and interactive processing method and device based on canvas. The method of the patent monitors click operations and drag operations. When monitoring the user's mouse click operation, the terminal position anchor point coordinates are synchronously compared to determine whether they are within the coordinate error range and retrieve the corresponding terminal information display; when monitoring the user's mouse drag operation, the initial position and coordinate axis offset are written into a temporary two-dimensional array for temporary storage according to the coordinate offset when the mouse is pressed, and the monitoring ends after the mouse is lifted, and the terminal position anchor point coordinates are compared one by one, and all comparison results are returned as the terminal information display within the framed area. However, this method is only used to display or frame the existing terminal information on the picture, and cannot flexibly configure the terminal information on the picture according to user needs. Summary of the invention

[0006] Based on the above background, the present invention proposes a lightweight simulation map construction and display method suitable for offline scenarios, so as to provide a low-cost and fast map usage solution for geographic information service demanders who cannot use the Internet or whose geographic data is not updated in a timely manner.

[0007] In order to achieve the above object, the present invention adopts the following technical solutions:

[0008] A method for constructing and displaying a simulation map in an offline scenario includes the following steps:

[0009] Load the rendering target image in the display area and generate a canvas to cover the image display area;

[0010] Monitoring a scroll wheel event or a click event in the display area, and configuring a zoom and drag function for the image based on the scroll wheel direction of the scroll wheel event or the position coordinate information of the click event on the canvas;

[0011] Monitor click events in the display area, perform dot operations based on the coordinate information of the click events on the canvas, add dot configuration information to generate a point information group corresponding to the coordinates, and save all point information groups, pictures, and picture configuration information together to the server;

[0012] Based on the image configuration information, the image is obtained from the server and loaded and rendered into the display area, and the zoom and drag functions are configured;

[0013] Get all the dot information in the current display area, display the basic dot information according to the dot configuration information, monitor the click event, and display the dot information details based on the click event;

[0014] Monitor the data sent by the server and parse it. If the data contains the dot information in the current display area, find the dot and change or enhance the displayed dot information according to the server instructions or preset configuration.

[0015] Furthermore, the target image is an image corresponding to a plurality of horizontal and vertical sub-regions formed after segmenting the target region, and each target image is configured with a corresponding sub-region name.

[0016] Furthermore, the dot configuration information includes at least dot coordinate information, device information corresponding to the dot and dot identification information itself; the image configuration information includes image identification information itself, sub-area identification information corresponding to the image, image center point or user-defined center point, and project identification information corresponding to the image.

[0017] Further, monitoring a scroll wheel event in the display area, and configuring a zoom function for the image based on a scroll wheel direction of the scroll wheel event includes:

[0018] Monitor the mouse wheel event, determine the wheel direction based on the positive or negative value of the returned parameter delatY, and get the final zoom factor through the formula finiscale = iniscale * (1 + d), where iniscale is the original zoom ratio of the image and d is the preset zoom factor;

[0019] Calculate the maximum offset of the image, maxX = (d * rect.width ) / 2, maxY = (d *rect.height) / 2, where rect.width represents the original width of the image, and rect.height represents the original height of the image;

[0020] Calculate the position of the zoom center point (X, Y) in the image by subtracting the position of the upper left corner of the image in the display area (rect.x, rect.y) from the current mouse point coordinates (e.clientX, e.clientY). X=e.clientX–rect.x, Y=e.clientY–rect.y;

[0021] Calculate the final offset x, y: x = x'-(d*(X-x')-maxX), y = y'-(d*(Y-y')-maxY), where x', y' are the final offsets calculated last time, and the initial value is set to 0;

[0022] According to the final offset and the final zoom factor finiscale, use the transform property of the image to enlarge or reduce the image centered on the event trigger point.

[0023] Further, monitoring a click event in the display area, and configuring a drag function for the image based on position coordinate information of the click event on the canvas includes:

[0024] When a mouse press event is detected, the coordinate position of the event trigger point is recorded as the initial value, lastPointermoveX = e.clientX, lastPointermoveY = e.clientY;

[0025] When a mouse move event is detected, the drag state of the image is turned on, the difference between the current coordinate value and the initial value (x, y) is calculated, and the image is translated using the image's transform property based on the x and y values: x = x' + (e.clientX - lastPointermoveX), y = y' + (e.clientY - lastPointermoveY);

[0026] When the mouse is lifted, the dragging ends.

[0027] Further, monitoring the click event in the preset display area, performing a dot operation based on the coordinate information of the click event on the canvas, and adding dot configuration information to generate a point information group corresponding to the coordinates includes:

[0028] Monitor the user's mouse press and release events. When the mouse is pressed and then released, it is determined as a click action;

[0029] Get the position where the mouse is pressed and record it as offsetX and offsetY respectively, where offsetX represents the horizontal offset of the mouse click point relative to the left edge of the canvas, and offsetY represents the vertical offset of the mouse click point relative to the top edge of the canvas;

[0030] Calculate the current dot coordinate point point={x p :offsetX / displayWidth*iniscale,y p :offsetY / displayHeight*iniscale}, where x p Indicates the percentage of the horizontal offset of the mouse click point relative to the left edge of the image, y p Indicates the vertical offset percentage of the mouse click point relative to the upper edge of the image, displayWidth indicates the width of the image after rendering, displayHeight indicates the height of the image after rendering, and iniscale indicates the original zoom ratio of the image;

[0031] Record the current dotting coordinates, and add dotting configuration information to generate a group of point information corresponding to this coordinate;

[0032] When it is detected again that the user presses the mouse, it is determined that a new dotting starts to be drawn, and when the mouse is lifted, the dotting and adding dotting configuration information operations are executed;

[0033] Filter the repeated dotting data at the same position and of the same type.

[0034] Further, obtain all the dotting information within the current display area, and perform basic dotting information display according to the dotting configuration information, including:

[0035] Obtain the coordinates of the corresponding points of the upper left corner and the lower right corner of the display area on the picture, set the coordinates of the upper left corner point as ax and ay, and the coordinates of the lower right corner point as bx and by;

[0036] Obtain the dotting data set stored in the server, loop through all the dotting data sets, and parse to obtain the coordinates x 1 and y 1 ;

[0037] Judge the dotting coordinates. If x 1 > ax and x 1 < bx, and y 1 > ay and y 1 < by, then it means that the dotting position is within the display area range, and store this dotting in a temporary array;

[0038] Loop through the dotting data in the above temporary array, parse each dotting data, and obtain the dotting configuration information;

[0039] According to the different types of target devices, determine the shape of the icon; according to the coordinates of the dotting, add the target device icon corresponding to the dotting to the base map, and set the icon to the default color.

[0040] Further, listen to the data sent by the server and parse it. If the data contains the dotting information within the current display area, find this dotting, and change or enhance the displayed dotting information according to the server instructions or preset configurations, including:

[0041] Listen to the data sent by the server in real time and parse it to obtain the dotting identification information contained in the data;

[0042] Traverse the group of point information within the current display area. If the parsed dotting identification information matches a certain dotting identification information in the group of point information, select the dotting corresponding to this dotting identification information, and change or enhance the displayed dotting information according to the server instructions or preset configurations.

[0043] Furthermore, changing or enhancing the displayed dot information according to the server instruction or preset configuration includes:

[0044] Change the color of the current dot to the specified color, and / or add style animation.

[0045] Furthermore, the display area is a preset display area configured on the web page.

[0046] The beneficial effects of the present invention are as follows:

[0047] Based on the method of the present invention, the function of the simulation map can be realized in an offline environment, and through the corresponding algorithm, the display area only displays the points in the current display range, avoiding the request and rendering of a large amount of data, which can greatly improve the operating performance and enhance the user experience. On the one hand, the user can use a custom coordinate system to record the coordinates of the points on the picture, and set the attributes of the points according to business needs, such as personalized parameter configuration for the points such as lamp poles, distribution cabinets, and box transformers. On the other hand, the user can also see the corresponding dotting data on the picture after the dotting, and can combine the business data at the same time, for example, display different colors through the status of the dotting, so that the user can intuitively see the equipment status corresponding to each dotting. On this basis, by real-time monitoring of the messages sent by the server, information can be obtained and analyzed in real time, and the dotting status can be updated synchronously to achieve real-time update of data. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] Figure 1 It is a flowchart of an embodiment of a method for constructing and displaying a simulation map according to the present invention.

[0049] Figure 2 It is a schematic diagram of the deviation of the mouse click point in the embodiment of the simulation map construction and display method of the present invention. DETAILED DESCRIPTION

[0050] Embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. Although certain embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be construed as being limited to the embodiments set forth herein. On the contrary, these embodiments are provided to provide a more thorough and complete understanding of the present invention. It should be understood that the drawings and embodiments of the present invention are only for exemplary purposes and are not intended to limit the scope of protection of the present invention.

[0051] See also Figure 1 The embodiment of the present invention provides a method for constructing and displaying a simulation map in an offline scenario, comprising the following steps:

[0052] S1. Load the rendering target image in the display area and generate a canvas to cover the image display area.

[0053] As a preferred implementation, in this embodiment, the display area is a preset display area configured on a web page. The target image is an image corresponding to multiple horizontal and vertical sub-areas formed after the target area is divided, and each target image is configured with a corresponding sub-area name.

[0054] In an example, the specific implementation of this step is as follows:

[0055] The first step is to select the target image as the background image and render it into the fixed display area of ​​the web page. By setting the image properties (max-width: 100%, max-height: 100%), the image does not exceed the fixed display area.

[0056] Specifically, when using images to display regional information, the target area is divided into multiple horizontal and vertical sub-areas, such as parking lots, exhibition buildings, etc., taking into account the regional area and building space display. Each target image is set with a corresponding sub-area name. Before uploading the image, you can select or add the sub-area name.

[0057] The second step is to get the rendered height and width of the image after the image is fully loaded, set the rendered width and height of the image to displayWidth and displayHeight respectively, and the original zoom ratio of the image to iniscale (the default value is 1). After the image is fully loaded, draw a canvas that is the same size and flush with the image, covering the image display area.

[0058] S2. Monitor a scroll wheel event or a click event in the display area, and configure a zoom and drag function for the image based on a scroll wheel direction of the scroll wheel event or position coordinate information of the click event on the canvas.

[0059] In an example, the specific implementation of configuring the zoom function for a picture is as follows:

[0060] Monitor the mouse wheel event, determine the direction of the wheel based on the positive or negative value of the returned parameter delatY, and get the final zoom factor through the formula finiscale = iniscale * (1 + d), where iniscale is the original zoom ratio of the image, the default value is 1, and d is the preset zoom factor. For example: if the delatY value is less than 0, it means upward, set d = 0.25 (the minimum zoom factor set); if the delatY value is greater than 0, it means downward, set d = -0.25 (the minimum zoom factor set).

[0061] Calculate the maximum offset of the image, maxX = (d * rect.width ) / 2, maxY = (d *rect.height) / 2, where rect.width represents the original width of the image, and rect.height represents the original height of the image;

[0062] Calculate the position of the zoom center point (X, Y) in the image by subtracting the position of the upper left corner of the image in the display area (rect.x, rect.y) from the current mouse point coordinates (e.clientX, e.clientY). X=e.clientX–rect.x, Y=e.clientY–rect.y;

[0063] Calculate the final offset x, y: x = x'-(d*(X-x')-maxX), y = y'-(d*(Y-y')-maxY), where x', y' are the final offsets calculated last time, and the initial value is set to 0;

[0064] According to the final offset and the final zoom factor finiscale, use the transform property of the image to enlarge or reduce the image centered on the event trigger point.

[0065] The transform property of an image is a property used by CSS (Cascading Style Sheets) to change the shape or position of elements in a web page. CSS is a computer language used to express the style of files such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language), which are both common basic means in this field.

[0066] It has been verified that the above method is used to configure the image zoom function. In actual use, the zooming process is relatively smooth, and no negative effects such as image shaking are caused. The user experience is relatively good.

[0067] Based on the above steps, the specific implementation method of configuring the drag function for the image based on the position coordinate information of the click event on the canvas is as follows:

[0068] Monitor the mouse pressing, moving and lifting events;

[0069] When a press event is detected, the variable flag is set to true, the drag state of the image is turned on, and the coordinate position of the event trigger point is recorded as the initial value, lastPointermoveX = e.clientX, lastPointermoveY = e.clientY;

[0070] When a move event is detected, if the variable flag is true, the drag state of the image is turned on, the difference between the current coordinate value and the initial value (x, y) is calculated, and the image is translated using the image's transform property based on the x and y values: x=x'+(e.clientX –lastPointermoveX), y=y' +(e.clientY – lastPointermoveY);

[0071] When the mouse is lifted, the dragging ends.

[0072] S3. Monitor the click events in the display area, perform dot operations based on the coordinate information of the click events on the canvas, add dot configuration information to generate a point information group corresponding to the coordinates, and save all point information groups, pictures, and picture configuration information together to the server.

[0073] In an example, the above steps are specifically implemented as follows:

[0074] Monitor the user's mouse press and release events. When the mouse is pressed and then lifted from the original position, it is determined as a click action;

[0075] Get the position where the mouse is pressed and record it as offsetX and offsetY respectively, where offsetX represents the horizontal offset of the mouse click point relative to the left edge of the canvas, and offsetY represents the vertical offset of the mouse click point relative to the top edge of the canvas, see Figure 2 ;

[0076] Calculate the current dot coordinate point point={x p :offsetX / displayWidth*iniscale,y p :offsetY / displayHeight*iniscale}, where x p Indicates the percentage of the horizontal offset of the mouse click point relative to the left edge of the image, y p It indicates the vertical offset percentage of the mouse click point relative to the upper edge of the image. displayWidth indicates the width of the image after rendering. displayHeight indicates the height of the image after rendering. iniscale indicates the original zoom ratio of the image.

[0077] Record the current dot coordinates and add dot configuration information to generate a point information group corresponding to the coordinates; as a preferred implementation, when saving the coordinate information, save it to six decimal places for accuracy considerations. Example: point={ x p :0.255623, yp :0.563219}. The dot configuration information at least includes dot coordinate information, device information corresponding to the dot and dot identification information.

[0078] When the user presses the mouse again, it is determined to start drawing new dots, and when the mouse is lifted, the dot drawing and dot configuration information adding operations are executed;

[0079] Filter the repeated dot data of the same location and type.

[0080] Specifically, when saving coordinate information, it is necessary to determine whether the current point exceeds the image display area. If it exceeds the area, the current point will not be saved. In actual scenarios, when marking points, it is necessary to consider the various types of equipment corresponding to the current point. For example, in the lighting system, different types of equipment such as distribution cabinets, poles, and box transformers are displayed. Before marking points, select or add the equipment type corresponding to the point, bring the equipment type field when saving, and match different icons according to the equipment type when displaying. Example: point={ x p :0.255623,y p :0.563219,type:1}, where type indicates the device type. Finally, the processed coordinate points are saved in a temporary array to prepare new points.

[0081] In the actual marking process, points of the same type and at the same location cannot be added repeatedly. During the adding process, duplicate data of the same type and at the same location need to be filtered out.

[0082] When all the dots on a picture are completed, the picture configuration information is added to the picture, and then saved to the server together with all the point information groups and the picture itself.

[0083] As a preferred implementation scheme, the picture configuration information includes the picture's own identification information, the sub-region identification information corresponding to the picture, the picture center point or the user-defined center point, and the project identification information corresponding to the picture.

[0084] In one example, the point information group and image configuration information saved to the server are:

[0085] {picurl:'currentUrl',area:'areaB',center:'12.562389%,15.235611%',projectId:'123456',relatePoint:[{x p :0.452852,y p :0.528521,type:1,id:12348522456248772},{x p :0.554852,yp :0.638941,type:2,id:12348522456248782}]}, where picurl is the image's own identification information, area is the sub-area identification information corresponding to the image, center is the image center point or the user-defined center point, projectId is the project identification information, relatePoint is the point information group, and x p ,y p is the dot coordinate, type is the device information corresponding to the dot, and id is the identification information of the dot itself.

[0086] S4. Based on the image configuration information, the image is obtained from the server, loaded and rendered into the display area, and the zoom and drag functions are configured.

[0087] Specifically, you can first select the area name (all subsequent data obtained from the server will default to the data of this area), obtain the image address corresponding to the area stored on the server, retrieve and parse the data, and then render the image in the fixed display area of ​​the web page.

[0088] The method of configuring the zoom and drag functions refers to the aforementioned step S2 and will not be described in detail here.

[0089] When parsing the data retrieved from the server, you can also set the image zoom level and initial zoom level according to the parsed data. For example, you can set the zoom level to 1 to 5, where each level can be subdivided into 4 levels, that is, the minimum unit of zoom is 0.25 level, and the initial zoom level is 3.

[0090] Finally, parse and obtain the coordinates of the center point of the image, named A, and parse coordinate A to obtain the specific positions of the x-axis and y-axis. Calculate the coordinates of the center point of the display area, named B, and divide the image width and image height by 2 to obtain the coordinates of the center point of the display area. Calculate the difference between coordinates A and B, and use the difference to translate the image so that the center point is in the middle of the display area.

[0091] S5. Obtain all dot information in the current display area, display basic dot information according to the dot configuration information, monitor click events, and display dot information details based on the click events.

[0092] In an example, the above steps are specifically implemented as follows:

[0093] Get the coordinates of the corresponding points of the upper left corner and lower right corner of the display area on the image, set the coordinates of the upper left corner point to ax and ay, and the coordinates of the lower right corner point to bx and by;

[0094] Get the dot data set stored in the server, loop through all the dot data sets, and parse to get the coordinate x1 and y 1 ;

[0095] Judge the dot coordinates. If x 1 > ax and x 1 < bx, and y 1 > ay and y 1 < by, then it means that the dot position is within the display area range, and store the dot in the temporary array;

[0096] Loop through the dot data in the above array, parse the data of each dot, and obtain the dot configuration information;

[0097] According to the different target device types corresponding to the dot, determine the shape of the icon; according to the coordinates of the dot, add the target device icon corresponding to the dot to the base map and set the icon to the default color.

[0098] When the user clicks on a certain dot, obtain the dot information, and execute different business logics according to the type of the dot. For example, for device dots such as lamp posts and distribution cabinets, different detail pages can be popped up.

[0099] Among them, whenever the picture is zoomed or dragged, the above steps will be repeated to implement the function of real-time displaying the dots within the display area.

[0100] S6. Listen to the data sent by the server and parse it. If the data contains the dot information within the current display area, find the dot and change or enhance the displayed dot information according to the server instructions or preset configurations.

[0101] In an illustrated example, the specific implementation method of the above steps is as follows:

[0102] Real-time listen to the data sent by the server and parse it to obtain the dot identification information contained in the data.

[0103] Traverse the dot information group within the current display area. If the parsed dot identification information matches a certain dot identification information in the dot information group, select the dot corresponding to the dot identification information and change or enhance the displayed dot information according to the server instructions or preset configurations.

[0104] Specifically, an example of changing or enhancing the displayed dot information is as follows:

[0105] Change the color of the current dot to the specified color, and add a style animation to indicate that the device at the dot has an alarm. For example, if a device at a certain point on a light pole issues an alarm, the server pushes a message to the page. After receiving the message, the page sets the corresponding dot color or device icon to red, and adds a style animation to indicate that the device at the dot has an alarm.

[0106] It should be noted that the method of the embodiment of the present invention can be performed by a single device, such as a computer or a server. The method of this embodiment can also be applied in a distributed scenario and completed by multiple devices cooperating with each other. In the case of such a distributed scenario, one of the multiple devices can only perform one or more steps in the method of the embodiment of the present invention, and the multiple devices will interact with each other to complete the described method.

[0107] It should be noted that some embodiments of the present invention are described above. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the above embodiments and still achieve the desired results. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0108] The embodiments of the present invention are intended to cover all such substitutions, modifications and variations that fall within the broad scope of the appended claims. Therefore, any omissions, modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the embodiments of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for constructing and displaying a simulation map in an offline scenario, characterized in that: The steps include: Load the rendering target image in the display area and generate a canvas to cover the image display area; Monitoring a wheel event or a click event in the display area, and configuring a zoom and drag function for the image based on the wheel direction of the wheel event or the position coordinate information of the click event on the canvas; wherein configuring a zoom function for the image based on the wheel direction of the wheel event includes: Monitor the mouse wheel event, determine the wheel direction based on the positive or negative value of the returned parameter delatY, and get the final zoom factor through the formula finiscale = iniscale * (1 + d), where iniscale is the original zoom ratio of the image and d is the preset zoom factor; Calculate the maximum offset of the image, maxX = (d * rect.width ) / 2, maxY = (d *rect.height) / 2, where rect.width represents the original width of the image and rect.height represents the original height of the image; Calculate the position of the zoom center point (X, Y) in the image by subtracting the position of the upper left corner of the image in the display area (rect.x, rect.y) from the current mouse point coordinates (e.clientX, e.clientY). X=e.clientX–rect.x, Y=e.clientY–rect.y; Calculate the final offset x, y: x = x'-(d*(X-x')-maxX), y = y'-(d*(Y-y')-maxY), where x', y' are the final offsets calculated last time, and the initial value is set to 0; According to the final offset and final zoom factor finiscale, use the transform attribute of the image to enlarge or reduce the image centered on the event trigger point; Monitor click events in the display area, perform dot operations based on the coordinate information of the click events on the canvas, add dot configuration information to generate a point information group corresponding to the coordinates, and save all point information groups, pictures, and picture configuration information together to the server; Based on the image configuration information, the image is obtained from the server and loaded and rendered into the display area, and the zoom and drag functions are configured; Get all the dot information in the current display area, display the basic dot information according to the dot configuration information, monitor click events, and display the dot information details based on the click events; Monitor the data sent by the server and parse it. If the data contains the dot information in the current display area, find the dot and change or enhance the displayed dot information according to the server instructions or preset configuration.

2. The method for constructing and displaying a simulated map in an offline scenario as claimed in claim 1, characterized in that: The target image is an image corresponding to a plurality of horizontal and vertical sub-areas formed after segmenting the target area, and each target image is configured with a corresponding sub-area name.

3. The method for constructing and displaying a simulated map in an offline scenario as claimed in claim 1 or 2, characterized in that: The dot configuration information at least includes dot coordinate information, device information corresponding to the dot and dot identification information itself; the image configuration information includes image identification information itself, sub-area identification information corresponding to the image, image center point or user-defined center point, and project identification information corresponding to the image.

4. The method for constructing and displaying a simulated map in an offline scenario as claimed in claim 1, characterized in that: Monitoring a click event in the display area, and configuring a drag function for the image based on position coordinate information of the click event on the canvas includes: When a mouse press event is detected, the coordinate position of the event trigger point is recorded as the initial value, lastPointermoveX = e.clientX, lastPointermoveY = e.clientY; When a mouse move event is detected, the drag state of the image is turned on, the difference between the current coordinate value and the initial value (x, y) is calculated, and the image is translated using the image's transform property based on the x and y values: x = x' + (e.clientX' – lastPointermoveX), y = y' + (e.clientY' – lastPointermoveY); where e.clientX' and e.clientY' are the current coordinates of the trigger point after the mouse moves; When the mouse is lifted, the dragging ends.

5. The method for constructing and displaying a simulated map in an offline scenario as claimed in claim 3, characterized in that: Monitoring click events in the display area, performing dot operations based on coordinate information of the click events on the canvas, and adding dot configuration information to generate a point information group corresponding to the coordinates includes: Monitor the user's mouse press and release events. When the mouse is pressed and then released, it is determined as a click action; Get the position where the mouse is pressed and record it as offsetX and offsetY respectively, where offsetX represents the horizontal offset of the mouse click point relative to the left edge of the canvas, and offsetY represents the vertical offset of the mouse click point relative to the top edge of the canvas; Calculate the current dot coordinate point point={x p :offsetX / displayWidth*iniscale,y p :offsetY / displayHeight*iniscale}, where x p Indicates the percentage of the horizontal offset of the mouse click point relative to the left edge of the image, y p Indicates the vertical offset percentage of the mouse click point relative to the upper edge of the image, displayWidth indicates the width of the image after rendering, displayHeight indicates the height of the image after rendering, and iniscale indicates the original zoom ratio of the image; Record the current dot coordinates and add dot configuration information to generate a point information group corresponding to the coordinates; When the user presses the mouse again, it is determined to start drawing new dots, and when the mouse is lifted, the dot drawing and dot configuration information adding operations are executed; Filter the repeated dot data of the same location and type.

6. The method for constructing and displaying a simulated map in an offline scenario as claimed in claim 5, characterized in that: Get all the dot information in the current display area, and display the basic dot information according to the dot configuration information, including: Get the coordinates of the corresponding points of the upper left corner and lower right corner of the display area on the image, set the coordinates of the upper left corner point to ax and ay, and the coordinates of the lower right corner point to bx and by; Get the dot data set stored in the server, loop through all the dot data sets, and parse to obtain the coordinates x1 and y1; Judge the dot coordinates. If x1 > ax and x1 < bx, and y1 > ay and y1 < by, it means that the dot position is within the display area. Store the dot in a temporary array. Loop through the dot data in the temporary array, parse each dot data, and obtain dot configuration information; The shape of the icon is determined according to the type of target device; the target device icon corresponding to the dot is added to the base map according to the coordinates of the dot, and the icon is set to the default color.

7. The method for constructing and displaying a simulated map in an offline scenario as claimed in claim 6, characterized in that: Listen to the data sent by the server and parse it. If the data contains the dot information in the current display area, find the dot and change or enhance the displayed dot information according to the server instructions or preset configuration, including: Monitor and parse the data sent by the server in real time to obtain the dot identification information contained in the data; The point information groups in the current display area are traversed. If the parsed dot identification information matches a dot identification information in the point information group, the dot corresponding to the dot identification information is selected, and the displayed dot information is changed or enhanced according to the server instruction or preset configuration.

8. The method for constructing and displaying a simulated map in an offline scenario as claimed in claim 6, characterized in that: Changing or enhancing the displayed dot information according to server instructions or preset configurations includes: Change the color of the current dot to the specified color, and / or add style animation.

9. The method for constructing and displaying a simulated map in an offline scenario as claimed in claim 1, characterized in that: The display area is a preset display area configured on the web page.

Images