A web-side high-fidelity map editing and parameterized mapping method, system, device and medium

Abstract

The application discloses a kind of Web end high fidelity map editing and parameterized mapping method, system, equipment and medium, it is related to Web end map drawing technical field, when intercepting geographic picture segment in map browsing mode, geographic bounding box and zoom level are recorded simultaneously;Each fragment latitude and longitude is converted into absolute pixel coordinates with fixed geographic origin as reference based on Web Mercator projection;The size of splicing canvas is calculated, and when exceeding the upper limit of preset browser canvas, the uniform zoom level is reduced in logarithmic proportion until the constraint is satisfied;Based on the zoom level that satisfies constraint, calculate the pixel offset of each fragment, and generate static base map by off-screen canvas progressive drawing;Establish the coordinate bidirectional mapping relationship between map browsing mode and vector editing mode;Dynamically generate parameterized planning texture based on texture generator interface.The application realizes multi-fragment pixel-level accurate splicing, large-size stable output, seamless switching of double mode and parameterized real-time generation of planning texture.

Description

Technical Field

[0001] This invention relates to the field of web-based map creation technology, specifically to a web-based high-fidelity map editing and parametric cartography method, system, device, and medium. Background Technology

[0002] In urban and rural planning and design, planners often need to create various planning analysis maps based on real geographic base maps, including land use maps, traffic analysis maps, facility layout maps, height control maps, and urban design structure maps. These maps require satellite imagery or road network maps in real geographic space as the base map, on which vector elements (polygons, polylines, labels, etc.) are overlaid, and different land use types or analysis elements are expressed using standardized planning textures (diagonal fills, intersecting grids, scattered points, squares, etc.). Finally, high-resolution images are exported for presentation. The traditional production process involves planners taking screenshots from map platforms such as Google Maps, Baidu Maps, and Tianditu, pasting them into Photoshop or Illustrator, and then manually drawing various fill patterns, label symbols, and analysis lines on the screenshots.

[0003] In web-based solutions that combine map browsing and vector editing, a common approach is to overlay a map container (such as a map div rendered by Mapbox GL JS) and a vector canvas (such as a canvas element from Fabric.js) at the DOM level. This involves two HTML elements of the same size overlapping each other using absolute positioning, with the map on the bottom and the canvas on top. This solution can display both the map and vector features simultaneously, but the two rendering engines maintain independent coordinate systems and view states. Specifically, the map uses the Web Mercator projection coordinate system (or WGS84 latitude and longitude), with Mapbox GL JS internally managing the center point, scaling, and rotation; the canvas uses the screen pixel coordinate system, with Fabric.js managing the transformation matrix. If there is a lack of precise mathematical mapping between the two coordinate systems, vector features on the canvas may not synchronously adapt to changes in map scaling or rotation; vector objects drawn on the canvas may have difficulty obtaining their corresponding geographic coordinates, making spatial measurements (area, length) inconvenient; and inconsistent view states may occur when switching between the two modes.

[0004] In the field of vector graphics editing, open-source libraries such as Fabric.js, Paper.js, and Konva.js provide drawing, editing, and interactive capabilities for Canvas 2D vector graphics, supporting the creation and property modification of objects such as polygons, polylines, and text. These libraries work on independent Canvas elements, whose coordinate system is the canvas's own pixel coordinate system. Existing vector graphics libraries provide basic solid color fill functionality, but professional textures used in planning and analysis maps (45-degree diagonal lines represent residential land, intersecting grids represent commercial land, scattered dots represent green space, squares represent industrial land, waves represent water systems, and boundary gradients represent buffer zones, etc.) require designers to manually draw or import bitmaps for filling, making it difficult to adjust in real time using parameters (color, line width, spacing, angle). Furthermore, when viewing the canvas at different zoom levels, textures with fixed pixel spacing may exhibit changes in visual density (the texture becomes sparser when zoomed in and denser when zoomed out) and moiré patterns during the zooming process.

[0005] In the field of screenshot stitching, the "long screenshot" or "scrolling screenshot" functions provided by various screenshot software typically employ image feature matching methods (such as SIFT and ORB feature points) to calculate the stitching position by identifying overlapping feature points in adjacent screenshots. These methods are geared towards general scenarios and are unaware of geographic coordinate information. If the "screenshot + image stitching" approach is adopted, technical difficulties arise in map scenarios: First, map viewports are overlaid with UI elements such as scale bars, logos, copyright labels, and zoom controls. These elements are located at fixed pixel positions on the screen, not fixed geographic locations. The positions of these UI elements relative to geographic content differ between different screenshots, potentially interfering with image feature-based matching algorithms (road grid regularity and high texture repetition also reduce the accuracy of feature point matching); second, tile loading exhibits temporal differences, meaning that images captured at different times may have inconsistent loading states at tile boundaries.

[0006] In the field of professional cartography, desktop software such as Adobe Illustrator, ArcGIS, and QGIS provide the ability to import base maps and edit vector graphics. Among them, ArcGIS / QGIS has a complete GIS coordinate system, but its system is large, requires professional training, and is based on desktop technology stacks; Adobe Illustrator does not have geographic coordinate references, and map base maps need to be manually imported and aligned.

[0007] In summary, existing technologies have the following objective drawbacks: the tile coordinates of real-time viewport rendering are screen-relative coordinates, which are difficult to use directly for multi-segment stitching; screen space stitching is subject to interference from UI elements, making it difficult to achieve pixel-level precise alignment; simple DOM overlay makes it difficult to achieve coordinate-level linkage between the map and the vector canvas; the creation of large-size static canvases is constrained by the browser's memory limit; and general-purpose vector editing tools lack parametric texture capabilities for planning professionals. Summary of the Invention

[0008] Based on the problems mentioned above, the purpose of this invention is to provide a method, system, device, and medium for high-fidelity map editing and parametric cartography on the web, which solves the problems in the prior art where the tile coordinates of real-time viewport rendering are screen-relative coordinates, making it difficult to directly use for multi-segment stitching; screen space stitching is subject to interference from UI elements, making it difficult to achieve pixel-level precise alignment; simple DOM overlay makes it difficult to achieve coordinate-level linkage between the map and the vector canvas; the creation of large-size static canvases is constrained by the browser's memory limit; and general vector editing tools lack parametric texture capabilities for planning professionals.

[0009] This invention is achieved through the following technical solution: The first aspect of this invention provides a method for high-fidelity map editing and parametric cartography on a web platform, comprising the following steps: In map browsing mode, respond to the segment capture operation to obtain map segment images, and simultaneously record their geographic bounding boxes and zoom levels; A uniform scaling level is determined based on the geographic bounding boxes of all segments, and the latitude and longitude of each segment are converted into absolute pixel coordinates with reference to a fixed geographic origin through Web Mercator projection. The size of the spliced ​​canvas is calculated based on the absolute pixel coordinates. When the size of the spliced ​​canvas exceeds the preset browser canvas limit, the uniform scaling level is reduced by logarithmic ratio and recalculated until the upper limit constraint is met. Based on a uniform scaling level that satisfies the upper limit constraint, the pixel offset of each segment in the splicing canvas is calculated, and each segment is progressively drawn to the corresponding position through an off-screen canvas according to the offset to generate a static base image. Establish a bidirectional coordinate mapping relationship between the map browsing mode and the vector editing mode; Switch the map browsing mode to the vector editing mode; Load the static base map into the canvas of the vector editing mode for vector element drawing and editing.

[0010] In the above technical solution, when capturing map fragments in map browsing mode, the geographic bounding box and zoom level are recorded simultaneously; based on Web Mercator projection, the latitude and longitude of each fragment are converted into absolute pixel coordinates with a fixed geographic origin as a reference; the size of the stitched canvas is calculated, and if it exceeds the preset browser canvas limit, the zoom level is reduced logarithmically until the constraint is met. This effectively prevents memory overflow caused by directly manipulating an extremely large canvas; The pixel offset of each segment is calculated based on the scaling level that meets the constraints. A static base map is generated by progressive drawing on an off-screen canvas. By calculating the total bounding box, the total pixel size, and the precise pixel offset of each segment, each segment is finally drawn on the off-screen canvas with precise coordinates. Since the position of all segments is calculated in a unified geographic coordinate system, rather than depending on the screen pixel position at the time of screenshot, the stitching error is controlled within 2 pixels. A two-way coordinate mapping relationship is established between map browsing mode and vector editing mode. A precise two-way mapping relationship between the map coordinate system and the canvas coordinate system is established through the center point latitude and longitude, zoom level, and rotation angle. This ensures that when switching modes, the zoom level, center point position, and rotation angle of the base map are completely synchronized, and the view jump is controlled within 2 pixels. Dynamically generate parameterized planned textures based on the texture generator interface.

[0011] This invention achieves precise pixel-level splicing of multiple segments, stable output of large sizes, seamless switching between dual modes, and parameterized real-time generation of planned textures.

[0012] In one optional embodiment, the geographic bounding box includes the latitude and longitude coordinates of the southwest and northeast corners of the fragment; wherein determining a uniform scaling level based on the geographic bounding boxes of all fragments includes: If all segments have the same scaling level, then use that scaling level directly. If the scaling levels of the segments are different, the maximum value among the scaling levels of each segment is taken as the unified scaling level, and the segments corresponding to the lower scaling levels are pixel scaled during rendering.

[0013] In one optional embodiment, the preset browser canvas upper limit is 16384*16384 pixels; wherein, reducing the uniform scaling level logarithmically and recalculating includes: Calculate the ratio of the maximum value of the width and height of the spliced ​​canvas size to the upper limit; The logarithm of this ratio determines the number of scaling levels that need to be reduced, and the splicing canvas size is recalculated.

[0014] In one optional embodiment, calculating the pixel offset of each segment in the stitched canvas includes: The latitude and longitude of the geographic bounding box boundaries of each segment are converted to metric coordinates using Web Mercator projection; Convert to pixel coordinates based on the pixel conversion ratio corresponding to the unified scaling level; Using the absolute pixel coordinates corresponding to the top left corner of the overall bounding box as a reference, calculate the pixel offset of the top left corner of each segment relative to the reference.

[0015] In one alternative embodiment, progressively drawing each segment to its corresponding position off-screen by the offset includes: Create an off-screen rendering canvas and set its size to the size of the spliced ​​canvas; Interpolate the image smoothly and set the smoothing quality to the highest level; Iterate through each segment and render each segment in a high-quality quantized manner to the corresponding position on the off-screen canvas.

[0016] In one optional embodiment, establishing a bidirectional coordinate mapping relationship between the map browsing mode and the vector editing mode includes: The bidirectional coordinate mapping relationship is maintained based on unified view state parameters, including the latitude and longitude of the view center point, zoom level, and rotation angle. When switching modes, the current view state parameters are accurately transmitted to the target mode, and a viewport transformation matrix is ​​constructed based on the current view state parameters to perform bidirectional conversion between geographic coordinates and canvas pixel coordinates.

[0017] In one optional embodiment, loading the static base map onto a canvas in vector editing mode for vector element drawing and editing includes: In response to the user's adjustment of the texture parameters of the closed vector graphic object, a planning texture pattern of the corresponding type is dynamically generated based on the texture generator interface and encapsulated as a repeatable fillable pattern object and applied to the closed vector graphic object; The actual drawing spacing of the texture pattern is dynamically adjusted according to the scaling ratio of the current canvas.

[0018] A second aspect of the present invention provides a web-based high-fidelity map editing and parametric cartography system, comprising: The multi-fragment bounding box recording module is used to acquire map fragment images in response to fragment capture operations in map browsing mode, and simultaneously record their geographic bounding boxes and zoom levels; The Mercator stitching module is used to determine a uniform scaling level based on the geographic bounding boxes of all segments, convert the latitude and longitude of each segment into absolute pixel coordinates with a fixed geographic origin through Web Mercator projection, and calculate the stitching canvas size based on the absolute pixel coordinates. When the stitching canvas size exceeds the preset browser canvas limit, the uniform scaling level is reduced logarithmically and recalculated until the upper limit constraint is met. Based on the uniform scaling level that meets the upper limit constraint, the pixel offset of each segment in the stitching canvas is calculated, and each segment is progressively drawn to the corresponding position on an off-screen canvas according to the offset to generate a static base map. A bidirectional coordinate mapping module is used to establish a bidirectional coordinate mapping relationship between the map browsing mode and the vector editing mode; A dual-mode switching module is used to switch the map browsing mode to the vector editing mode; The texture generation module is used to load the static base map into the canvas of the vector editing mode for drawing and editing vector elements.

[0019] A third aspect of the present invention provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement a web-based high-fidelity map editing and parametric mapping method.

[0020] The fourth aspect of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements a web-based high-fidelity map editing and parametric mapping method.

[0021] Compared with the prior art, the present invention has the following advantages and beneficial effects: 1. A precise two-way mapping relationship between the map coordinate system and the canvas coordinate system was established by using the center point latitude and longitude, zoom level, and rotation angle; this ensures that the zoom level, center point position, and rotation angle of the base map are completely synchronized when switching modes, and the view jump is controlled within 2 pixels. 2. By calculating the total bounding box, the total pixel size, and the precise pixel offset of each segment, each segment is finally drawn on the off-screen canvas with precise coordinates. Since the position of all segments is calculated in a unified geographic coordinate system, rather than depending on the screen pixel position at the time of screenshot, the stitching error is controlled within 2 pixels. 3. Before splicing, a size protection mechanism is used to determine whether the total pixel size exceeds the 16384 pixel limit. If it does, the scaling level is reduced proportionally and the calculation is recalculated, which effectively prevents memory overflow caused by directly operating on an ultra-large canvas. Attached Figure Description

[0022] To more clearly illustrate the technical solutions of the exemplary embodiments of the present invention, the accompanying drawings used in the embodiments will be briefly described below. It should be understood that the following drawings only show some embodiments of the present invention and should not be considered as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort. In the drawings: Figure 1 This is a schematic diagram of the overall system architecture provided in an embodiment of the present invention; Figure 2 This is a flowchart illustrating a web-based high-fidelity map editing and parametric cartography method provided in an embodiment of the present invention. Figure 3 A schematic diagram of multi-segment geographic bounding box recording provided in an embodiment of the present invention; Figure 4 A schematic diagram of Web Mercator projection coordinate transformation provided in an embodiment of the present invention; Figure 5 This is a schematic diagram illustrating the calculation of the total bounding box and the pixel offset of each segment according to an embodiment of the present invention; Figure 6 This is a schematic diagram illustrating the bidirectional mapping between map browsing mode and vector editing mode provided in an embodiment of the present invention; Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0023] To make the objectives, technical solutions, and advantages of the present invention clearer, the present invention will be further described in detail below with reference to the embodiments and accompanying drawings. The illustrative embodiments and descriptions of the present invention are only used to explain the present invention and are not intended to limit the present invention.

[0024] Example 1 This embodiment is based on Figure 1 This implementation uses the Vue 3 front-end framework, with Mapbox GL JS for map rendering and Fabric.js for vector editing. In map browsing mode, the planner gradually moves the target area into the viewport by panning and zooming. Once the tiles within the viewport have loaded, the planner triggers a fragment capture operation. In response to this operation, the following actions are executed: Figure 2 Method steps: In map browsing mode, the system responds to fragment capture operations to obtain map fragment images and simultaneously records their geographic bounding boxes and zoom levels.

[0025] In map browsing mode, the system responds to fragment capture operations to acquire map fragment images. It reads the current viewport boundary information from the Mapbox GL JS map instance, obtaining the longitude and latitude of the southwest (bottom left) and northeast (top right) corners of the viewport. It also records the current map zoom level. These data, along with the image data, constitute the fragment record for each captured map fragment F. i The data structure of the record is as follows: ; Among them, img i For the image data of this segment, These are the longitude and latitude of the southwest corner of the segment, respectively. These are the longitude and latitude of the northeast corner of the segment, respectively. i The scaling level for cropping.

[0026] It should be noted that existing technologies calculate the screen pixel offset of a tile relative to the viewport center when rendering tiles. The origin of the coordinates is the viewport center or top left corner, and the coordinate values ​​change with viewport translation, belonging to screen relative coordinates. In contrast, the geographical bounding box recorded in this embodiment is based on absolute geographical coordinates of the WGS84 latitude and longitude coordinate system, which does not change with viewport changes, providing a stable spatial reference for subsequent accurate stitching across viewports.

[0027] After acquiring map fragment images, the stitching stage begins. First, a uniform scaling level needs to be determined. In this embodiment, the uniform scaling level is determined based on the geographic bounding boxes of the fragments. Multiple fragment geographic bounding boxes are as follows: Figure 3 As shown, it includes the latitude and longitude coordinates of the southwest and northeast corners of the fragment, and determines a uniform scaling level based on the geographic bounding boxes of all fragments, including: If all segments have the same scaling level, then use that scaling level directly. If the scaling levels of the segments are different, the maximum value among the scaling levels of each segment is taken as the unified scaling level, and the segments corresponding to the lower scaling levels are pixel scaled during rendering.

[0028] Specifically, it iterates through all segment records, checks the scaling level of each segment, and if all segments have the same scaling level, then that level is directly adopted as the unified scaling level. If the scaling levels of the segments are different, then the maximum value is taken. This ensures the highest possible resolution in the stitched result. For segments with lower scaling levels, pixel scaling will be applied accordingly during subsequent rendering based on their actual geographic coverage.

[0029] Before stitching, the latitude and longitude of each segment are converted into absolute pixel coordinates with a fixed geographic origin using Web Mercator projection, such as... Figure 4As shown, the forward calculation formula for the Web Mercator projection (EPSG:3857) is as follows: ; ; Where R is the semi-major axis of the WGS84 ellipsoid, and in this embodiment, R = 6,378,137 meters; λ is longitude; φ is latitude; where longitude and latitude are both in radians.

[0030] At scaling level z, the conversion ratio between Mercator metric coordinates and pixel coordinates is: ; This ratio represents the number of seconds (s) per meter of length at the zoom level (z). z The total pixel size of the entire map at zoom level z is 256.2 pixels. z Pixels per square.

[0031] Furthermore, the inverse formula corresponding to the forward calculation formula is as follows: ; It should be noted that the pixel coordinates used in this embodiment are Mercator absolute pixel coordinates, which use 0 degrees longitude and approximately 85.05 degrees north latitude (the origin of the Web Mercator projection) as a fixed geographic origin. Under a unified zoom level, any geographic location corresponds to a unique pixel coordinate. This is fundamentally different from the screen viewport relative pixel coordinates used in existing technologies (which use the center or top-left corner of the screen viewport as the origin and change with viewport translation). The fixed reference origin of Mercator absolute pixel coordinates allows for the calculation of precise relative positions of segments captured from different viewports within a unified coordinate system. This is the key technological foundation for achieving pixel-level stitching of multiple segments.

[0032] Then, the size of the stitched canvas is calculated based on the absolute pixel coordinates. First, all segments are traversed to obtain the total bounding box of the geographical range of all segments. The total bounding box is calculated as follows: ; ; in, and Used to calculate the westernmost and easternmost longitudes among all segments. and The latitudes used to calculate the southernmost and northernmost latitudes, together forming the smallest rectangular range covering all segments.

[0033] Calculate the splicing canvas size based on the total bounding box, and multiply the absolute pixel coordinates transformed by the Mercator projection formula by the conversion ratio s between Mercator metric coordinates and pixel coordinates at the scaling level z. zConverting to pixel dimensions, the generated splicing canvas size is as follows: ; ; Where tl is the Mercator coordinate of the top left (northwest) corner of the total bounding box, br is the Mercator coordinate of the bottom right (southeast) corner, and W and H are the pixel width and height of the stitched image, respectively.

[0034] The spliced ​​canvas size is compared with the preset browser canvas upper limit. In an optional embodiment, the preset browser canvas upper limit is 16384*16384 pixels; wherein, reducing the uniform scaling level logarithmically and recalculating includes: Calculate the ratio of the maximum value of the width and height of the spliced ​​canvas size to the upper limit; The logarithm of this ratio determines the number of scaling levels that need to be reduced, and the splicing canvas size is recalculated.

[0035] Specifically, if W > 16384 or H > 16384, the scaling level is reduced proportionally, i.e.: ; Among them, z new For the new scaling level.

[0036] The width and height of the spliced ​​canvas size are recalculated based on the new scaling level to ensure that they do not exceed 16384 pixels.

[0037] It should be noted that the upper limit set in this embodiment is based on 16384×16384×4 bytes≈1GB, which is the maximum canvas memory usage stably supported by mainstream browsers. Exceeding this limit will cause the tab to crash.

[0038] Based on a uniform scaling level that satisfies the upper limit constraint, the pixel offset of each segment in the stitched canvas is calculated, as follows: Figure 5 As shown, for each segment F i First, calculate the coordinates of its upper left (northwest) and lower right (southeast) corners in the Mercator projection space, that is, convert the latitude and longitude of the geographic bounding box boundary of each segment to metric coordinates through the Web Mercator projection. ; Then, the pixel position and size of the segment in the total canvas are calculated, that is, converted to pixel coordinates based on the pixel conversion ratio corresponding to the uniform scaling level: ; ; ; ; Among them, (x i , y i (w) represents the pixel coordinates of the top-left corner of the fragment within the overall canvas. i , h i The values ​​are the pixel width and height of the fragment. Rounding is necessary because pixel coordinates must be integers, while Mercator calculations may result in floating-point numbers.

[0039] In one alternative embodiment, progressively drawing each segment to its corresponding position off-screen by the offset includes: Create an off-screen rendering canvas and set its size to the size of the spliced ​​canvas; Interpolate the image smoothly and set the smoothing quality to the highest level; Iterate through each segment and render each segment to its corresponding position on the off-screen canvas in a high-quality quantization manner.

[0040] Specifically, an off-screen rendering canvas is created (preferably an off-screen canvas that supports background thread rendering to avoid blocking the main thread; in environments where this is not supported, it automatically downgrades to a regular canvas). The canvas size is set to W×H, a 2D rendering context is obtained, image smoothing interpolation is enabled, and the smoothing quality is set to the highest level (bicubic interpolation). Then, all fragments are traversed, and the formula (x, y, h) is used to calculate the pixel position and size in the total canvas. i , y i , w i , h i This process renders each fragment in high-quality quantization to a specified location on an off-screen canvas. The final result is a stitched canvas that can be used directly as a base image source.

[0041] It should be noted that, compared to existing technologies, the positions of all segments in this embodiment are calculated using the Mercator projection formula within a unified geographic coordinate system, rather than relying on the screen pixel positions at the time of screenshotting. Therefore, even if there are differences in the position of map UI elements (such as scale bars, logos, and copyright labels) or the timing of tile loading between different segments during capture, they can still be accurately aligned after stitching. High-quality quantization rendering (bicubic interpolation) effectively handles sub-pixel offsets, and the final stitching error is controlled within 2 pixels.

[0042] After stitching, enter vector editing mode. Load the generated static base map image as a background image object on the Fabric.js canvas. Set this image object to be unselectable (selectable = false), not responsive to mouse events (evented = false), always placed at the bottom of the layer, and set its opacity between 0.7 and 0.9 to ensure the clear visibility of the upper vector objects. Planners can use the tools provided by Fabric.js to draw vector elements such as polygons, polylines, and text on this base map to create various planning analysis diagrams.

[0043] After stitching, enter vector editing mode. Load the generated static base map image as a background image object on the Fabric.js canvas. Set this image object to be unselectable, non-responsive to mouse events, always placed at the bottom of the layer, and set its opacity between 0.7 and 0.9 to ensure the clear visibility of the upper vector objects. Planners can use the tools provided by Fabric.js on this base map to draw vector elements such as polygons, polylines, and text to create various planning analysis diagrams.

[0044] Furthermore, another core innovation of this embodiment lies in the map-canvas dual-mode coordinate bidirectional mapping method. In an optional embodiment, a bidirectional coordinate mapping relationship is established between the map browsing mode and the vector editing mode. The coordinate bidirectional mapping relationship is maintained based on a unified view state parameter that includes the latitude and longitude of the view center point, zoom level, and rotation angle. When switching modes, the current view state parameters are accurately transmitted to the target mode, and a viewport transformation matrix is ​​constructed based on the current view state parameters to perform bidirectional conversion between geographic coordinates and canvas pixel coordinates.

[0045] Specifically, such as Figure 6 As shown, in this embodiment, a global view state is maintained. Constructed from the current view state parameters, specifically including the latitude and longitude of the view center point, center(c λ , c φ The three parameters—z (z-axis), scaling level, and rotation angle (b-axis)—establish a precise two-way coordinate mapping between the map container and the vector canvas, thereby achieving a seamless transition when switching modes.

[0046] At the zoom level, the pixel offset of any latitude and longitude P(λ,φ) relative to the center of the view is calculated as follows: ; ; Where, d xUsed to calculate the pixel offset in the east-west direction, d y Used to calculate the pixel offset in the north-south direction. d y The negative sign is because the y-axis of the screen coordinate system points downwards, while the y-axis of the Mercator projection coordinate system points upwards. Since the two directions are opposite, they need to be inverted to maintain the correctness of the coordinate mapping.

[0047] When switching from map mode to vector editing mode, perform the following operations: First, read the current view state of the map, obtain the center point latitude and longitude, zoom level and rotation angle, and obtain the pixel size of the canvas container.

[0048] Then, set the viewport coordinate transformation of the canvas based on the parameters obtained above.

[0049] Furthermore, specifically including: Move the canvas origin to the center of the canvas (W) c / 2, H c / 2); Applying rotation angle b, and proportionally s=s z / s ref (where s) ref (This is the reference scaling level corresponding to the original pixels of the base image at a 1:1 ratio). Using the Mercator coordinates of the center point as the offset, the base image object is fixed at the canvas origin (0,0). Scaling, rotation, and translation transformations are performed through the viewport transformation matrix to ensure that the base image and the vector object are always in the same coordinate reference system.

[0050] Furthermore, the above transformation operation can be expressed using a 3×3 viewport transformation matrix: ; Among them, T center Let R(b) represent the transformation matrix for translation to the center of the canvas, R(b) represent the rotation matrix for rotation angle b, S(s) represent the scaling matrix for scaling factor s, and T represent the scaling matrix for scaling factor s. -center This represents the inverse transformation that moves the image back from the center of the canvas to the origin.

[0051] This composite transformation matrix allows any geographic coordinate to be precisely mapped to a pixel location on the canvas.

[0052] When switching back from vector editing mode to map mode, the system performs the inverse transformation of the above process: calculating the current view state from the viewport transformation matrix of the canvas. Then, the map view is precisely switched to the center point, zoom level, and rotation angle to achieve a seamless two-way transition.

[0053] It should be noted that this embodiment differs fundamentally from the simple DOM overlay solution in existing technologies. Existing solutions overlap the Mapbox GL JS map div and the Fabric.js canvas element using CSS absolute positioning, with each rendering engine maintaining its own independent coordinate system. When the map is scaled or rotated, the vector elements on the canvas cannot synchronously follow the transformation, resulting in a disconnect where the map moves but the graphics remain static. In contrast, this embodiment establishes a precise mathematical mapping relationship between the two coordinate systems by maintaining a unified view state S and a precise three-parameter transfer mechanism. View jumps during mode switching are controlled within 2 pixels, far below the threshold perceptible to the human eye.

[0054] In one optional embodiment, loading the static base map onto a canvas in vector editing mode for vector element drawing and editing includes: In response to the user's adjustment of the texture parameters of the closed vector graphic object, a planning texture pattern of the corresponding type is dynamically generated based on the texture generator interface and encapsulated as a repeatable fillable pattern object and applied to the closed vector graphic object; The actual drawing spacing of the texture pattern is dynamically adjusted according to the scaling ratio of the current canvas.

[0055] Specifically, this method provides a texture generator interface that receives parameters such as texture type, color, line width, spacing, angle, and opacity. It draws basic primitives on a small-sized pattern canvas and then generates a tiling fill style through the canvas's pattern repeat fill mechanism (createPattern). The size S of the pattern canvas is usually taken as an integer multiple of the spacing (e.g., S = 2 × spacing) to ensure periodic continuity during tiling.

[0056] The texture generator interface is a texture generation function that receives a texture type identifier and a set of parameters (including color, line width, spacing, angle, opacity, gradient color, gradient width, etc.) and returns a CanvasPattern object that can be repeatedly filled, which can be directly assigned to the fill property of a vector graphic object.

[0057] Furthermore, the generation algorithms for the seven types of textures are explained below: For solid fill, there is no pattern repetition mechanism; it directly returns a solid color fill, making it the simplest texture type. For a 45° diagonal line (Hatch45), the pattern canvas size is set to S = 2 × spacing. A set of 45° diagonal lines (the angle can be adjusted via parameters) is drawn on the canvas from the top left to the bottom right, with spacing as the interval. Specifically, after rotating the coordinate system by a specified angle, a line segment from (x, -S) to (x + 2S, S) is drawn with a starting x-coordinate of k × spacing (k cycles from -2 to 4). The line width is lineWidth, and the color is color. Any portion exceeding the pattern unit is automatically filled using a tiling mechanism. For Cross, draw a set of -45° diagonal lines (or any two sets of symmetrical angles) on top of the 45° diagonal texture. The two sets of diagonal lines intersect to form a grid effect. For the scattered dots (Dots), the pattern canvas size is set to S = spacing. A solid circle with a radius of R = spacing / 4 is drawn at the center of the canvas (the radius can be adjusted by the parameter), and repeated tiling forms a regular dot matrix; For the grid, set the pattern canvas size to S = spacing. Draw a horizontal line (at the bottom) and a vertical line (at the right), with a line width of lineWidth. Tiling will create a grid effect. For the wave pattern, the pattern canvas size is set to S = T (where T is one complete wave cycle). A Bézier curve is used to fit the sinusoidal waveform. y(t)=Asin(2πt / T), t∈[0,T]; Where A is the amplitude, i.e., spacing / 4, and T is the period, i.e., 2×spacing. The line width is lineWidth, and the color is color. For GradientEdge: Used for gradient transition effects on polygon boundaries (such as gradient color bands in buffer analysis). This texture does not use a pattern repetition mechanism, but is achieved by overlaying multiple strokes on the closed path of the polygon, or by using the gradient fill function of a vector graphics library to set a linear gradient from color to transparent along the polygon normal, with a gradient width of gradientWidth.

[0058] The real-time parameter adjustment mechanism involves re-invoking the texture generation function to generate a new pattern canvas when the user adjusts any parameter via UI controls (color picker, slider, knob, etc.), updating the fill style of the corresponding vector polygon object, and automatically triggering a re-render in the vector editor. Since the pattern canvas size is usually no more than 64 pixels, the drawing overhead is minimal, and the entire response time is controlled within 50 milliseconds, achieving a real-time interactive experience where dragging the slider produces immediate results.

[0059] The scaling adaptive mechanism prevents textures from becoming too dense or too sparse when the canvas is scaled. The texture spacing parameters are dynamically adjusted according to the current canvas scaling ratio. Let s canvas Given the current canvas scaling (obtained in real-time from the canvas view state), the actual applied texture spacing is: ; Its physical meaning is that when the canvas is magnified (s canvas (Increase), and the texture rendering spacing is proportionally reduced, so that the visual density of the texture on the screen remains constant. That is, the texture always appears to be approximately spaced. base The spacing between screen pixels will not cause the texture to become sparse or produce moiré patterns due to the enlargement of vector graphics.

[0060] Example 2 Embodiment 2 of the present invention provides a web-based high-fidelity map editing and parametric cartography system, comprising: The multi-fragment bounding box recording module is used to acquire map fragment images in response to fragment capture operations in map browsing mode, and simultaneously record their geographic bounding boxes and zoom levels; The Mercator stitching module is used to determine a uniform scaling level based on the geographic bounding boxes of all segments, convert the latitude and longitude of each segment into absolute pixel coordinates with a fixed geographic origin through Web Mercator projection, and calculate the stitching canvas size based on the absolute pixel coordinates. When the stitching canvas size exceeds the preset browser canvas limit, the uniform scaling level is reduced logarithmically and recalculated until the upper limit constraint is met. Based on the uniform scaling level that meets the upper limit constraint, the pixel offset of each segment in the stitching canvas is calculated, and each segment is progressively drawn to the corresponding position on an off-screen canvas according to the offset to generate a static base map. A bidirectional coordinate mapping module is used to establish a bidirectional coordinate mapping relationship between the map browsing mode and the vector editing mode; A dual-mode switching module is used to switch the map browsing mode to the vector editing mode; The texture generation module is used to load the static base map into the canvas of the vector editing mode for drawing and editing vector elements.

[0061] Furthermore, this embodiment also includes: The vector object management module is used to manage the creation, attribute editing, and texture filling application of vector objects such as polygons, polylines, and text. The export module is used for high-resolution PNG and SVG vector format export based on off-screen canvas.

[0062] Example 3 Figure 7This is a schematic diagram of the structure of an electronic device provided in Embodiment 3 of the present invention, as shown below. Figure 7 As shown, the electronic device includes a processor 21, a memory 22, an input device 23, and an output device 24; the number of processors 21 in the computer device can be one or more. Figure 7 Taking a processor 21 as an example; the processor 21, memory 22, input device 23, and output device 24 in an electronic device can be connected via a bus or other means. Figure 7 Taking the example of a connection between China and Israel via a bus.

[0063] The memory 22, as a computer-readable storage medium, can be used to store software programs, computer-executable programs, and modules. The processor 21 executes various functional applications and data processing of the electronic device by running the software programs, instructions, and modules stored in the memory 22, thereby implementing the web-based high-fidelity map editing and parametric mapping method of Embodiment 1.

[0064] The memory 22 may primarily include a program storage area and a data storage area. The program storage area may store the operating system and at least one application program required for a given function; the data storage area may store data created based on terminal usage. Furthermore, the memory 22 may include high-speed random access memory and non-volatile memory, such as at least one disk storage device, flash memory, or other non-volatile solid-state storage device. In some instances, the memory 22 may further include memory remotely located relative to the processor 21, which can be connected to the electronic device via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0065] Input device 23 can be used to receive user input such as ID and password. Output device 24 is used to output the network configuration page.

[0066] Example 4 Embodiment 4 of the present invention also provides a computer-readable storage medium, wherein the computer-executable instructions, when executed by a computer processor, are used to implement a web-based high-fidelity map editing and parametric mapping method as provided in Embodiment 1.

[0067] The storage medium containing computer-executable instructions provided in the embodiments of the present invention is not limited to the method operation provided in Embodiment 1, but can also perform related operations of web-based high-fidelity map editing and parametric mapping provided in any embodiment of the present invention.

[0068] The specific embodiments described above further illustrate the purpose, technical solution, and beneficial effects of the present invention. It should be understood that the above description is only a specific embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A web-based high-fidelity map editing and parametric cartography method, characterized in that, Includes the following steps: In map browsing mode, respond to the segment capture operation to obtain map segment images, and simultaneously record their geographic bounding boxes and zoom levels; A uniform scaling level is determined based on the geographic bounding boxes of all segments, and the latitude and longitude of each segment are converted into absolute pixel coordinates with reference to a fixed geographic origin through Web Mercator projection. The size of the spliced ​​canvas is calculated based on the absolute pixel coordinates. When the size of the spliced ​​canvas exceeds the preset browser canvas limit, the uniform scaling level is reduced by logarithmic ratio and recalculated until the upper limit constraint is met. Based on a uniform scaling level that satisfies the upper limit constraint, the pixel offset of each segment in the splicing canvas is calculated, and each segment is progressively drawn to the corresponding position through an off-screen canvas according to the offset to generate a static base image. Establish a bidirectional coordinate mapping relationship between the map browsing mode and the vector editing mode; Switch the map browsing mode to the vector editing mode; Load the static base map into the canvas of the vector editing mode for vector element drawing and editing.

2. The web-based high-fidelity map editing and parametric cartography method according to claim 1, characterized in that, The geographic bounding box includes the latitude and longitude coordinates of the southwest and northeast corners of the fragment; wherein, a uniform scaling level is determined based on the geographic bounding boxes of all fragments, including: If all segments have the same scaling level, then use that scaling level directly. If the scaling levels of the segments are different, the maximum value among the scaling levels of each segment is taken as the unified scaling level, and the segments corresponding to the lower scaling levels are pixel scaled during rendering.

3. A web-based high-fidelity map editing and parametric cartography method according to claim 1 or 2, characterized in that, The preset browser canvas upper limit is 16384*16384 pixels; wherein, reducing the uniform scaling level logarithmically and recalculating includes: Calculate the ratio of the maximum value of the width and height of the spliced ​​canvas size to the upper limit; The logarithm of this ratio determines the number of scaling levels that need to be reduced, and the splicing canvas size is recalculated.

4. The web-based high-fidelity map editing and parametric cartography method according to claim 1, characterized in that, Calculate the pixel offset of each segment in the stitched canvas, including: The latitude and longitude of the geographic bounding box boundaries of each segment are converted to metric coordinates using Web Mercator projection; Convert to pixel coordinates based on the pixel conversion ratio corresponding to the unified scaling level; Using the absolute pixel coordinates corresponding to the top left corner of the overall bounding box as a reference, calculate the pixel offset of the top left corner of each segment relative to the reference.

5. The web-based high-fidelity map editing and parametric cartography method according to claim 4, characterized in that, The fragments are progressively drawn to their corresponding positions off-screen according to the aforementioned offset, including: Create an off-screen rendering canvas and set its size to the size of the spliced ​​canvas; Interpolate the image smoothly and set the smoothing quality to the highest level; Iterate through each segment and render each segment in a high-quality quantized manner to the corresponding position on the off-screen canvas.

6. The web-based high-fidelity map editing and parametric cartography method according to claim 1, characterized in that, Establishing a bidirectional coordinate mapping relationship between the map browsing mode and the vector editing mode includes: The bidirectional coordinate mapping relationship is maintained based on unified view state parameters, including the latitude and longitude of the view center point, zoom level, and rotation angle. When switching modes, the current view state parameters are accurately transmitted to the target mode, and a viewport transformation matrix is ​​constructed based on the current view state parameters to perform bidirectional conversion between geographic coordinates and canvas pixel coordinates.

7. The web-based high-fidelity map editing and parametric cartography method according to claim 1, characterized in that, Load the static base map into the canvas of vector editing mode for vector element drawing and editing, including: In response to the user's adjustment of the texture parameters of the closed vector graphic object, a planning texture pattern of the corresponding type is dynamically generated based on the texture generator interface and encapsulated as a repeatable fillable pattern object and applied to the closed vector graphic object; The actual drawing spacing of the texture pattern is dynamically adjusted according to the scaling ratio of the current canvas.

8. A web-based high-fidelity map editing and parametric cartography system, used to implement a web-based high-fidelity map editing and parametric cartography method as described in any one of claims 1 to 7, characterized in that, include: The multi-fragment bounding box recording module is used to acquire map fragment images in response to fragment capture operations in map browsing mode, and simultaneously record their geographic bounding boxes and zoom levels; The Mercator stitching module is used to determine a uniform scaling level based on the geographic bounding boxes of all segments, convert the latitude and longitude of each segment into absolute pixel coordinates with a fixed geographic origin through Web Mercator projection, and calculate the stitching canvas size based on the absolute pixel coordinates. When the stitching canvas size exceeds the preset browser canvas limit, the uniform scaling level is reduced logarithmically and recalculated until the upper limit constraint is met. Based on the uniform scaling level that meets the upper limit constraint, the pixel offset of each segment in the stitching canvas is calculated, and each segment is progressively drawn to the corresponding position on an off-screen canvas according to the offset to generate a static base map. A bidirectional coordinate mapping module is used to establish a bidirectional coordinate mapping relationship between the map browsing mode and the vector editing mode; A dual-mode switching module is used to switch the map browsing mode to the vector editing mode; The texture generation module is used to load the static base map into the canvas of the vector editing mode for drawing and editing vector elements.

9. An electronic device, characterized in that, The method includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the Web-based high-fidelity map editing and parametric mapping method according to any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by a processor, the computer program implements a web-based high-fidelity map editing and parametric cartography method as described in any one of claims 1 to 7.

Images