1. Project Overview

Xindehui Map Application Component Library

A Vue component library for map applications based on OpenLayers. It includes built-in Baidu, Amap, and Tianditu map tiles, and supports integration with PGIS providers such as Founder, SuperMap, Shanhaijingwei, and Aerospace Jingyi. It includes 20 components for text, graphics, HTML, heatmaps, trajectory playback, and more. It also supports integration with ECharts to create location-based charts such as scatter plots and flight migration maps, meeting common project requirements. Users do not need professional knowledge of maps or even need to write any JS code to implement common features.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

Preview

4. Feature Overview

A Vue component library for map applications based on OpenLayers. It includes built-in Baidu, Amap, and Tianditu map tiles, and supports integration with PGIS providers such as Founder, SuperMap, Shanhaijingwei, and Aerospace Jingyi. It includes 20 components for text, graphics, HTML, heatmaps, trajectory playback, and more. It also supports integration with ECharts to create location-based charts such as scatter plots and flight migration maps, meeting common project requirements. Users do not need professional knowledge of maps or even need to write any JS code to implement common features.

5. Tech Stack

Standalone Import

Installation

npm i xdh-map --save

Global Import

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

Local Component Registration

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

Use with MyUI

Installation

We recommend installing via npm, as it works better with the webpack bundler.

npm i @xdh/my --save

Quick start

You can use it in the following two ways:My

1. Create a Project Using the Project Template [Recommended]

An all-in-one solution based on Vue projects, provided by the official website.

Visit Exmay Open Source: [https://code.exmay.com/ Download](https://code.exmay.com/\ Download)

Simply obtain the project template to start using it. All features are included and ready to use out of the box.

2. Use the Component Library

If you only need to use My some of its components, you can install and configure them in an existing project. Steps:

1. Install the Component Library and Related Plugins

Install the Component

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

Install Project Dependency Plugins

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

2. Configure babel.config.js

The components support on-demand loading. You need to add the plugin tobabel.config.js , as shown below:

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

3. Configure vue.config.js

You need to add an alias tovue.config.js, as shown below:

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

4. Import the Component

You can now start importing components and writing code, for example:

<template>
  <my-map></my-map>
</template>

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