CMGIS-SDK学习，总结。

addImage

addSource(id, source)
向地图样式中添加一个新的数据源。

GeoJson 是常用的地理数据规范，Mapbox 将它作为 Source（索尔是），而 Source 可以与 Layer 进行绑定，从而实现地图绘制

source提供地图数据，Mapbox GL JS 可以将这些数据与样式文档一起使用，以呈现该数据的可视化表示形式。通过此委托，可以以不同的方式设置同一源的样式，就像区分高速公路图层中不同类型道路的外观一样。
一个标准的GeoJson如下所示

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

最外层：

• type：“Feature”（非缺儿）表示一个特征要素，“FeatureCollection”（康来可行）表示为特征要素的集合
• geometry（急偶莫吹）：存储该特征要素的实际形状描述 properties：存储该要素的属性

geometry：
type：存储要素类型（Point(点),LineString,Polygon,MultiPoint(多点),MultiLineString(多线)和MultiPolygon(多面)）

coordinates：坐标（存储图形坐标）
properties（泊盆特死）：特性

获取中心坐标

 //获取地图中心坐标
        getcenter(){
            var center=this.Vmap.getCenter()
            console.log('中心坐标是',center);
        },

设置地图中心坐标

//设置地图中心坐标
setcenter(){
    this.Vmap.setCenter([104.05768272082054,30.595256362472213])
},

动态跳转到地图的指定位置

   flyto() {
        this.Vmap.flyTo({
            center: [104.05768272082054, 30.595256362472213],
            zoom: 9,//缩放
            duration: 900,//过度时间
            offset: [2, 5],
            easing(t) {
                return t;
            }
        });
    },

楼层切换组件使用

        <!-- 楼层切换组件 -->
        <div id="map-floor"></div>

     const SelectFloor = new creeper.FloorSelector(this.Vmap, {
            id: "map-floor", // 必传， 楼层组件存放的容器id ，div标签的id名称
            currentFloor: 0, //楼层 0是1楼  非必传默认是1楼
            displaySize: 8, //展示的数量  非必传默认是5个楼层信息
            displayZoom: 18, //显示的最小地图放大等级  非必传默认是18
            // displayZoom: 20, 
            onChange: (level) => {
                console.log(level); // 更改的楼层  1楼为0，-1楼为-1
                // this.SET_CURRENTFLOOR(level);
            }, // 变化的回调
        });

#map-floor {
    position: fixed;
    // right: 100px; // 已经调整好的值，不需要修改值
    // 侧栏默认展开展开的话，可以直接固定设置楼层切换组件位置. 否则需要更具侧栏展开状态设置楼层组件位置
    right: 54vh;
    bottom: 200px;
    transition: all 1s;

    .creeper-level-list {
        background-color: rgb(12, 30, 53);
        border: 1px solid rgb(11, 74, 94);
    }

    .creeper-level-item {
        color: rgb(98, 162, 235);
    }

    .creeper-current-level {
        background-color: rgb(4, 206, 220);
        color: #fff;
    }
}

Popup地图弹窗组件

    this.Vmap.on('click', function (e) {
        console.log('点击事件的经纬度', e.lngLat);

        // var markerHeight = 50, markerRadius = 10, linearOffset = 25;
        // var popupOffsets = {
        //     'top': [0, 0],
        //     'top-left': [0, 0],
        //     'top-right': [0, 0],
        //     'bottom': [0, -markerHeight],
        //     'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
        //     'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
        //     'left': [markerRadius, (markerHeight - markerRadius) * -1],
        //     'right': [-markerRadius, (markerHeight - markerRadius) * -1]
        // };
        //弹窗

        new creeper.Popup()
            .setLngLat(e.lngLat)
            .setHTML("<h1>Hello World!</h1>")
            .addTo(that.Vmap);
    })

marker

        setstart() {

            if (this.markerlist !== "") {
                for (let i = 0; i < this.markerlist.length; i++) {
                    this.markerlist[i].remove()
                }
                this.markerlist = []
            }

            let div = document.createElement("div");
            div.className = "studystatus-marker-wrap";
            div.innerHTML = `
            <div>起点</div>
        			`;
            this.start = new creeper.Marker({ element: div })
                .setLngLat(this.zuobiao)
                .addTo(this.Vmap);
        }