基于Vue快速搭建超图二维iClient开发环境

作者:lly

一、背景

  最近很多小伙伴咨询关于基于Vue框架搭建iClent开发环境的问题,今天我们就以iClient for Leaflet为例,来聊聊如何快速搭建超图二维JS开发环境,由于11i版本更新,如需使用ES6语法,添加配置项后,只支持按需引入,否则会报 TypeError: Cannot read properties of undefined (reading ‘tiledMapLayer’)的错误。
注:本文于2022.8.12更新,基于"@supermap/iclient-leaflet": "^11.0.0"测试,其余版本请以官网开发指南为准

二、配置准备

1.首先需要安装node.js,可参考以下文章安装步骤及配置

2.配置完node.js后,注册淘宝镜像,提高下载速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装Vue CLI

cnpm install -g @vue/cli

4.创建一个项目

vue create leafletdemo

5.项目创建完后使用开发工具打开项目,我这里使用WebStorm为例

6.运行项目,看到以下页面证明基本项目搭建成功
在这里插入图片描述

三、模块化引入iClient

1.首先前往iClient 官网

2.在导航栏找到Leaflet,鼠标移动上去下拉菜单点击开发指南
在这里插入图片描述

3.进入后,找到npm方式引入,并在开发工具的Terminal中安装相应模块
在这里插入图片描述
:该引入方式为拉取最新包,文章测试为11.0.0版本,如为更新版本,请以开发指南为准。
4.安装完成后,我们可以在node_modules中看到@supermap的目录
在这里插入图片描述
5.进行ES6配置
首先,安装 @supermap/babel-plugin-import

npm install @supermap/babel-plugin-import -D

然后,在.babelrc或babel.config.js中添加如下配置:

{
  "plugins": [
    ["@supermap/babel-plugin-import",
      {
      "libraryName": "@supermap/iclient-leaflet"
      }
    ]
  ]
}

6.我们找到入口页面index.html,以CDN方式引入css样式文件,地址可在开发指南中查找;设置body样式,并删除模板中无用的标签,注引入css文件会随版本更新,请以官网开发指南中为准

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
  <link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" />
</head>
<body style="margin: 0;padding: 0;">
<div id="app"></div>
</body>
</html>

7.在componets文件夹中新建一个vue文件,并在模板中创建一个div标签

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

8.设置style样式

<style scoped>
  #map {
    margin: 0;
    overflow: hidden;
    background: #fff;
    width: 100%;
    height:100%;
    position: absolute;
  }
</style>

9.引入相应模块,这里我们进行按需引入

import L from 'leaflet';
import {TiledMapLayer} from '@supermap/iclient-leaflet';

10.在mounted中创建地图容器并展示

var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
    crs: L.CRS.EPSG4326,
    center: [0, 0],
    maxZoom: 18,
    zoom: 1
});
var layer = new TiledMapLayer(url)
layer.addTo(map);

11.在App.vue中引入我们刚才创建的组件

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

12.直接在package.json中点击serve运行
在这里插入图片描述

13.在浏览器查看运行结果
在这里插入图片描述

四、其它地图库

  针对iClient for MapboxGL与iClient for OpenLayers引入方式与Leaflet相同,只需替换css、引入模块及初始化代码即可;iClient for Classic 引入地址,安装后按照module中的README进行使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 14

打赏作者

supermapsupport

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值