基于Vue快速搭建超图二维iClient开发环境
作者:lly一、背景 最近很多小伙伴咨询关于基于Vue框架搭建iClent开发环境的问题,今天我们就以iClient for Leaflet为例,来聊聊如何快速搭建超图二维JS开发环境。二、配置准备1.首先需要安装node.js,可参考以下文章安装步骤及配置2.配置完node.js后,注册淘宝镜像,提高下载速度npm install -g cnpm --registry=ht
作者:lly
一、背景
最近很多小伙伴咨询关于基于Vue框架搭建iClent开发环境的问题,今天我们就以iClient for Leaflet为例,来聊聊如何快速搭建超图二维JS开发环境。
【注意事项】许多用户在根据开发指南按需引入 iClient for Leaflet 后,若想全模块引入时,可能会遇到以下报错:TypeError: Cannot read properties of undefined (reading ‘tiledMapLayer’),这通常是由于按需引入时的 .babelrc 配置影响了全模块引入的使用。若出现此情况,请移除 .babelrc 中的以下配置,以恢复全模块引入的正常使用。
{
"plugins": [
[
"@supermapgis/babel-plugin-import",
{
"libraryName": "@supermapgis/iclient-leaflet"
}
]
]
}
注:本文基于"@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进行使用。
更多推荐
所有评论(0)