SuperMap Vue-iClient地图

安装npm

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm install @supermap/vue-iclient

引入 Vue-iClient

在 main.js 中写入以下内容：

import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient';
import App from './App.vue';

Vue.use(VueiClient);

new Vue({
  el: '#app',
  render: h => h(App)
});

加载 iPortal 地图

<sm-web-map server-url="http://support.supermap.com.cn:8092/" map-id="1649097980"></sm-web-map>

参数	说明	类型	可选值	默认值
mapId	iPortal	Online 地图 ID	number	-
serverUrl	SuperMap iPortal/Online 服务器地址	string	-	https://www.supermapol.com
accessToken	用于访问 SuperMap iPortal 、SuperMap Online 中受保护的服务	string	-	-
accessKey	SuperMap iServer 提供的一种基于 Token（令牌）的用户身份验证机制	string	-	-
tiandituKey	用于访问天地图的服务	string	-	-
withCredentials	请求是否携带 cookie	boolean	-	false
excludePortalProxyUrl	server 传递过来的 URL 是否带有代理	boolean	-	false
autoresize	用来指定 webMap 实例在组件根元素尺寸变化时是否需要自动进行重绘	boolean	-	true

 加载 iServer 地图

<sm-web-map :map-options="mapOptions"></sm-web-map>
<script>
export default {
  data() {
      return {
        mapOptions: {
            container: 'map', // container id
            style: {
              "version": 8,
              "sources": {
                "raster-tiles": {
                  "type": "raster",
                  "tiles": [
                    'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
                  ],
                  "tileSize": 256
                }
              },
              "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
              }]
            },
            center: [120.143, 30.236], // starting position
            zoom: 3 // starting zoom
          }
      };
}
</script>

Attributes

参数	说明	类型	可选值	默认值
mapOptions	MapboxGL map options 对象	object	-	-
autoresize	用来指定 webMap 实例在组件根元素尺寸变化时是否需要自动进行重绘	boolean	-	true

Events

name	说明	回调参数
load	Map 加载完成事件	-

 相关链接：安装 | Vue-iClientVue-iClienthttps://iclient.supermap.io/10.0.0/web/apis/vue/zh/api/guide/installation.html