首页 / 浏览问题 / WebGIS / 问题详情
Vue3配SuperMap OL报错,9.13更新
6EXP 2023年09月12日

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

本人开发环境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

1个回答

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

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

1,830EXP 2023年09月12日

我有了一些进展,发现浏览器报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开发的,但有部分接口或者代码超图已经在底层做了修改。
...