{"id":19838876,"url":"https://github.com/supermap/mapdashboard-custom-components","last_synced_at":"2025-07-29T21:43:36.372Z","repository":{"id":150182447,"uuid":"243665525","full_name":"SuperMap/mapdashboard-custom-components","owner":"SuperMap","description":"mapdashboard-custom-components","archived":false,"fork":false,"pushed_at":"2023-12-18T08:36:49.000Z","size":1359,"stargazers_count":7,"open_issues_count":2,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-06T16:53:17.698Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SuperMap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-28T02:56:03.000Z","updated_at":"2022-09-22T06:21:03.000Z","dependencies_parsed_at":"2024-11-12T12:19:34.398Z","dependency_job_id":"af10b36e-6157-4c41-b956-8e7efb90c22e","html_url":"https://github.com/SuperMap/mapdashboard-custom-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperMap%2Fmapdashboard-custom-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperMap%2Fmapdashboard-custom-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperMap%2Fmapdashboard-custom-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperMap%2Fmapdashboard-custom-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SuperMap","download_url":"https://codeload.github.com/SuperMap/mapdashboard-custom-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251924756,"owners_count":21666034,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T12:19:24.536Z","updated_at":"2025-05-01T18:31:29.751Z","avatar_url":"https://github.com/SuperMap.png","language":"JavaScript","readme":"# 地图大屏自定义组件指南\n![地图大屏](./.github/stream.gif)\n\n## 开始之前\n\n组件是 `地图大屏` 重要的组成部分。 `地图大屏` 自身为用户提供了丰富组件。\n为了满足多样需求， `地图大屏` 也支持用户自定义组件，\n\n## 开发要求\n\n自定义组件的开发需要用到 `Vue.js`。\n\n\u003e 在开始之前，推荐先学习 [Vue.js](https://cn.vuejs.org/)。官方指南假设你已了解关于 [单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html) 和 [事件侦听器](https://cn.vuejs.org/v2/guide/components.html#%E7%9B%91%E5%90%AC%E5%AD%90%E7%BB%84%E4%BB%B6%E4%BA%8B%E4%BB%B6) 的知识。\n\n## 开发步骤\n\n1. 克隆项目文件\n\n``` bash\ngit clone https://github.com/SuperMap/mapdashboard-custom-components\n```\n\n下载后的目录结构\n\n``` bash\n├── build\n├── src\n├── static\n├── README.md\n├── package.json\n```\n\n2. 在 src 目录下创建功能组件 \u003ca href=\"#%E7%BC%96%E5%86%99%E5%8A%9F%E8%83%BD%E7%BB%84%E4%BB%B6\"\u003eComponent.vue\u003c/a\u003e\n\n3. 在 src 目录下创建属性组件 \u003ca href=\"#%E7%BC%96%E5%86%99%E5%B1%9E%E6%80%A7%E7%BB%84%E4%BB%B6\"\u003eSetting.vue\u003c/a\u003e （如果不需要在地图大屏里进行属性配置，可忽略）\n\n4. 在 src 目录下修改配置文件进行注册 \u003ca href=\"#%E7%BC%96%E5%86%99%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6\"\u003ecomponents.json\u003c/a\u003e\n\n5. 如果存在多个自定义组件，建议在 src 目录下新增一个目录。\n\n以上步骤完成的目录结构如下：\n\n``` bash\n├── src\n│ ├── CustomComponent1      # 自定义组件1\n│ │ ├── Component.vue       # 功能组件\n│ │ └── Setting.vue         # 属性组件\n│ ├── CustomComponent2      # 自定义组件2\n│ │ └── Component.vue       # 功能组件\n│ ├── components.json       # 配置文件\n```\n\n## 安装依赖\n\n```bash\n# install dependencies\nnpm install\n```\n\n## 启动调试\n\n```bash\n# serve with hot reload at localhost:8080 or other port\nnpm start / npm run dev\n```\n\n启动完成后，在 `地图大屏` 左侧组件列表自定义分类中可以看到自定义组件。\n\n\u003e 注意：这里需要 SuperMap iPortal 中的地图大屏作为调试环境，因此需要指定 SuperMap iPortal 的服务地址，请在 build/webpack.dev.conf.js 文件中对 iportalUrl 变量进行配置。\n\n```js\n// 请指定 SuperMap iPortal 服务地址\nconst iportalUrl = 'http://localhost:8190/iportal';\n```\n\n\u003e 注意：由于开发环境端口和 SuperMap iPortal 服务端口不一致，服务访问会存在跨域问题，请打开 %IPORTAL_HOME%/webapps/iportal/WEB-INF 目录下的 web.xml 进行如下配置。\n\n```xml\n\u003cinit-param\u003e\n  \u003cparam-name\u003ecors.allowed.origins\u003c/param-name\u003e\n  \u003c!-- 请将端口设置为开发环境使用的端口 --\u003e\n  \u003cparam-value\u003ehttp://localhost:8081\u003c/param-value\u003e\n\u003c/init-param\u003e\n\n\u003cinit-param\u003e\n    \u003cparam-name\u003ecors.support.credentials\u003c/param-name\u003e\n    \u003cparam-value\u003etrue\u003c/param-value\u003e\n\u003c/init-param\u003e\n```\n\n## 编译自定义组件\n\n```bash\n# build for production with minification\nnpm run build\n```\n\n执行 `npm run build`，将开发的 自定义组件 编译成相应的 js 文件。\n\n## 使用自定义组件\n\n将 `dist` 目录下的内容拷贝至目录 `%IPORTAL_HOME%/webapps/iportal/resources/mapDashboard/customComponents` 打开 SuperMap iPortal 中的地图大屏，刷新页面，在左侧组件列表自定义分类中可以看到自定义组件。\n\n\u003chr /\u003e\n\n## 编写功能组件\n\n#### 生命周期\n如果地图组件需要和地图交互，则需要编写组件的生命周期，从而获取地图实例，说明如下：\n\n**loaded(map)**：\n\n- **类型**： `Function`\n- **参数**： `map`\n- **描述**： 在组件关联的地图加载完成时，即地图实例初始化之后被调用。\n- **详细**： 在该生命周期中，可拿到 `map` 实例编写相应的功能。\n\n```js\nloaded(map) {\n  //  注意：this.map 不能在 $data 中定义，因为 map 实例不能作为响应式数据\n  this.map = map;\n}\n```\n\n**removed(map)**：\n\n- **类型**： `Function`\n- **参数**： `map`\n- **描述**：在组件关联的地图销毁之前被调用。\n- **详细**：在该生命周期中，应当清除与 `map` 有关的操作，如：清除添加过的图层、移除所有的监听器以及重置与 `map` 相关的变量等。\n\n## 编写属性组件\n\n如果要在 `地图大屏` 中对自定义组件进行属性配置，需要编写 `Setting.vue`。\n\n#### 自定义属性\n\n当前配置组件的 `props` 对象对应于功能组件中定义的 `props`对象 。每一个配置项的改动需要分发（`$emit`） `change` 事件，值以 `key-value` 键值对形式进行传递。\n\n``` html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"sm-setting-panel\"\u003e\n      \u003cdiv class=\"sm-setting-panel__header\"\u003e属性名：\u003c/div\u003e\n      \u003ca-select\n        class=\"sm-setting-panel__content\"\n        \u003c!-- 绑定字段 --\u003e\n        :value=\"mode\"\n        \u003c!-- 指定属性值 --\u003e\n        :options=\"optionsList\"\n        :getPopupContainer=\"triggerNode =\u003e triggerNode.parentNode\"\n        \u003c!-- 这里必须分发 change 事件 --\u003e\n        @change=\"val =\u003e handleChange({ mode: val })\"\n      /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  props: {\n    mode: String\n  },\n  data() {\n    return {\n      optionsList: [\n        {\n          label: '属性值1',\n          value: 'value1'\n        },\n        {\n          label: '属性值2',\n          value: 'value2'\n        }\n      ]\n    };\n  },\n  methods: {\n    handleChange(data) {\n      this.$emit('change', data);\n    }\n  }\n};\n\u003c/script\u003e\n```\n\n#### 基础样式属性\n\n `地图大屏` 还提供了组件的部分基础样式属性，包括：\n\n\u003cul\u003e\n  \u003cli\u003e\n    \u003cstrong style=\"display: inline-block; width: 25%;\"\u003esm-setting-group\u003c/strong\u003e：\n    属性分组类名\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong style=\"display: inline-block; width: 25%;\"\u003esm-setting-group__title\u003c/strong\u003e：\n    属性分组标题类名\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong style=\"display: inline-block; width: 25%;\"\u003esm-setting-panel\u003c/strong\u003e：\n    属性容器类名\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong style=\"display: inline-block; width: 25%;\"\u003esm-setting-panel__header\u003c/strong\u003e：\n    属性标题类名\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong style=\"display: inline-block; width: 25%;\"\u003esm-setting-panel__content\u003c/strong\u003e：\n    属性组件类名\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong style=\"display: inline-block; width: 25%;\"\u003esm-setting-unit\u003c/strong\u003e：\n    属性组件单位类名\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cstrong style=\"display: inline-block; width: 25%;\"\u003ex-setting-line\u003c/strong\u003e：\n    分割线类名\n  \u003c/li\u003e\n\u003c/ul\u003e\n\n``` html\n\u003ctemplate\u003e\n  \u003cdiv class=\"sm-setting-group\"\u003e\n    \u003cdiv class=\"sm-setting-panel\"\u003e\n      \u003cdiv class=\"sm-setting-panel__header\"\u003e字体大小：\u003c/div\u003e\n      \u003cdiv class=\"sm-setting-panel__content\"\u003e\n        \u003ca-input :value=\"fontSize\" @change=\"e =\u003e $emit('change', { fontSize: e.target.value })\" /\u003e\n        \u003cspan class=\"sm-setting-unit\"\u003e像素\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## 编写配置文件\n\n每个自定义组件都需要在根目录下的 `components.json` 文件中进行注册，内容举例如下：\n\n``` json\n{\n  \"CustomComponent\": {\n    \"name\": \"组件名称\",\n    \"type\": \"CustomComponent\",\n    \"defaultProps\": {\n      \"mode\": \"value1\"\n    },\n    \"uri\": \"CustomComponent1/Component\",\n    \"settingUri\": \"CustomComponent1/Setting\"\n  }\n}\n```\n\n字段说明：\n\n**name**：\n\n- **类型**： `String`\n- **必填**： `是`\n- **详细**： 组件显示名称\n\n**type**：\n\n- **类型**： `String`\n- **必填**： `是`\n- **详细**： 组件类型\n\n**defaultProps**：\n\n- **类型**： `Object`\n- **必填**： `否`\n- **详细**： 属性配置项的默认值\n\n**uri**：\n\n- **类型**： `Object`\n- **必填**： `是`\n- **详细**： 功能组件的相对路径\n\n**settingUri**：\n\n- **类型**： `String`\n- **必填**： `是`\n- **详细**： 属性组件的相对路径\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsupermap%2Fmapdashboard-custom-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsupermap%2Fmapdashboard-custom-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsupermap%2Fmapdashboard-custom-components/lists"}