vue3 接入 SuperMapSuperMap 官网给我们的都是 js 还有一些 webpack 的引入方式，并没有最

SuperMap

官方文档 iclient.supermap.io/web/introdu… 官方网站 iclient.supermap.io/ 官网给我们的都是 js 还有一些 webpack 的引入方式，并没有最新的 vite 如何导入，接下来我们看一下 vue3 + vite 如何导入呢

搭建流程（vite）

引入 css ，主要就是这两个 link

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.png" />
    <link
      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css"
      rel="stylesheet"
    />
    <link
      href="https://iclient.supermap.io/dist/ol/iclient-ol.min.css"
      rel="stylesheet"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>尚管理系统</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

安装依赖

npm install @supermap/iclient-ol -D

我之前导入一直报错，因为我项目本身使用了 echarts ，而 @supermap/iclient-ol 并没有使用最新版的 echarts ，所以我们需要降低版本

把 echarts 版本降到 4.9.0 然后还需要安装这两个依赖到 dev 中

"events": "^3.3.0",
"util": "^0.12.4",

接下来我看调整一下 vite 的配置

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
// el 的按需引入配置
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";


// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [
    vue(),
    // 按需导入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  //这里为了supermap编译添加了配置
  define: {
    "process.env": {},
  },
  resolve: {
    // 设置路径别名
    alias: {
      "@": resolve(__dirname, "./src"),
      "*": resolve(""),
    },
  },
});

这里面其他的配置大家可以自行搭建，需要注意的是 define 这个配置~

接下来我们在 js 代码中导入，打印查看是否成功~

<template>
  <h3>gis系统</h3>
  <div id="map" class="map_container"></div>
</template>
<script>
import { ref, defineComponent, onMounted } from "vue";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import * as control from "ol/control";
import { Logo, TileSuperMapRest } from "@supermap/iclient-ol";


export default defineComponent({
  setup() {
    const count = ref(0);
    onMounted(() => {
      var url =
        "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
      var map = new Map({
        target: "map",
        view: new View({
          center: [0, 0],
          zoom: 2,
          projection: "EPSG:4326",
        }),
      });
      var layer = new TileLayer({
        source: new TileSuperMapRest({
          url: url,
          wrapX: true,
        }),
        projection: "EPSG:4326",
      });
      map.addLayer(layer);
    });
    return {
      count,
    };
  },
});
</script>
<style>
.map_container {
  height: 800px;
}
</style>

地图初始化的效果如下：