# 新德汇地图应用类库
基于Openlayers的地图应用Vue组件。内置了百度、高德、天地图瓦片,并支持与方正、超图、山海经纬、航天精一等PGIS厂商对接。
包含文本、图形、html、热力图、轨迹回放等20个组件,支持与ECharts结合实现散点、飞行迁徙等基于地理位置的图表,满足项目常见需求。
使用者不需要有地图相关专业知识,甚至不需要写任何JS代码就能实现通用功能。
![info](https://images.gitee.com/uploads/images/2020/0529/101300_8d254ed7_1386281.png)
## 重要说明
`xdh-map` 完成了升级改版, 为了提供更好的开发体验,现已集成到了 [MyUI](http://newgateway.gitee.io/my/)。 代码仓库已迁移到 [https://gitee.com/newgateway/my](https://gitee.com/newgateway/my)
## 开发指南
- [官网](http://newgateway.gitee.io/my/)
- [开发指南](http://newgateway.gitee.io/my/guide/)
- [基础组件库](http://newgateway.gitee.io/my/ui/components/)
- [地图应用类库](http://newgateway.gitee.io/my/ui/map/)
## 预览
![info](https://images.gitee.com/uploads/images/2020/0529/101300_9eb21d13_1386281.jpeg)
![info](https://images.gitee.com/uploads/images/2020/0529/101300_1d2deb0d_1386281.jpeg)
![info](https://images.gitee.com/uploads/images/2020/0529/101301_0a6ab494_1386281.jpeg)
![info](https://images.gitee.com/uploads/images/2020/0529/101300_c64e0713_1386281.jpeg)
![info](https://images.gitee.com/uploads/images/2020/0529/101301_3fc645f5_1386281.jpeg)
![info](https://images.gitee.com/uploads/images/2020/0529/101301_0e78ba10_1386281.jpeg)
## 独立引用
### 安装
```sh
npm i xdh-map --save
```
### 全局引用
```js
import Vue from 'vue'
import 'xdh-map/lib/xdhmap.css'
import * as XdhMap from 'xdh-map'
Vue.use(XdhMap)
```
### 局部引用注册
```js
import 'xdh-map/lib/xdhmap.css'
import {XdhMap} from 'xdh-map'
export default {
components: {
XdhMap
}
}
```
## 与MyUI结合使用
### 安装
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
```sh
npm i @xdh/my --save
```
### 快速上手
可通过以下两种使用 `My`
#### 一、采用项目工程模板创建项目【推荐】
官网提供的基于Vue项目的一站式解决方案。
```sh
git clone https://gitee.com/newgateway/my-web.git
```
只需把工程模板项目获取下来就可以使用,包括全部功能,开箱即用。
#### 二、调用组件库功能
如只需用到 `My` 其中的某些组件,可以在已有的项目工程中安装,并完成配置。步骤:
##### 1、安装组件库和相关插件
安装组件
```sh
npm i element-ui @xdh/my --save
```
安装项目依赖插件
```sh
npm i babel-plugin-component node-sass sass-loader --save-dev
```
##### 2、配置 `babel.config.js`
组件采用了按需加载,需要 在`babel.config.js` 加上插件,如:
```js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
...require('@xdh/my/core/babel.plugins')
]
}
```
##### 3、配置 `vue.config.js`
需要在`vue.config.js`加上别名,如:
```js
module.exports = {
transpileDependencies: ['@xdh/my'],
chainWebpack(chain) {
chain.resolve.alias.set('$ui', '@xdh/my/ui/lib')
}
}
```
##### 4、引用组件
到此,你可以开始引入组件开始编码了,如:
```html
<template>
<my-map></my-map>
</template>
<script>
import {MyMap} from '$ui/map'
export default {
components: {
MyMap
}
}
</script>
```
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
xdh-map新德汇地图应用类库 v2.0.2.zip (64个子文件)
说明.htm 4KB
xdh-map-2.0.2
.editorconfig 121B
lib
xdhmap.umd.min.js 689KB
xdhmap.umd.js 2.57MB
xdhmap.common.js 2.57MB
img
TDT.84462542.png 6KB
arrow.eb0ebca0.svg 487B
demo.html 176B
xdhmap.css 36KB
fonts
element-icons.535877f5.woff 28KB
element-icons.732389de.ttf 55KB
babel.config.js 136B
src
App.vue 360B
assets
logo.png 7KB
main.js 265B
components
map.vue 125B
index.js 4KB
views
.keep 0B
router.js 238B
LICENSE 1KB
package.json 2KB
sources
preview
ChinaOnlineStreetPurplishBlue.png 20KB
ChinaOnlineStreetWarm.png 20KB
Baidu.png 6KB
Amap.png 6KB
TDT.png 6KB
OSM.png 7KB
ChinaOnlineCommunity.png 37KB
ChinaOnlineStreetGray.png 45KB
ChinaOnlineCommunityENG.png 42KB
pin
purple.png 3KB
lightGreen.png 3KB
green.png 3KB
orange.png 3KB
blue.png 3KB
skyBlue.png 3KB
lightRed.png 3KB
cyan.png 3KB
red.png 3KB
gold.png 3KB
brightRed.png 3KB
black.png 2KB
arrows
plane.svg 831B
car.png 16KB
arrow.svg 487B
marker
purple.png 4KB
lightGreen.png 3KB
orange.png 3KB
blue.png 3KB
skyBlue.png 3KB
fiery.png 3KB
cyan.png 3KB
red.png 3KB
gold.png 3KB
brightRed.png 3KB
black.png 3KB
public
favicon.ico 4KB
index.html 611B
build
copy.js 205B
package-lock.json 532KB
.npmignore 274B
vue.config.js 171B
.gitignore 231B
README.md 3KB
共 64 条
- 1
资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功