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

supermapsupport

已于 2022-08-12 15:26:43 修改

阅读量6.8k

点赞数 5

分类专栏： WebGIS 文章标签： javascript

于 2020-10-26 17:32:47 首次发布

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.csdn.net/supermapsupport/article/details/109294147

版权

WebGIS 专栏收录该内容

136 篇文章 29 订阅

订阅专栏

作者: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进行使用。

supermapsupport

关注

5
点赞
踩
25

收藏

觉得还不错? 一键收藏
21
评论
基于Vue快速搭建超图二维iClient开发环境

作者:lly一、背景  最近很多小伙伴咨询关于基于Vue框架搭建iClent开发环境的问题，今天我们就以iClient for Leaflet为例，来聊聊如何快速搭建超图二维JS开发环境。二、配置准备1.首先需要安装node.js,可参考以下文章安装步骤及配置2.配置完node.js后，注册淘宝镜像，提高下载速度npm install -g cnpm --registry=https://registry.npm.taobao.org3.安装Vue CLIcnpm .
复制链接

扫一扫

专栏目录