一款综合地图应用组件，内置了百度、高德、天地图瓦片

摘要：今天介绍一款综合地图应用Vue组件，基于Openlayers的地图应用。内置了百度、高德、天地图瓦片，并支持与方正、超图、山海经纬、航天精一等PGIS厂商对接。

今天介绍一款综合地图应用Vue组件，基于Openlayers的地图应用。内置了百度、高德、天地图瓦片，并支持与方正、超图、山海经纬、航天精一等PGIS厂商对接。

包含文本、图形、html、热力图、轨迹回放等20个组件，支持与ECharts结合实现散点、飞行迁徙等基于地理位置的图表，满足项目常见需求。使用者不需要有地图相关专业知识，甚至不需要写任何JS代码就能实现通用功能。

安装

npm i xdh-map --save

全局引用

import Vue from 'vue'import 'xdh-map/lib/xdhmap.css'import * as XdhMap from 'xdh-map'Vue.use(XdhMap)

局部引用注册

import 'xdh-map/lib/xdhmap.css'import {XdhMap} from 'xdh-map'export default { components: { XdhMap }}

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

官网提供的基于Vue项目的一站式解决方案。

git clone https://gitee.com/newgateway/my-web.git

只需把工程模板项目获取下来就可以使用，包括全部功能，开箱即用。

如只需用到 My 其中的某些组件，可以在已有的项目工程中安装，并完成配置。步骤：

1、安装组件库和相关插件

安装组件

npm i element-ui @xdh/my --save

安装项目依赖插件

npm i babel-plugin-component node-sass sass-loader --save-dev

2、配置 babel.config.js

组件采用了按需加载，需要在babel.config.js 加上插件，如：

module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ ...require('@xdh/my/core/babel.plugins') ]}

3、配置 vue.config.js

需要在vue.config.js加上别名，如：

module.exports = { transpileDependencies: ['@xdh/my'], chainWebpack(chain) { chain.resolve.alias.set('$ui', '@xdh/my/ui/lib') }}

4、引用组件

到此，你可以开始引入组件开始编码了，如：

import {MyMap} from '$ui/map' export default { components: { MyMap } }

来源：散文随风想一点号

标签：高德天地图天地图瓦片

免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!