Method, device and equipment for realizing map function deployment based on sky map api in project and medium

By integrating Tianma JavaScript library in the Vue project and encapsulating map components, combined with the interface adaptation processing of Tianma API, the efficient and stable deployment of map functions is achieved, solving the complexity and performance problems of map integration in the Vue project, and providing a reusable and extensible map function solution.

CN119576346APending Publication Date: 2025-03-07浪潮(山东)农业互联网有限公司 +1
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202411454985.5
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-10-17
Publication Date
2025-03-07

AI Technical Summary

Technical Problem

In Vue project, how to efficiently and stably integrate the Tianma API into the project and realize the deployment of map functions, especially when facing problems such as interface adaptation, performance optimization and component development.

Method used

Modular processing of map functions is achieved by integrating the Tianma JavaScript library into a Vue project and encapsulating the map logic into a separate component. Then, the interface adaptation process is performed based on the Tianma API, the map components are loaded into the project, and the deployment points, lines and surfaces are added on the map according to the given API of Tianma Map.

Benefits of technology

It improves the integration efficiency and code quality of map functions in Vue projects, provides a reusable and extensible map function implementation solution, and solves problems such as high integration complexity and unstable performance in traditional map function implementation methods.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119576346A_ABST
    Figure CN119576346A_ABST
Patent Text Reader

Abstract

The invention belongs to the technical field of computer software, and particularly provides a method, a device, equipment and a medium for realizing map function deployment based on a sky map api in a project, and the method comprises the following steps: integrating a sky map JavaScript library into a Vue project; logically packaging the sky map into an independent map component; based on JavaScript api of a sky map, interface adaptation processing is carried out, and a map component is loaded into a project; and adding and deploying points, lines and planes in the sky map according to api given by the sky map. The JavaScript library of the sky map is integrated into the Vue project, and the map logic is packaged into an independent component, so that the modular processing of the map function is realized. And the map component is loaded into the project, and points, lines and planes are added and deployed on the map according to the api given by the sky map, so that flexible deployment and efficient management of map functions are realized.
Need to check novelty before this filing date? Find Prior Art

Description

Background Art

[0002] In the current field of Web development, map functions have become an indispensable part of many applications. Whether it is travel navigation, location positioning, regional analysis, or data visualization, maps play a vital role. Among many map service providers, Tiandi Map, as an authoritative geographic information service platform in China, provides rich and high-precision map data interfaces to meet the needs of various applications for map functions.

[0003] However, in actual project development, how to efficiently and stably integrate the Tiandi Map API into the project and implement the deployment of map functions is an important issue that developers need to face. Especially when using modern front-end frameworks such as Vue for project development, they often face problems such as interface adaptation, performance optimization, and component development.

[0004] The traditional way to implement map functions is to embed the map logic directly into the main code of the project, which not only increases the complexity of the code, but also has problems such as high integration complexity and unstable performance, and also reduces the maintainability and scalability of the code. It is often difficult to meet the needs of complex business scenarios. Summary of the invention

[0005] In order to solve the above problems, this paper proposes a method, device, equipment and medium for implementing map function deployment in a project based on the Tiandi Map API. This method realizes modular processing of map functions by integrating the Tiandi Map JavaScript library into the Vue project and encapsulating the map logic into a separate component. On this basis, through interface adaptation processing based on the Tiandi Map API, the map component is loaded into the project, and deployment points, lines and surfaces are added to the map according to the API given by Tiandi Map, thereby realizing flexible deployment and efficient management of map functions.

[0006] In a first aspect, the technical solution of the present invention provides a method for implementing map function deployment in a project based on the Tiandi Map API, comprising the following steps: Integrate the TiandiMap JavaScript library into the Vue project; Encapsulate the Tiandi map logic into a separate map component; Based on the JavaScript API of Tiandi Map, interface adaptation is performed and map components are loaded into the project; Add deployment points, lines and surfaces to Tiandi Map according to the API given by Tiandi Map.

[0007] As a preferred embodiment of the technical solution of the present invention, the steps of integrating the Tiandi Map JavaScript library into the Vue project include: In the Vue project, introduce the TiandiMap JavaScript library through CDN; specifically, add code to the head part of the project's index.html or the template tag of the Vue component to introduce the TiandiMap JavaScript library.

[0008] As a preferred embodiment of the technical solution of the present invention, the step of encapsulating the Tiandi Map logic into a separate component includes: Open vscode and import the Vue project into the developer tool; After starting the project, check the console to see if there is any error information; If there is no error message, find the public / index.html file and import the Tiandi Map JavaScript library.

[0009] As a preferred embodiment of the technical solution of the present invention, the step of encapsulating the Tiandi Map logic into a separate map component includes: Create a new TiandituMap folder in the scr / component folder of the Vue project, and create a new index.vue file in it; Initialize the map, display the initial zoom level and initial center point, and the added map controls or overlays; obtain the map interaction logic; Encapsulate the display and logic of Tiandi Map into the index.vue file.

[0010] As a preferred embodiment of the technical solution of the present invention, based on the JavaScript API of Tiandi Map, the steps of performing interface adaptation processing and loading the map component into the project include: Based on the JavaScript API of Tiandi Map, interface adaptation is performed; Find the App.vue page component in the Vue project application and introduce the created map component into App.vue.

[0011] As a preferred embodiment of the technical solution of the present invention, the steps of finding the App.vue page component in the Vue project application and introducing the created map component into App.vue include: Integrate map interaction and event handling mechanisms in Vue components and implement communication and data sharing between components through Vue's event bus or state management library.

[0012] As a preferred embodiment of the technical solution of the present invention, the steps of adding deployment points, lines and surfaces in Tiandi Map according to the API given by Tiandi Map include: Based on the API for drawing points provided by Tiandi Map, pass in the corresponding longitude and latitude, draw a point on the passed longitude and latitude, and adjust the size and color of the point based on the API given by Tiandi Map; add a listener for click events to the corresponding point; Provide an array of points to the line drawing API provided by Tiandi Map, connect each point to form a line, and adjust the color and thickness of the drawn line based on the API given by Tiandi Map; On the basis of the line, add the background color to the graphic in the online area to complete the addition of the surface, and add color and transparency information to the surface area based on the API given by Tiandi Map.

[0013] In a second aspect, the technical solution of the present invention also provides a device for implementing map function deployment in a project based on the Tiandi Map API, including a JS library integration module, a component encapsulation module, a configuration loading module and a function deployment module; JS library integration module, used to integrate Tiandi Map JavaScript library into Vue project; Component encapsulation module, used to encapsulate Tiandi Map logic into a separate map component; Configure the loading module to perform interface adaptation based on the JavaScript API of Tiandi Map and load the map component into the project; The function deployment module is used to add deployment points, lines and surfaces in Tiandi Map according to the API given by Tiandi Map.

[0014] As a preferred embodiment of the technical solution of the present invention, a JS library integration module is used to introduce the Tiandi Map JavaScript library in a Vue project through CDN; specifically, code is added to the head part of the project's index.html or the template tag of the Vue component to introduce the Tiandi Map JavaScript library.

[0015] As a preferred embodiment of the technical solution of the present invention, the device also includes a startup processing module, which is used to open vscode and introduce the Vue project into the developer tool; after starting the project, check whether there is an error message in the console; if there is no error message, search for the public / index.html file and introduce the Tiandi Map JavaScript library.

[0016] As a preferred embodiment of the technical solution of the present invention, a component encapsulation module is used to create a new TiandituMap folder under the scr / component folder in the Vue project, and create a new index.vue file therein; initialize the map, display the initial zoom level and the initial center point and the added map controls or coatings; obtain the map interaction logic; and encapsulate the display and logic of TiandituMap into the index.vue file.

[0017] As a preferred embodiment of the technical solution of the present invention, a loading module is configured to perform interface adaptation processing based on the JavaScript api of Tiandi Map; the App.vue page component is found in the Vue project application, and the created map component is introduced into App.vue.

[0018] As a preferred embodiment of the technical solution of the present invention, the device also includes a processing module for integrating map interaction and event processing mechanisms in the Vue component and realizing communication and data sharing between components through the Vue event bus or state management library.

[0019] As a preferred embodiment of the technical solution of the present invention, the function deployment module is specifically used to pass in the corresponding longitude and latitude based on the API for drawing points provided by Tiandi Map, draw a point on the passed longitude and latitude, and adjust the size and color of the point based on the API given by Tiandi Map; add a listener for click events to the corresponding points; provide an array of a group of points to the API for drawing lines provided by Tiandi Map, connect each point to form a line, and adjust the color and thickness of the drawn line based on the API given by Tiandi Map; add a background color to the area of ​​the graphic on the basis of the line to complete the addition of the surface, and add color and transparency information to the area of ​​the surface based on the API given by Tiandi Map.

[0020] In the third aspect, the technical solution of the present invention also provides an electronic device, comprising: at least one processor; and a memory communicatively connected to the at least one processor; the memory stores computer program instructions executable by the at least one processor, and the computer program instructions are executed by the at least one processor so that the at least one processor can execute the method for implementing map function deployment in a project based on the Tiandi Map API as described in the first aspect.

[0021] In a fourth aspect, the technical solution of the present invention also provides a non-transitory computer-readable storage medium, which stores computer instructions, and the computer instructions enable the computer to execute the method for implementing map function deployment in a project based on the Tiandi Map API as described in the first aspect.

[0022] It can be seen from the above technical scheme that the present invention has the following advantages: first, it is necessary to introduce the Tiandi Map JavaScript library in the Vue project by means of CDN to ensure that the map function can be loaded and run normally. Then, by creating the Tiandi Map public component, the map logic is encapsulated into a separate component for reuse in multiple projects. Before encapsulating the component, it is also necessary to perform basic inspection and configuration on the Vue project to ensure the normal operation of the project and the smooth introduction of the map library. Not only does it improve the integration efficiency and code quality of the map function in the Vue project, but it also provides developers with a reusable and scalable map function implementation solution.

[0023] In addition, the invention has a reliable design principle, a simple structure and a very broad application prospect. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0025] Figure 1 is a schematic flow chart of a method according to an embodiment of the present invention.

[0026] Figure 2 is a schematic block diagram of an apparatus according to an embodiment of the present invention. DETAILED DESCRIPTION

[0027] In order to enable those skilled in the art to better understand the technical solutions in the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present invention.

[0028] like Figure 1 As shown, an embodiment of the present invention provides a method for implementing map function deployment in a project based on the Tiandi Map API, comprising the following steps: Step 1: Integrate the TiandiMap JavaScript library into the Vue project; It should be noted that before executing the steps of this application, you need to visit the Tiandi Map official website to register a developer account and create an application to obtain an API key (usually called Key).

[0029] This step specifically includes: in the Vue project, introducing the TiandiMap JavaScript library through CDN; that is, adding code to the head part of the project's index.html or the template tag of the Vue component to introduce the TiandiMap JavaScript library.

[0030] The code is as follows: “ <script type="text / javascript" src="https: / / t{0-7}.tianditu.gov.cn / api?v=4.0&tk=获取的API密钥">< / script> ”.

[0031] Step 2: Encapsulate the Tiandi Map logic into a separate map component; This step specifically includes: creating a TiandituMap folder in the scr / component folder of the Vue project, and creating a new index.vue file in it; initializing the map, displaying the initial zoom level and initial center point, and the added map controls or coatings; obtaining the map interaction logic; and encapsulating the display and logic of TiandituMap into the index.vue file. The specific code is as follows: <template> < / template> <script>export default {name: 'TiandituMap',mounted() {this.initMap();},methods: {initMap() { / / 初始化地图var map = new T.Map(this.$refs.mapContainer,{zoom: 10, / / 初始缩放级别center: new T.LngLat(116.397428,39.90923) / / 初始中心点}); / / 可以添加更多地图控件或图层var vectorLayer = newT.TileLayer('vec',{maxZoom: 18,minZoom: 5});map.addLayer(vectorLayer); / / 其他地图交互逻辑}}};< / script> <style scoped> / * 你的样式 * / < / style> Step 3: Based on the JavaScript API of Tiandi Map, perform interface adaptation and load the map component into the project; In order to make the components created above run stably and efficiently in the Vue environment, and optimize the map loading speed and resource utilization efficiency through asynchronous loading and on-demand loading, the map component needs to be introduced into the project. The specific steps are as follows: Find the App.vue page component in the Vue project application and introduce the created component into App.vue; the specific code is as follows: <template> <tianditumap / > < / template> <script>import TiandituMap from'. / components / TiandituMap'export default {name: 'App',components: {TiandituMap}< / script> <style> / * 全局样式 * / < / style> In the opened vscode software, right-click on the name of the created Vue project, and select 'Copy file directory', press ctrl + r on the keyboard at the same time to open the command window, and then enter 'cd + right mouse button', paste the project path you just copied, click Enter, it will automatically jump to the project directory, and then enter 'npm run dev' in the command window to start the project.

[0032] Step 4: Add deployment points, lines and surfaces to Tiandi Map according to the API provided by Tiandi Map.

[0033] Before executing this step, you need to integrate map interaction and event handling mechanisms into the Vue component, such as click events, drag events, etc., and implement communication and data sharing between components through Vue's event bus or state management library (such as Vuex).

[0034] This step mainly includes: (1) point addition, (2) line addition, and (3) surface addition; (1) Adding points: Based on the API for drawing points provided by Tiandi Map, pass in the corresponding longitude and latitude, draw a point on the passed longitude and latitude, and adjust the size and color of the point based on the API given by Tiandi Map; add a click event listener to the corresponding point; specifically, you need to pass in the corresponding longitude and latitude to draw a point on the passed longitude and latitude. Of course, custom icons are also supported. You can also achieve some interactive effects by placing the mouse on the corresponding point or clicking on the corresponding point. For example, the longitude and latitude of the point or some prompt text will be displayed after the mouse is placed on it. If you want to add interactive effects by clicking on the point, you also need to add a click event listener to the corresponding point. In order to prevent the click event from not being able to monitor which point is clicked when there are multiple points, you need to monitor all the points drawn on the map to achieve different operations by clicking on different points.

[0035] (2) Line adding: Provide an array of points to the line drawing API provided by Tiandi Map, and connect each point to form a line. Adjust the color and thickness of the drawn line based on the API given by Tiandi Map. The principle of adding lines is similar to adding points. A line is composed of multiple points. Connecting each point forms a line. Therefore, it is necessary to provide an array of points to the line drawing API. If a closed polygon is to be realized, the coordinates of the first point need to be matched with the coordinates of the left and right points. You can use the given API to realize the color, thickness and other information of the drawn line. The details are as follows: / / Initialize the map object map = new T.Map("mapDiv"); / / Set the center point and level of the displayed map map.centerAndZoom(new T.LngLat(116.40969,39.94940),zoom); var points =[]; points.push(new T.LngLat(116.41136,39.97569)); points.push(new T.LngLat(116.411794,39.9068)); points.push(new T.LngLat(116.32969,39.92940));| points.push(new T.LngLat(116.385438,39.90610)); / / Create a face object var polygon = new T.Polygon(points,{ color: "blue", weight: 3, opacity: 0.5, fllColor: "#FFFFFF", fllOpacity: 0.5 }); / / Add a surface to the map map.addOverLay(polygon); } (3) Adding a surface: Add a background color to the graphic in the online area to complete the addition of the surface, and add color and transparency information to the surface area based on the API given by Tiandi Map.

[0036] In some cases, the steps to encapsulate the TiandiMap logic into a separate component include: S3: Open vscode and import the Vue project into the developer tool. After starting the project, check whether there is an error message in the console. If there is no error message, find the public / index.html file and import the Tiandi Map JavaScript library.

[0037] like Figure 2 As shown, an embodiment of the present invention also provides a device for implementing map function deployment based on the Tiandi Map API in a project, including a JS library integration module, a component encapsulation module, a configuration loading module and a function deployment module; JS library integration module, used to integrate Tiandi Map JavaScript library into Vue project; Component encapsulation module, used to encapsulate Tiandi Map logic into a separate map component; Configure the loading module to perform interface adaptation based on the JavaScript API of Tiandi Map and load the map component into the project; The function deployment module is used to add deployment points, lines and surfaces in Tiandi Map according to the API given by Tiandi Map.

[0038] In some instances, the JS library integration module is used to introduce the TiandiMap JavaScript library in the Vue project through CDN; specifically, add code to the head part of the project's index.html or the template tag of the Vue component to introduce the TiandiMap JavaScript library.

[0039] In some instances, the device also includes a startup processing module, which is used to open vscode and introduce the Vue project into the developer tool; after starting the project, check whether there is an error message in the console; if there is no error message, find the public / index.html file and introduce the Tiandi Map JavaScript library.

[0040] In some instances, the component encapsulation module is used to create a TiandituMap folder under the scr / component folder in the Vue project, and create a new index.vue file in it; initialize the map, display the initial zoom level and the initial center point and the added map controls or coatings; obtain the map interaction logic; encapsulate the display and logic of TiandituMap into the index.vue file.

[0041] In some instances, configure the loading module to perform interface adaptation based on the JavaScript API of Tiandi Map; find the App.vue page component in the Vue project application and introduce the created map component into App.vue.

[0042] In some instances, the device also includes a processing module for integrating map interaction and event processing mechanisms in the Vue component and realizing communication and data sharing between components through the event bus or state management library of Vue.

[0043] In some instances, the function deployment module is specifically used to pass in the corresponding longitude and latitude based on the API for drawing points provided by Tiandi Map, draw a point on the passed longitude and latitude, and adjust the size and color of the point based on the API given by Tiandi Map; add a listener for click events to the corresponding points; provide an array of points to the API for drawing lines provided by Tiandi Map, connect each point to form a line, and adjust the color and thickness of the drawn line based on the API given by Tiandi Map; add a background color to the area of ​​the line on the basis of the line to complete the addition of the surface, and add color and transparency information to the area of ​​the surface based on the API given by Tiandi Map.

[0044] An embodiment of the present invention also provides an electronic device, comprising: a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus. The communication bus can be used for information transmission between the electronic device and the sensor. The processor can call the logic instructions in the memory to execute the following method: Step 1: Integrate the Tiandi Map JavaScript library into the Vue project; Step 2: Encapsulate the Tiandi Map logic into a separate map component; Step 3: Based on the JavaScript API of Tiandi Map, perform interface adaptation processing and load the map component into the project; Step 4: Add deployment points, lines and surfaces in Tiandi Map according to the API given by Tiandi Map.

[0045] In addition, the logic instructions in the above-mentioned memory can be implemented in the form of software functional units and can be stored in a computer-readable storage medium when sold or used as an independent product. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc., which can store program code.

[0046] An embodiment of the present invention provides a non-transitory computer-readable storage medium, which stores computer instructions, and the computer instructions enable a computer to execute the method provided by the above method embodiment, for example, including: Step 1: Integrate the Tiandi Map JavaScript library into the Vue project; Step 2: Encapsulate the Tiandi Map logic into a separate map component; Step 3: Based on the JavaScript API of Tiandi Map, perform interface adaptation processing and load the map component into the project; Step 4: Add deployment points, lines and surfaces in Tiandi Map according to the API given by Tiandi Map.

[0047] It should be understood that the order of execution of the steps in the above embodiment does not necessarily mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present invention.

[0048] An embodiment of the present invention provides an embodiment of a device for implementing map function deployment in a project based on the Tiandi Map API. The device and the methods for implementing map function deployment in a project based on the Tiandi Map API in the above-mentioned embodiments belong to the same inventive concept. For details not fully described in the embodiment of the device for implementing map function deployment in a project based on the Tiandi Map API, refer to the embodiment of the method for implementing map function deployment in a project based on the Tiandi Map API mentioned above.

[0049] The device for implementing map function deployment based on Tiandi Map API in the project is a combination of the units and algorithm steps of each example described in the embodiments disclosed in this article, which can be implemented by electronic hardware, computer software or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0050] Those skilled in the art will understand that various aspects of the method for implementing map function deployment based on the Tiandi Map API in a project can be implemented as a system, method or program product. Therefore, various aspects of the present disclosure can be specifically implemented in the following forms, namely: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or a combination of hardware and software, which can be collectively referred to as "circuit", "module" or "system".

[0051] Although the present invention has been described in detail with reference to the accompanying drawings and in combination with the preferred embodiments, the present invention is not limited thereto. Without departing from the spirit and essence of the present invention, a person of ordinary skill in the art may make various equivalent modifications or substitutions to the embodiments of the present invention, and these modifications or substitutions shall be within the scope of the present invention. Any person of ordinary skill in the art may easily think of changes or substitutions within the technical scope disclosed by the present invention, and these shall be within the scope of protection of the present invention.

Claims

1. A method for implementing map function deployment based on Tiandi Map API in a project, characterized in that: The steps include: Integrate the TiandiMap JavaScript library into the Vue project; Encapsulate the Tiandi map logic into a separate map component; Based on the JavaScript API of Tiandi Map, interface adaptation is performed and map components are loaded into the project; Add deployment points, lines and surfaces to Tiandi Map according to the API given by Tiandi Map.

2. The method for implementing map function deployment based on Tiandi Map API in a project according to claim 1, characterized in that: The steps to integrate the TiandiMap JavaScript library into a Vue project include: In the Vue project, introduce the TiandiMap JavaScript library through CDN; specifically, add code to the head part of the project's index.html or the template tag of the Vue component to introduce the TiandiMap JavaScript library.

3. The method for implementing map function deployment based on Tiandi Map API in a project according to claim 2 is characterized in that: The steps to encapsulate the TiandiMap logic into a separate component previously included: Open vscode and import the Vue project into the developer tool; After starting the project, check the console to see if there is any error information; If there is no error message, find the public / index.html file and import the Tiandi Map JavaScript library.

4. The method for implementing map function deployment based on Tiandi Map API in a project according to claim 3 is characterized in that: The steps to encapsulate the Tiandi map logic into a separate map component include: Create a new TiandituMap folder in the scr / component folder of the Vue project, and create a new index.vue file in it; Initialize the map, display the initial zoom level and initial center point, and the added map controls or overlays; obtain the map interaction logic; Encapsulate the display and logic of Tiandi Map into the index.vue file.

5. The method for implementing map function deployment based on Tiandi Map API in a project according to claim 4 is characterized in that: Based on the JavaScript API of Tiandi Map, the steps for interface adaptation and loading map components into the project include: Based on the JavaScript API of Tiandi Map, interface adaptation is performed; Find the App.vue page component in the Vue project application and introduce the created map component into App.vue.

6. The method for implementing map function deployment based on Tiandi Map API in a project according to claim 5 is characterized in that: Find the App.vue page component in the Vue project application, and then introduce the created map component into App.vue: Integrate map interaction and event handling mechanisms in Vue components and implement communication and data sharing between components through Vue's event bus or state management library.

7. The method for implementing map function deployment based on Tiandi Map API in a project according to claim 6 is characterized in that: The steps to add points, lines and surfaces to Tiandi Map according to the API provided by Tiandi Map include: Based on the API for drawing points provided by Tiandi Map, pass in the corresponding longitude and latitude, draw a point on the passed longitude and latitude, and adjust the size and color of the point based on the API given by Tiandi Map; add a listener for click events to the corresponding point; Provide an array of points to the line drawing API provided by Tiandi Map, connect each point to form a line, and adjust the color and thickness of the drawn line based on the API given by Tiandi Map; On the basis of the line, add the background color to the graphic in the online area to complete the addition of the surface, and add color and transparency information to the surface area based on the API given by Tiandi Map.

8. A device for implementing map function deployment based on Tiandi Map API in a project, characterized in that: Including JS library integration module, component encapsulation module, configuration loading module and function deployment module; JS library integration module, used to integrate Tiandi Map JavaScript library into Vue project; Component encapsulation module, used to encapsulate Tiandi Map logic into a separate map component; Configure the loading module to perform interface adaptation based on the JavaScript API of Tiandi Map and load the map component into the project; The function deployment module is used to add deployment points, lines and surfaces in Tiandi Map according to the API given by Tiandi Map.

9. An electronic device, characterized in that: The electronic device includes: at least one processor; and a memory communicatively connected to the at least one processor; the memory stores computer program instructions executable by the at least one processor, and the computer program instructions are executed by the at least one processor so that the at least one processor can execute the method for implementing map function deployment in a project based on the Tiandi Map API as described in any one of claims 1 to 6.

10. A non-transitory computer-readable storage medium, characterized in that: The non-transitory computer-readable storage medium stores computer instructions, and the computer instructions enable the computer to execute the method for implementing map function deployment in a project based on the Tiandi Map API as described in any one of claims 1 to 6.