Question

重新整理了下我的排错历程：

本人开发环境Vue3，Vite版本4.4.4，IDE是最新版WebStorm 2023.2.1 我参考了以下两片文档：

官方代码示例：https://iclient.supermap.io/web/introduction/openlayersDevelop.html#Ready 、

民间排坑指南：https://blog.csdn.net/supermapsupport/article/details/130778845

配置步骤如下：

1）先npm install了两个必须包 npm install @supermap/iclient-ol npm install @supermap/babel-plugin-import -D

2）在index.html中加了两行

<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'/>

3）在package.json中的devDependencies段加上了 "events": "^3.3.0", "util": "^0.12.4"

4）在vite.config.js中加上了

  define: {
    'process.env': {},
  }

5）对整个工程npm install

6）然后按官方文档写最简单的例子

<template>
  <div id="gisMap"></div>
</template>

<script setup lang="tsx">
import { onMounted } from 'vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import { TileSuperMapRest } from '@supermap/iclient-ol'

onMounted(() => {
  loadMap()
})

const loadMap = () => {
  const url = 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World';
  const map = new Map({
    target: 'gisMap',
    view: new View({
      center: [106.86, 39.71],
      zoom: 5,
      projection: 'EPSG:4326'
    })
  })
  const layer = new TileLayer({
    source: new TileSuperMapRest({
      url: url,
      wrapX: true
    })
    // projection: 'EPSG:4326'
  })
  map.addLayer(layer)
}
</script>

7）然后在WebStorm中run dev运行，结果浏览器报
_stream_writeable.js里的这一行 var asyncWrite = !process.browser && ['v0.10', 'v0.9.'].indexOf(process.version.slice(0, 5)) > -1 ?

中process.version找不到，于是npm install process，并在index.html加入如下行将此包引入全局（因为调用处是全局调用）

<script type="module">
  import process from 'process';
  window.process = process;
</script>

这个问题解决

8）于是到了我目前卡住的地方，浏览器报os.platform is not a function

我排查了下，发现os.platform是ElasticSearch里Transport.js调用的，而SuperMap依赖ElasticSearch

os这个库是node的核心库，readme写明不需要npm install，但不知道为何会找不到os.platform

Answer 1

你好，请问初始化vue和引入 @supermap/iclient-ol是否成功呢，报错的话如下才需如下：

vite +vue 引入iclient for ol建议参考博客或者下载文末的工程文件，在本地运行一下看是否正常https://blog.csdn.net/supermapsupport/article/details/130778845

Comments

我有了一些进展，发现浏览器报slice错误，是因为process包需要额外install，当我npm install process，另外按网友的办法在index.html里加上了

<script type="module">
  import process from 'process';
  window.process = process;
</script>

slice的问题解决了，但随之又出现了新的问题，浏览器报错：os.platform is not a function

我排查了下，发现os.platform是elasticsearch里某个js调用的，而supermap依赖elasticSearch

os这个库是node的核心库，readme写明不需要npm install，但不知道为何会找不到os.platform

---

初始化vue和引入 @supermap/iclient-ol是否成功？

是的，我的测试代码里

import { ref, onMounted } from 'vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import * as control from 'ol/control'
import { Logo, TileSuperMapRest } from '@supermap/iclient-ol'

以上都是对的，但在调用

const url = 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World';
const map = new Map({
  target: 'gisMap',
  controls: control.defaults({ attributionOptions: { collapsed: false } }).extend([new Logo()]),
  view: new View({
    center: [106.86, 39.71],
    zoom: 5,
    projection: 'EPSG:4326'
  })
})

这些代码时，就报了我以上描述的那些错误

---

根据代码是同时引入了原生openlayer和超图的iclient fo ol吗？

建议不要在一个项目中同时引入iclient for ol 和原生的ol。虽然iclient for ol是基于原生ol开发的，但有部分接口或者代码超图已经在底层做了修改。