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接触较多，有问题可以多提问多交流。

vue加载supermap iclcent-ol （iclient for openlayer）相关推荐

Vue 加载 SVG 图片文件
Vue 加载 SVG 图片文件 /svg/icons.js export default {// LOGOlogo: require('./logo.svg'),logo_content: requi ...
vue 加载image图片不显示解决
vue 加载image图片不显示解决------------写了个vue的demo(自己做一个表格,可以横向增加列也可以纵向增加行)想给demo加图片怎么都出不来,,,,,查图片太大?加载位置不对?配 ...
vue加载视频流，实现直播功能
文章目录前言一.视频流是什么? 二.vue加载rtmp视频流 1.方法一:video.js 2.方法二:ckplayer 三.vue加载hls视频流 1.index.html中 2.video-p ...
vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...
electron+vue加载本地wav音频资源失败
解决electron+vue加载本地音频失败 1.下载electron-vue程序 vue init simulatedgreg/electron my-project cd my-project n ...
vue加载服务器json文件,Vue加载json文件的方法简单示例
本文实例讲述了Vue加载json文件的方法.分享给大家供大家参考,具体如下: 一.在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版): ...
vue 加载页面时触发时间_解析Vue项目的四个方面优化
在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 运行时优化 1.使用v-if代替v ...
dom vue 加载完执行_前端面试题——Vue
前言前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articl ...
vue 加载体验优化
2019独角兽企业重金招聘Python工程师标准>>> 网络查询收集: 1.路由懒加载 // 需要ES6支持 const HelloWorld = () => import(' ...

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