vue加载supermap iclcent-ol （iclient for openlayer）_@supermap/iclient-ol

tip：2022.11.18更新

        发现大家对这个需求还是蛮大的，特意回来整理一下，前面格式有点乱，方便大伙快速定位自己所需要的。

 说在前面：

        相信能找到这里的，基本的安装下包等等操作是没有问题的，所以先把特别需要注意的点讲一下，大部分人都踩了这个坑。

请不要同时安装iclient-ol和ol

          为什么不同时安装？       

           iclient-ol是超图对ol的封装，对ol库进行了超图数据源的适配，是基于百分之九十ol库基座的封装地图库，所以iclient-ol自带ol，再说的直白一些，安装iclient-ol，node_module里面会同时有ol文件夹以及iclient-ol超图资源文件夹。

         同时安装为什么不行？

           因为iclient-ol自带版本号，每一个库都自带版本号，并且一旦稳定后不会做更新，而iclient-ol的稳定版必然是基于ol的某一个稳定版，也对应一个版本号，这个版本号会在iclient-ol库的lock锁文件中进行锁定。如果你再装一个ol，一般人装库都是yarn add ol，这样装的都是最新版，所以版本不一致起冲突。

具体操作步骤

1.环境准备

我的环境是：

• vuecli-3x 也就是  vue create projectname方式
• 包管理工具是yarn  yarn add  xxx
• webpack 5+(这个关系到后面的一个包)

如果你和我的不一样也无妨，这一点也不重要，我说的！

2.安装@supermap/iclient-ol

yarn add  @supermap/iclient-ol

3.引入polyfill库解析语法

        这一步请取舍，取决于你的webpack版本，webpack5+请执行下面命令，不是webpack5+的不用装哈，webpack5+的如果不装会报错

        因为webpack5以后走轻量路线了朋友们，隔壁的vite太猛了，导致webpack危机感不是一点点，也走轻量路线，取消了nodejs核心模块的polyfill自动引入，所以需要手动引入。

yarn add node-polyfill-webpack-plugin -D

4.引入超图样式

在写之前在index.html加一下样式

  <link href='https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css'
    rel='stylesheet' />
 
  <link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />

5.测试代码

        代码直接贴上

        这里简单提一下ol的引入方式，有的小伙伴会对iclient-ol的按需导入有些疑问，其实完全不需要，ol的内容该怎么引入照旧，上面说了，装了iclient-ol等同于装了ol以及附加一个超图库（一些数据源适配对接）。以下面代码为例， 加载切片地图仍然是用new TileLayer的写法，但是source就有所变化，不再是ol带的ol.source.Tile，而是TileSuperMapRest，这里看似是新类，其实只是简单地对ol.source.Tile类进行超图切片信息适配封装，感兴趣的可以去看看源码，不知道在哪里或者说不知道怎么看的可以留言或者私信我。

<template>
  <div id="map"></div>
</template>
 
<script>
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 {
  mounted() {
    var url =
      "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
    var map = new Map({
      target: "map",
      controls: control
        .defaults({ attributionOptions: { collapsed: false } })
        .extend([new Logo()]),
      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);
  },
};
</script>
 
<style>
#map{
  height: 100%;
}
</style>

        最后希望国产GIS能越做越好，一枚成长型GISer，对supermap接触较多，有问题可以多提问多交流。