vue-iclient-leaflet

vue-iclient-leaflet是依赖于@vue-leaflet/vue-leaflet和@supermap/iclient-leaflet库对leaflet的扩展的vue3的库。

安装

yarn add leaflet @vue-leaflet/vue-leaflet @supermap/iclient-leaflet
yarn add -D @types/leaflet

or

npm i leaflet @vue-leaflet/vue-leaflet @supermap/iclient-leaflet
npm i -D @types/leaflet

扩展图层

SmTileLayer：超图rest服务的支持

ImTileLayer：高德、腾讯的wmts服务的支持

Quickstart

<template>
  <l-map ref="map" v-model:zoom="zoom" :center="center" :options="options">
    <sm-tile-layer :url="layerURL"></sm-tile-layer>
  </l-map>
</template>
<script setup lang="ts">
import { LMap } from "@vue-leaflet/vue-leaflet";
import type { PointExpression } from "leaflet";
import L from "leaflet";
import { ref } from "vue";

import { SmTileLayer } from "@src/components";

const zoom = ref(2);

const center = [47.41322, -1.219482] as PointExpression;
const layerURL =
  "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";

const options = {
  crs: L.CRS.EPSG4326,
  center: [0, 0],
  maxZoom: 18,
  zoom: 1,
};
</script>

其它

参考文档

vue-leaflet

SuperMap iClient for Leaflet

vite下cdn引入

import importToCDN from 'vite-plugin-cdn-import'

export default () => {
  return importToCDN({
    prodUrl: '//unpkg.com/{name}@{version}/{path}',
    modules: [
      'vue',
      {
        name: 'leaflet',
        var: 'L',
        path: 'dist/leaflet.js',
        css: 'dist/leaflet.css'
      },
      {
        // @ts-ignore
        // prodUrl: 'https://iclient.supermap.io/dist/leaflet/{path}',
        name: '@supermap/iclient-leaflet',
        var: 'L.supermap',
        path: ['dist/iclient-leaflet-es6.min.js'],
        css: 'dist/iclient-leaflet.min.css'
      },
      {
        name: '@vue-leaflet/vue-leaflet',
        var: 'globalThis["vue-leaflet"]',
        path: 'http://172.18.218.166:8082/cdn/vue-leaflet/dist/vue-leaflet.umd.js',
        css: ''
      },
      {
        name: '@lutuo/vue-iclient-leaflet',
        var: 'globalThis["vue-iclient-leaflet"]',
        path: 'http://172.18.218.166:8082/cdn/vue-iclient-leaflet/dist/vue-iclient-leaflet.umd.js',
        css: ''
      }
    ]
  })
}

es6环境下使用SuperMap iClient for Leaflet

需要配置编译插件

首先，安装 @supermap/babel-plugin-import：

npm install @supermap/babel-plugin-import -D 然后，在 .babelrc中添加如下配置：

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