CN115577203A - Method, device and application for rendering geoJson map boundary data based on leaf let map - Google Patents

Method, device and application for rendering geoJson map boundary data based on leaf let map Download PDF

Info

Publication number
CN115577203A
CN115577203A CN202211399415.1A CN202211399415A CN115577203A CN 115577203 A CN115577203 A CN 115577203A CN 202211399415 A CN202211399415 A CN 202211399415A CN 115577203 A CN115577203 A CN 115577203A
Authority
CN
China
Prior art keywords
map
geojson
page
component
boundary data
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211399415.1A
Other languages
Chinese (zh)
Inventor
黄练纲
张帅
张翔宇
尹福佺
盛小娟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
CCI China Co Ltd
Original Assignee
CCI China Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by CCI China Co Ltd filed Critical CCI China Co Ltd
Priority to CN202211399415.1A priority Critical patent/CN115577203A/en
Publication of CN115577203A publication Critical patent/CN115577203A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/29—Geographical information databases
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/001—Texturing; Colouring; Generation of texture or colour

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • Remote Sensing (AREA)
  • Instructional Devices (AREA)

Abstract

The invention provides a method, a device and an application for rendering geoJson map boundary data based on a leaf let map, wherein the method comprises the following steps: introducing a map component page in the main function page and registering a vue component, and loading a map basic form in the map component page through a leaf; sending a geoJson data request and acquiring corresponding geoJson data; the method comprises the steps of calling an addGeo method of a map component page through a ref attribute of a vue component, loading geoJson boundary data in geoJson data by using an L.geoJson method of a leaf let, and storing the geoJson boundary data into a set global variable allLayergeo or a global variable layerGeo by using an L.layerGroup method; the method for calling the map component page through the ref attribute of the vue component is used for traversing and configuring at least one function of displaying, hiding or clearing a global variable allLayerGeo or a global variable layerGeo, and the method displays or hides the geoJson boundary data in a boundary layer mode, so that the problem that a browser is rushed due to repeated rendering when a map is changed is solved.

Description

Method and device for rendering geoJson map boundary data based on leaf let map and application
Technical Field
The present application relates to the field of map rendering, and in particular, to a method, an apparatus, and an application for rendering geoJson map boundary data based on a leaflet map.
Background
Besides the online map materials, the map data in a shape of shape, a json and a spatial data format of an sp packet are well supported, and common geographic information visualization graphic elements such as point marks, lines and polygons are covered in a layer function, so that the map data has wide application in a map rendering scene.
GeoJSON is a format for encoding various geographic data structures, and is a geospatial information data exchange format which can represent geometry, characteristics or characteristic sets based on Javascript object representation. At present, when a leaf let loads boundary information of geoJson geographic data, if boundaries of cities, streets and the like are switched back and forth and each boundary data is huge, the leaf let needs to redraw the boundary every time the leaf let loads the boundary, which causes heavy burden on a browser, and easily causes the browser to run or the memory of the browser to overflow, and the situation of boundary data change during map switching often occurs, so that a scheme for running the browser caused by the change of the boundary data of the map which can occur when the leaf let renders the map is urgently needed.
Disclosure of Invention
The embodiment of the application provides a method, a device and an application for rendering geoJson map boundary data based on a leaf let map, the hiding and the displaying of the geoJson data with large data volume are realized by means of an L.layerGroup method of the leaf let map, the map boundary does not need to be re-rendered every time when the map is switched, and the problems of browser page collapse and memory overflow are avoided.
In a first aspect, an embodiment of the present application provides a method for rendering geoJson map boundary data based on a leaflet map, including the following steps:
introducing a map component page in a main function page and registering a vue component, wherein the map component page loads a map basic form through a leaf let;
sending a geoJson data request and acquiring corresponding geoJson data;
the method comprises the steps of calling an addGeo method of a map component page through a ref attribute of a vue component, loading geoJson boundary data in geoJson data by using an L.geoJson method of a leaf, calling a use parameter of the addGeo method of the map component page through a ref attribute in a main function page, judging the geoJson boundary data based on the use parameter, and storing the geoJson boundary data into a set global variable allLayergeo or a global variable layerGeo by using an L.layerGroup method;
and traversing the configuration display, hiding or clearing function of the global variable allLayerGeo or the global variable LayerGeo by using the method of calling the map component page through the ref attribute of the vue component.
In a second aspect, an embodiment of the present application provides an apparatus for rendering geoJson map boundary data based on a leaflet map, including:
the map component page is loaded with the map basic form through the leaf let;
the method comprises a main function page, a map component page is introduced into the main function page, a vue component is registered, a geoJson data request is sent, corresponding geoJson data are obtained, an addGeo method of the map component page is called through a ref attribute of the vue component, geoJson boundary data in the geoJson data are loaded through an L.geoJson method of a leaf, the geoJson boundary data are stored into a set global variable allLayerGeo or a global variable layerGeo through an L.layerGroup method, and at least one function of displaying, hiding or clearing the global variable allLayerGeo or the global variable layerGeo is configured in a traversing mode through a ref attribute of the vue component and a map component page.
In a third aspect, an embodiment of the present application provides an electronic apparatus, including a memory and a processor, where the memory stores a computer program, and the processor is configured to execute the computer program to perform the method for rendering geoJson map boundary data based on a leaflet map.
In a fourth aspect, embodiments of the present application provide a readable storage medium having stored thereon a computer program comprising program code for controlling a process to execute a process, the process comprising a method of rendering geoJson map boundary data according to the leaflet-based map.
The main contributions and innovation points of the invention are as follows:
the embodiment of the application provides a scheme for solving the problem that the browser page is rushed due to the fact that the geoJson boundary data need to be re-rendered during the current map switching, achieving the effects of quickly loading the geoJson boundary data, preventing the boundary information from being re-drawn after each loading, and reducing the memory and preventing the browser from crashing. According to the scheme, parameters are transmitted in an addGeo method of a map component page to set whether the content of the scheme is adopted or not, if the content of the scheme is adopted, the geoJson boundary data of the map is stored in an allLayergeo, the display and the hiding of the boundary layer are achieved by using a hiddenLayer method or a showLayer method, the geoJson boundary data do not need to be re-rendered every time, and the pressure of a browser is reduced.
The details of one or more embodiments of the application are set forth in the accompanying drawings and the description below to provide a more concise and understandable description of the application, and features, objects, and advantages of the application.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:
fig. 1 is a block diagram of an application system framework of a method for rendering geoJson map boundary data based on a leaflet map according to an embodiment of the present application;
FIG. 2 is a flow diagram of a method for rendering geoJson map boundary data based on a leaflet map according to one embodiment of the present application;
fig. 3 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present application.
Detailed Description
Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with one or more embodiments of the present specification. Rather, they are merely examples of apparatus and methods consistent with certain aspects of one or more embodiments of the specification, as detailed in the claims which follow.
It should be noted that: in other embodiments, the steps of the corresponding methods are not necessarily performed in the order shown and described in this specification. In some other embodiments, the method may include more or fewer steps than those described herein. Moreover, a single step described in this specification may be broken down into multiple steps for description in other embodiments; multiple steps described in this specification may be combined into a single step in other embodiments.
Example one
The method can be used for solving the problem that the browser page is rushed due to the fact that the geoJson boundary data need to be re-rendered during the existing map switching, achieves the effects of fast loading of the geoJson boundary data, prevents the boundary information from being re-drawn after each loading, and reduces the effect that the memory prevents the browser from being crashed.
Specifically, the method for rendering the geoJson map boundary data based on the leaflet map comprises the following steps:
introducing a map component page in a main function page and registering a vue component, wherein the map component page loads a map basic form through a leaf let;
sending a geoJson data request and acquiring corresponding geoJson data;
the method comprises the steps of calling an addGeo method of a map component page through a ref attribute of a vue component, loading geoJson boundary data in geoJson data by using an L.geoJson method of a leaf, calling a use parameter of the addGeo method of the map component page through a ref attribute in a main function page, judging the geoJson boundary data based on the use parameter, and storing the geoJson boundary data into a set global variable allLayergeo or a global variable layerGeo by using an L.layerGroup method;
and traversing the configuration display, hiding or clearing function of the global variable allLayerGeo or the global variable LayerGeo by using the method of calling the map component page through the ref attribute of the vue component.
As shown in fig. 1, the method for rendering geoJson map boundary data based on a LEAFLET map provided by the present solution is loaded in a browser for use, an application scenario of the method for rendering geoJson map boundary data based on a LEAFLET map includes a browser, a server, and a WEB page placed on the browser, a main function page loaded in the WEB page and introduced with a map component page, wherein a LEAFLET map and various implementation methods are configured in the map component page, and the main function obtains the geoJson data returned by the server and then implements the rendering of the geoJson data by using the map component page.
In some embodiments, in the "introduce map component page and register vue component at main function page" step, the map function of the configured map component page is introduced through an import method, and the corresponding vue component is registered through components.
Specifically, the map component page is introduced in the main function page through an import Lmap from '@/components/base2 DMap/src/leafetmap. Vue' and is registered for use in the components, and is used in < template > through < Lmap ref = 'Lmap'.
The geoJson data of different maps are preset in the server, and when a user selects a corresponding map, the corresponding geoJson data can be obtained. In some embodiments, the different maps of the present scheme are different administrative division maps of china, and the application scenario of the present scheme is as follows: the user selects or switches different administrative division maps in the browser, although the scheme is not limited to this scenario.
In the step of sending the geoJson data request, a map selection instruction of a user is obtained, and the geoJson data request of the corresponding map is sent based on the map selection instruction. In the embodiment of the scheme, the main function page sends a geoJson data request to the server to acquire corresponding geoJson data.
In some embodiments, a switching component for a user to select a map is configured in the main function page, at least one map name is loaded in the switching component, a changeSelect method is added to selected data, the changeSelect method is placed in a mount module of the VUE component, and then the user forms a corresponding geoJson data request each time the user selects a corresponding map on a browser page.
Preferably, the method and the device achieve a pull-down effect on the switching component, so that a user can select the corresponding map on the page in a pull-down selection mode.
Illustratively, a user selects 'Zhejiang' on a browser page corresponding to a Chinese map through a switching component, and then the 'Zhejiang' is used as selected data and is put into a methods module of a VUE component by using a changeSelect method to form a geoJson data request so as to request to display a map of the 'Zhejiang'; and the 'Hangzhou' state can be switched to be selected data, and the same method of changeSelect is put into a methods module of the VUE component to form a geoJson data request so as to request to display the 'Hangzhou' map.
It is worth mentioning that the scheme sends the geoJson data request by using an AJAX asynchronous mode, request parameters in the geoJson data request are parameters defined by initialization or parameters corresponding to the map selection instruction, and the geoJson data are acquired through a call interface by using the AJAX asynchronous mode. Of course, AJAX is just one technical means of sending a data request and not a hard requirement.
In the step of acquiring corresponding geoJson data, the geoJson data returned by the server is stored in a global variable geoArray.
In the step of 'calling an addGeo method of a map component page through a ref attribute of a vue component', calling an addGeo method of the map component page and introducing a use parameter configured by a main function page, executing the addGeo method and storing geoJson boundary data into a set global variable allLayerGeo or layerGeo by using an L.layerGroup method based on the use parameter.
According to the scheme, the use parameters are used for distinguishing the positions where the geoJson boundary data are stored through true or false, and then the hidden display and the directly removed geoJson are distinguished and separated, so that subsequent distinguishing operation is facilitated. It is worth mentioning that for geoJson data with a large data size, the project parameter can be transmitted to the geoJson data so that the geoJson data can use the hiding and displaying functions provided by the solution.
Specifically, in "call addGeo method of map component page and transfer into use parameter of main function page configuration", define addGeo method in the map component page, add getgeo method in methods of vue component of main function page, configure use parameter of the addGeo method and execute the addGeo method in setGeo method, setGeo method calls the addGeo method and transfers into use parameter. And then loading geoJson boundary data in the geoJson data by using an L.geojson method of a leaf in a map component page, if the use parameter in the addGeo method is true, storing the geoJson boundary data in a set global variable allLayerGeo by using an L.layerGroup method, and if the use parameter of the addGeo method is false, storing the geoJson boundary data in the set global variable layerGeo by using the L.layerGroup method.
According to the scheme, a setGeo method is added in a mount module of a vue component of the main function page, and the setGeo method executes this. $ refs.Lmap.addAllGeo (geoArray, true, true) or this. $ refs.Lmap.addAllGeo (geoArray, false, true) so that the ref attribute of the Lmap component in the template module acquires the addGeo method in the map component page, the use parameter in the addGeo is configured, and the use parameter is transferred to the addGeo method.
In the setGeo method, this. $ refs.Lmap.addgeo is a VUE ref syntax, geoArray is geoJson data returned by a server, the function of a second parameter true or false is to set the method proposed by the scheme, and false is to directly clear geoJson boundary data without using; the third parameter true is geoJson data of the selected map, and false is an initialized parameter. The mount module is also a VUE syntax and in some embodiments is used to actively load geoJson boundary data for the first time.
An addGeo method of the map component page executes a boundary drawing function, acquires a use parameter transmitted in a setGeo method, and in some embodiments, an execution code of the addGeo method is as follows;
Figure BDA0003934900560000071
Figure BDA0003934900560000081
geoJson in the addGeo method corresponds to geoJson data in the setGeo method, and the geoJson data is used for defining the boundary of the area needing to be rendered; the isAllGeo corresponds to a second parameter (true or false) in the setGeo method, and is used for defining whether the method provided by the scheme is adopted; the isSelcetData corresponds to the third parameter in the setGeo method, which is used to distinguish whether the data is the first load or the selected specific given geoJson boundary data.
The if statement is that if isAllGeo is a tune and is the first load, then the geoJson syntax is used to render geoJson boundary data and the result of l.layergroup ([ allLayerGeo ]) is stored into the global variable of allLayerGeo;
the else if statement is that if isAllGeo is the future and is the selected map, then this.
The else statement is that if the isalgeo is false, map boundary data is rendered by using this.
The configuration is traversed to at least one function of displaying, hiding or clearing the global variable allLayerGeo or the global variable layerGeo in a method of calling the map component page through the ref attribute of the vue component. In the step, a display or hiding function is executed on geoJson boundary data in the global variable allLayerGeo, and a clearing function is executed on the geoJson boundary data in the global variable layerGeo.
A showLayer method is defined in a map component page, and the display function of geoJson boundary data in a global variable allLayerGeo is realized by using an eachLayer function of a leaf in the showLayer method. Specifically, the showLayer method provided by the scheme traverses a global variable allLayerGeo, sets the geoJson boundary data into a set display style in a setStyle mode in a leaflet, and further can display the data in the allLayerGeo without re-map rendering. In some embodiments, the display style is options: 0.3, fillOpacity:0.3. And if the showLayer method is called through the ref property of the vue component to configure the display function. The method is specifically operative to display geoJson boundary data that has been hidden.
According to the scheme, a hiddenLayer method is defined in a map component page, and the hiddenLayer method is used for realizing the hiding function of geoJson boundary data in a global variable allLayerGeo by using the eachLayer function of a leaf. Specifically, the hiddenLayer method provided by the scheme traverses a global variable allLayerGeo, sets geoJson boundary data into a hidden type in a setStyle mode in a leaflet, can further hide the data in the allLayerGeo instead of clearing boundary information, and facilitates direct display when the showLayer method is called. In some embodiments, the hidden styles are options: 0, fillovisity: 0.
And if the hiddenLayer method is called through the ref attribute of the vue component for hidden function configuration, calling the hiddenLayer method for execution. The method specifically functions to hide the geoJson boundary data that has been revealed.
It should be noted that the display style and the hidden style of the present solution are set as the styles of the border layers, and the setStyle function is used to set the transparency of the border layers through a customized showslayer method, that is, the accessibility attribute is set to 1, which means complete display, and the accessibility is set to 0 through a customized hiddenlayer method, which means complete hiding. In this way, redrawing of data boundaries is avoided, and boundary data is exposed through hidden display of layers.
According to the map component page, a clearLayer method is defined, a global variable layerGeo is traversed by the clearLayer method, and corresponding geoJson boundary data of each item of geoJson boundary data are removed through a removeLayer function in a leaf. The method is only applicable to geoJson boundary data which is passed from the main function page and whose transfer parameter is false and which is in the global variable layerGeo.
Specifically, the method is used for switching and selecting the map to be displayed on the browser page, the main function page requests the server to obtain the geoJson data of the map based on the selection instruction, the addGeo method of the map component page is called to obtain the geoJson boundary data, the geoJson boundary data with large data volume is stored into the global variable allLayerGeo in a mode of configuring transmission parameters, and the showLayer method or hiddenLayer method on the map component page is used for quickly hiding and displaying the boundary data. According to the scheme, the boundary data are placed on the boundary layer, the layer is hidden or displayed on the boundary layer, re-rendering is not needed to be performed on the geoJson data with the boundary data removed or added, and therefore the problem of browser crash caused by repeated rendering of the geoJson data can be shown.
Example two
Based on the same concept, the application also provides a device for rendering the geoJson map boundary data based on the leaflet map, which comprises the following steps:
the map component page is loaded with a map basic form through a leaf portlet;
the method comprises the steps of a main function page, introducing a map component page into the main function page, registering a vue component, sending a geoJson data request, obtaining corresponding geoJson data, calling an addGeo method of the map component page through a ref attribute of the vue component, loading geoJson boundary data in the geoJson data by using an L.geoJson method of a LEAFlet, calling a use parameter of the addGeo method of the map component page through the ref attribute in the main function page, judging the geoJson boundary data based on the use parameter, storing the geoJson boundary data into a set global variable allLayerGeo or global variable layerGeo by using an L.layerGroup method, and traversing and configuring at least one function of display, hiding or clearing for the global variable allLayerGeo or the global variable layerGeo by using the ref attribute of the vue component and calling the map component page.
EXAMPLE III
The present embodiment further provides an electronic apparatus, referring to fig. 3, comprising a memory 404 and a processor 402, wherein the memory 404 stores a computer program, and the processor 402 is configured to execute the computer program to perform the steps in any of the above method embodiments for rendering geoJson map boundary data based on a leaflet map.
Specifically, the processor 402 may include a Central Processing Unit (CPU), or A Specific Integrated Circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application.
Memory 404 may include, among other things, mass storage 404 for data or instructions. By way of example, and not limitation, the memory 404 may include a hard disk drive (hard disk drive, abbreviated HDD), a floppy disk drive, a solid state drive (solid state drive, abbreviated SSD), flash memory, an optical disk, a magneto-optical disk, tape, or a Universal Serial Bus (USB) drive or a combination of two or more of these. Memory 404 may include removable or non-removable (or fixed) media, where appropriate. The memory 404 may be internal or external to the data processing apparatus, where appropriate. In a particular embodiment, the memory 404 is a Non-Volatile (Non-Volatile) memory. In particular embodiments, memory 404 includes Read-only memory (ROM) and Random Access Memory (RAM). The ROM may be mask-programmed ROM, programmable ROM (PROM), erasable PROM (EPROM), electrically Erasable PROM (EEPROM), electrically erasable ROM (EEPROM), electrically Alterable ROM (EAROM), or FLASH memory (FLASH), or a combination of two or more of these, where appropriate. The RAM may be a static random-access memory (SRAM) or a dynamic random-access memory (DRAM), where the DRAM may be a fast page mode dynamic random-access memory 404 (FPMDRAM), an extended data output dynamic random-access memory (EDODRAM), a synchronous dynamic random-access memory (SDRAM), or the like.
Memory 404 may be used to store or cache various data files needed for processing and/or communication purposes, as well as possibly computer program instructions executed by processor 402.
The processor 402 may be configured to implement any of the above-described embodiments of a method for rendering geoJson map boundary data based on a leaflet map by reading and executing computer program instructions stored in the memory 404.
Optionally, the electronic apparatus may further include a transmission device 406 and an input/output device 408, where the transmission device 406 is connected to the processor 402, and the input/output device 408 is connected to the processor 402.
The transmitting device 406 may be used to receive or transmit data via a network. Specific examples of the network described above may include wired or wireless networks provided by communication providers of the electronic devices. In one example, the transmission device includes a Network adapter (NIC) that can be connected to other Network devices through a base station to communicate with the internet. In one example, the transmitting device 406 may be a Radio Frequency (RF) module, which is used to communicate with the internet in a wireless manner.
The input and output devices 408 are used to input or output information. In the present embodiment, the input information may be a switched map or the like, and the output information may be a displayed map or the like.
Alternatively, in this embodiment, the processor 402 may be configured to execute the following steps by a computer program:
introducing a map component page in a main function page and registering a vue component, wherein the map component page loads a map basic form through a leaf let;
sending a geoJson data request and acquiring corresponding geoJson data;
the method comprises the steps of calling an addGeo method of a map component page through a ref attribute of a vue component, loading geoJson boundary data in geoJson data by using an L.geoJson method of a leaf, calling a use parameter of the addGeo method of the map component page through a ref attribute in a main function page, judging the geoJson boundary data based on the use parameter, and storing the geoJson boundary data into a set global variable allLayergeo or a global variable layerGeo by using an L.layerGroup method;
and traversing the global variable allLayerGeo or the global variable layerGeo by a method of calling the map component page through the ref attribute of the vue component to configure at least one function of displaying, hiding or clearing.
It should be noted that, for specific examples in this embodiment, reference may be made to examples described in the foregoing embodiments and optional implementations, and details of this embodiment are not described herein again.
In general, the various embodiments may be implemented in hardware or special purpose circuits, software, logic or any combination thereof. Some aspects of the invention may be implemented in hardware, while other aspects may be implemented in firmware or software which may be executed by a controller, microprocessor or other computing device, although the invention is not limited thereto. While various aspects of the invention may be illustrated and described as block diagrams, flow charts, or using some other pictorial representation, it is well understood that these blocks, apparatus, systems, techniques or methods described herein may be implemented in, as non-limiting examples, hardware, software, firmware, special purpose circuits or logic, general purpose hardware or controller or other computing devices, or some combination thereof.
Embodiments of the invention may be implemented by computer software executable by a data processor of the mobile device, such as in a processor entity, or by hardware, or by a combination of software and hardware. Computer software or programs (also called program products) including software routines, applets and/or macros can be stored in any device-readable data storage medium and they include program instructions for performing particular tasks. The computer program product may include one or more computer-executable components configured to perform embodiments when the program is run. The one or more computer-executable components may be at least one software code or a portion thereof. Further in this regard it should be noted that any block of the logic flow as in the figures may represent a program step, or an interconnected logic circuit, block and function, or a combination of a program step and a logic circuit, block and function. The software may be stored on physical media such as memory chips or memory blocks implemented within the processor, magnetic media such as hard or floppy disks, and optical media such as, for example, DVDs and data variants thereof, CDs. The physical medium is a non-transitory medium.
It should be understood by those skilled in the art that various features of the above embodiments can be combined arbitrarily, and for the sake of brevity, all possible combinations of the features in the above embodiments are not described, but should be considered as within the scope of the present disclosure as long as there is no contradiction between the combinations of the features.
The above examples are merely illustrative of several embodiments of the present application, and the description is more specific and detailed, but not to be construed as limiting the scope of the present application. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, and these are all within the scope of protection of the present application. Therefore, the protection scope of the present application should be subject to the appended claims.

Claims (11)

1. A method for rendering geoJson map boundary data based on a leaflet map, the method comprising the steps of:
introducing a map component page in a main function page and registering a vue component, wherein the map component page loads a map basic form through a leaf;
sending a geoJson data request and acquiring corresponding geoJson data;
the method comprises the steps of calling an addGeo method of a map component page through a ref attribute of a vue component, loading geoJson boundary data in geoJson data by using an L.geoJson method of a leaf, calling a use parameter of the addGeo method of the map component page through a ref attribute in a main function page, judging the geoJson boundary data based on the use parameter, and storing the geoJson boundary data into a set global variable allLayergeo or a global variable layerGeo by using an L.layerGroup method;
and traversing the configuration display, hiding or clearing function of the global variable allLayerGeo or the global variable LayerGeo by using the method of calling the map component page through the ref attribute of the vue component.
2. The method for rendering geoJson map boundary data based on a leaf-let map as claimed in claim 1, wherein a switching component for a user to select a map is configured in the main function page, at least one map name is loaded in the switching component, a changeSelect method is added to the selected data, and the changeSelect method is put in a methods module of the VUE component.
3. The method of rendering geoJson map boundary data based on a leaf map according to claim 1, wherein in the step of calling the use parameter of the addGeo method of the map component page through the ref attribute in the main function page, the use parameter of the addGeo method of the map component page is called using the ref attribute of the main function page.
4. The method for rendering geoJson map boundary data based on a LEAFLET map as claimed in claim 3, wherein in "invoking an addGeo method of a map component page and passing in a usage parameter of a main function page configuration", the map component page defines an addGeo method, a setGeo method is added to methods of a vue component of the main function page, the usage parameter of the addGeo method is configured within the setGeo method and the addGeo method is executed, and the setGeo method invokes the addGeo method and passes in the usage parameter.
5. The method for rendering geoJson map boundary data based on a LEAFLET map as claimed in claim 1, wherein in the step of traversing the global variable allLayerGeo or the global variable layerGeo by the method of calling the map component page through the ref attribute of the vue component to configure at least one of display, hide or clear, the display or hide function is performed on the geoJson boundary data in the global variable allLayerGeo, and the clear function is performed on the geoJson boundary data in the global variable layerGeo.
6. The method for rendering geoJson map boundary data based on a leaf map as claimed in claim 1, wherein a showLayer method is defined in a map component page, the showLayer method traverses a global variable allLayerGeo, the geoJson boundary data is set as a set display style in the leaf in a setStyle manner, and if the showLayer method is called by a ref attribute of a vue component to configure a display function.
7. The method for rendering geoJson map boundary data based on a leaf map as claimed in claim 1, wherein a hiddenLayer method is defined in a map component page, the hiddenLayer method traverses a global variable allLayerGeo, and if the hiddenLayer method is called by a ref attribute of a vue component to perform hidden function configuration.
8. The method for rendering geoJson map boundary data based on a LEAFLET map as claimed in claim 1, wherein a clearLayer method is defined in a map component page, a global variable layerGeo is traversed by the clearLayer method, and for each item of geoJson boundary data, the corresponding geoJson boundary data is removed by a removeLayer function in the LEAFLET.
9. An apparatus for rendering geoJson map boundary data based on a leaflet map, comprising:
the map component page is loaded with a map basic form through a leaf portlet;
the method comprises a main function page, a map component page is introduced into the main function page, a vue component is registered, a geoJson data request is sent, corresponding geoJson data are obtained, an addGeo method of the map component page is called through a ref attribute of the vue component, geoJson boundary data in the geoJson data are loaded through an L.geoJson method of a LEAFLET, use parameters of the addGeo method of the map component page are called through the ref attribute in the main function page, the geoJson boundary data are judged based on the use parameters, the geoJson boundary data are stored into a set global variable allLayerGeo or a global variable layrGeo through an L.layerGroup method, and at least one function of displaying, hiding or clearing is configured in a traversing mode on the global variable allLayerGeo or the global variable layerGeo through a ref attribute of the vue component.
10. An electronic apparatus comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to execute the computer program to perform the method of rendering geoJson map boundary data based on a leaflet map according to any one of claims 1 to 8.
11. A readable storage medium having stored thereon a computer program comprising program code for controlling a process to execute a process, the process comprising a method of rendering geoJson map boundary data based on a leaflet map according to any one of claims 1 to 8.
CN202211399415.1A 2022-11-09 2022-11-09 Method, device and application for rendering geoJson map boundary data based on leaf let map Pending CN115577203A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211399415.1A CN115577203A (en) 2022-11-09 2022-11-09 Method, device and application for rendering geoJson map boundary data based on leaf let map

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211399415.1A CN115577203A (en) 2022-11-09 2022-11-09 Method, device and application for rendering geoJson map boundary data based on leaf let map

Publications (1)

Publication Number Publication Date
CN115577203A true CN115577203A (en) 2023-01-06

Family

ID=84589886

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211399415.1A Pending CN115577203A (en) 2022-11-09 2022-11-09 Method, device and application for rendering geoJson map boundary data based on leaf let map

Country Status (1)

Country Link
CN (1) CN115577203A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116010725A (en) * 2023-03-23 2023-04-25 北京白龙马云行科技有限公司 Map point location set dynamic display method, device, computer equipment and medium

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116010725A (en) * 2023-03-23 2023-04-25 北京白龙马云行科技有限公司 Map point location set dynamic display method, device, computer equipment and medium
CN116010725B (en) * 2023-03-23 2023-10-13 北京白龙马云行科技有限公司 Map point location set dynamic display method, device, computer equipment and medium

Similar Documents

Publication Publication Date Title
CN107015788B (en) Method and device for displaying images on mobile device in animation mode
CN110035180B (en) Card display method, device, terminal and storage medium
US8849942B1 (en) Application programming interface for prefetching map data
WO2018228396A1 (en) Page displaying method and apparatus, electronic device, and storage medium
US10366147B2 (en) Techniques for programmatic magnification of visible content elements of markup language documents
US9448754B2 (en) Resolving label collisions on a digital map
JP6255495B2 (en) Method and apparatus for displaying browser resource, and computer readable storage medium
CN110908762B (en) Dynamic wallpaper implementation method and device
US9679075B1 (en) Efficient delivery of animated image files
CN115577203A (en) Method, device and application for rendering geoJson map boundary data based on leaf let map
CN110609718A (en) Picture loading method and device, electronic equipment and readable storage medium
CN103646115A (en) Method and system for client side to access to webpage
CN111353115B (en) Method and device for generating snowplow map
RU2632150C1 (en) Method and system of downloading the image to the customer&#39;s device
CN114268828A (en) Method, device and equipment for processing large-screen page and storage medium
WO2013056562A1 (en) Wap page display method and device based on webkit browser
US20170315773A1 (en) Virtualizing Applications for Per-Monitor Displaying
CN116483737B (en) Data processing method and device, electronic equipment and storage medium
JP2019061344A (en) Graph drawing system, arithmetic server, control method of graph drawing system and program for arithmetic server
CN111460342B (en) Page rendering display method and device, electronic equipment and computer storage medium
CN113626113A (en) Page rendering method and device
JP7387767B2 (en) Methods, apparatus, computer equipment, and storage media for rendering GIS point data
CN114020187A (en) Font icon display method and device and electronic equipment
CN114510311B (en) Page adaptation display method, computing device and storage medium
CN114327720A (en) Picture loading method and device and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination