Author: Liu
SuperMap iPortal 10i, the large map screen is newly constructed based on the SuperMap iClient Vue component, providing a variety of components such as charts, maps, scenes, etc. However, in actual project applications, some specific components will still need to be added. So in the SuperMap iPortal (2020) version launched in October , the large map screen not only enriches a variety of components, but also supports user-defined components.
Next, let's take a look at how to achieve it
1. View the guide of map large screen custom component
Before proceeding with the custom component, you can check the official document, which provides the custom component project program, which describes the development and debugging and how to deploy it in iPortal for use.
Document address: https://github.com/SuperMap/mapdashboard- custom-components/blob/master/README.md
2. The main points are sorted out
1. Instructions for using the library
The UI framework used by the iPortal map large screen is Ant Design of Vue and the map component library Vue-iClient-MapboxGL.
When customizing components, Ant Design of Vue does not need to be installed again, just call it directly, as required by Vue-iClient-MapboxGL To install, we will talk about how to use it in a later article
2. Get the map object
You need to get the map instance through the loaded(map) method. Don't rely on the created and mounted methods in the life cycle of the Vue component to get or perform the operation of the map instance.
3.loaded(map)&removed(map)
These two methods only need to be called when the operations related to the map instance are expanded. It is worth noting that: in the large-screen map editing mode, the components will be redrawn when they are dragged into the map component or removed from the map component. , So loaded and removed will be triggered accordingly.
4.Setting.vue property component
The attribute component is optional, but when defining map-related components, if you need to bind or switch between different maps, you need to configure it, but you don’t need to build the "associated map" part, it will be added by itself ( local map After the component is added ), such as the built-in "coordinate acquisition"
5. Debug
When customizing map-related components, you can click the preview mode to debug. In the preview mode, it is convenient to zoom and pan the map with the mouse to view the corresponding layer effects
