Vue+SuperMap iClient for Leaflet

一、开发环境说明

image.png

二、配置引入步骤（采用ES6 import方式）

1、安装依赖包

采用vue-cli3进行vue项目的初始化，根据 supermap官网步骤 引入 leaflet 以及 supermap iclient for leaflet 安装包

npm install leaflet

npm install @supermap/iclient-leaflet

说明：

@supermap/iclient-leaflet 截止文章最后修改时间是10.0.0的版本 所依赖的 leaflet 的版本是1.5.1
iclient-leaflet v9.1.2等9的版本依赖于 leaflet 1.3.1的版本

2、引入依赖包

在 vue项目的main.js中全局引入

...
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import '@supermap/iclient-leaflet'
...

Vue.use(L)
...

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

完成引入，接下来正常写代码即可。

三、存在的问题

1、IE兼容问题

（1）配置@babel/polyfill

安装 @babel/polyfill

npm i @babel/polyfill

在main.js中的最上方引入

import '@babel/polyfill'
import Vue from 'vue'
import App from './App.vue'
...

并在babel.config.js文件中配置如下

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

如果是vue-cli2.0的项目，则在webpack.config.js中添加如下配置

module.exports = {
  entry: ['babel-polyfill', './src/main.js'],
}

（2）配置 babel-loader

因为采用的是es6的 module 引入方式，ie会不兼容，需要通过babel-loader进行转化，
安装babel-loader

npm i babel-loader

在vue工程的根目录新建一个文件 vue.config.js，配置参考 官方api

transpileDependencies.png
添加配置transpileDependencies，将 node_modules 下supermap的包名写进去
其中 @supermap/iclient-leaflet 依赖了 @supermap/iclient-common 所以都要写进去，配置如下

module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production',
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
  productionSourceMap: false,
  transpileDependencies: [
    '@supermap/iclient-common',
    '@supermap/iclient-leaflet'
  ],
  devServer: {
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // 端口配置
    proxy: {}
  }
}

如果是vue-cli2.0的项目，则在webpack.config.js中添加如下配置
参考：iClient for Leafet 开发指南

// 用 npm install 或者 cnpm install --by=npm 安装的依赖
module: {
    rules: [{
        // 使用babel-loader将ES6语法转换为ES5
        test: /\.js$/,
        include: [
            path.resolve(__dirname, "node_modules/@supermap/iclient-common"),
            path.resolve(__dirname, "node_modules/@supermap/iclient-leaflet"),
            // 由于iClient对Elasticsearch的API进行了封装而Elasticsearch也使用了ES6的语法
            path.resolve(__dirname, "node_modules/elasticsearch"),
        ],
        loader: 'babel-loader',
        options: {
            presets: ['env']
        }
    }]
}

// 若您用 cnpm install 安装的依赖
module: {
    rules: [{
        // 使用babel-loader将ES6语法转换为ES5
        test: /\.js$/,
        include: [
            path.resolve(__dirname, "node_modules/_@supermap_iclient-common@10.0.0@@supermap/iclient-common"),
            path.resolve(__dirname, "node_modules/_@supermap_iclient-leaflet@10.0.0@@supermap/iclient-leaflet"),
            // 由于iClient对Elasticsearch的API进行了封装而Elasticsearch也使用了ES6的语法
            path.resolve(__dirname, "node_modules/_elasticsearch@13.0.1@elasticsearch"),
        ],
        loader: 'babel-loader',
        options: {
            presets: ['env']
        }
    }]
}