使用SuperMap iClient组件库实现引入地图以及地图标点

介绍
转载https://blog.youkuaiyun.com/supermapsupport/article/details/103892026

        SuperMap iClient产品从10i版本开始增加了组件库，组件库在架构设计上采用 MVVM 模式（Model-View-ViewModel），同时可以兼容多种框架，例如 Vue、React、Angular 以及原生 H5 开发。使用 SuperMap iClient 组件库，可像搭积木一样快速的创建自定义的 WebGIS 应用。组件库开箱即用，一键切换主题等功能极大的便利了开发。下面以Vue2和天地图作为代码演示。

开始使用 Vue-iClient-MapboxGL应用

1.  安装@supermap/vue-iclient-mapboxgl依赖

npm i @supermap/vue-iclient-mapboxgl@11.1.0

2. 在main.js中引入@supermap/vue-iclient-mapboxgl依赖

import VueClient from "@supermap/vue-iclient-mapboxgl";
Vue.use(VueClient);

3. 在组件中使用

<template>
  <div class="mapbox">
    <sm-web-map :map-options="mapOptions"></sm-web-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mapOptions: {
        center: [120.2916033381627, 30.310415668619314],
        zoom: 11,
        style: {
          version: 8,
          sources: {
            baseLayer: {
              type: "raster",
              tiles: [
                "https://t0.tianditu.gov.cn/img_w/wmts?tk=天地图的token&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}",
              ],
              tileSize: 256,
            },
            labelLayer: {
              type: "raster",
              tiles: [
                "https://t0.tianditu.gov.cn/cia_w/wmts?tk=天地图的token&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cia&tilematrix={z}&tilerow={y}&tilecol={x}",
              ],
              tileSize: 256,
            },
          },
          layers: [
            {
              id: "baseLayer",
              type: "raster",
              source: "baseLayer",
              minzoom: 0,
              maxzoom: 18,
            },
            {
              id: "labelLayer",
              type: "raster",
              source: "labelLayer",
              minzoom: 0,
              maxzoom: 18,
            },
          ],
        },
        renderWorldCopies: false,
      },
    };
  },
};
</script>

<style scoped>
.mapbox {
  width: 100vw;
  height: 100vh;
}
</style>

页面展示

代码解析: 

<sm-web-map :map-options="mapOptions"></sm-web-map>

Vue-iClient-MapboxGL提供的地图组件，其中map-options配置项是加载isServer地图。

mapOptions配置对象

mapOptions: {
  center: [120.2916033381627, 30.310415668619314], // 每次打开项目，地图显示的中心视角的经纬度
  zoom: 11, // 地图缩放级别
  style: {
    version: 8, // 版本
    sources: {
      baseLayer: { // 自定义命名
        type: "raster",
        tiles: [线上地图的地址], // 引入底图
        tileSize: 256,
      },
      labelLayer: { // 自定义命名
        type: "raster",
        tiles: [线上地图的地址],  // 引入影像标记图
        tileSize: 256,
      },
    },
    layers: [
     {
        id: "baseLayer", // 自定义命名
        type: "raster",
        source: "baseLayer", // 和sources里的对象名对应
        minzoom: 0, // 最小缩放级别
        maxzoom: 18, // 最大缩放级别
      },
      {
        id: "labelLayer",  // 自定义命名
        type: "raster",
        source: "labelLayer", // 和sources里的对象名对应
        minzoom: 0, // 最小缩放级别
        maxzoom: 18, // 最大缩放级别
      },
    ],
  },
  renderWorldCopies: false,
 },

4. 在地图中添加自定义标记点

<sm-web-map :map-options="mapOptions" @load="mapIsLoaded" ></sm-web-map>

添加load事件

    mapIsLoaded(e) {
      this.map = e.map;
      const arr = [
        {
          pos: [120.31254602614939, 30.355753126697905], // 点位生成的位置
          icon: require("../assets/多元化点位1.png"),  // 自定义icon图标
        },
        {
          pos: [120.28422189895099, 30.297225344129444],
          icon: require("../assets/多元化点位2.png"),
        },
        {
          pos: [120.33966852370816, 30.23480662084387],
          icon: require("../assets/多元化点位3.png"),
        },
      ];
      arr.forEach((item) => {
        this.creatImgPoint(item);
      });
    },


    creatImgPoint(obj) {
      const pointDom = document.createElement("div");  // 创建div
      pointDom.innerHTML = /*html*/ `<div class="simple-marker">  // 向div中添加内容
                    <div class="icon-box"><img class="icon" src="${obj.icon}"/></div>
                </div>`;
      // eslint-disable-next-line no-undef
      const marker = new mapboxgl.Marker({
        element: pointDom,  // 标记点依托的样式
      })
        .setLngLat(obj.pos) 
        .addTo(this.map);
      this.markers.push(marker);
    },

页面展示：