在vue项目中使用supermap，基于 SuperMap iClient 8C(2017) for JavaScript，底图为天地图

1. 安装依赖包（有的网友直接引用的本地开发包也能使用，但我的项目中引用本地开发包报错）【本项目安装的@supermap/iclient-classic版本是9.1.2】，如何安装的是别的版本，引入依赖包中的文件名字略有不同，请自行更改！

npm install @supermap/iclient-classic

2. 在要使用地图的vue文件中引入js文件（注意引入顺序！！）

//以下两个js文件引用的是依赖包中的文件
import '@supermap/iclient-classic/libs/SuperMap-8.1.1-17226'
import '@supermap/iclient-classic/libs/SuperMap_Plot-8.1.1-17226'

//Tianditu.js是本地项目中的文件，@是src目录别名
import '@/supermap/js/Tianditu.js'

3. Tianditu.js文件可以从supermap官网下载的示例代码中找到，不过引入到项目中时需要做些修改，我改好的Tianditu.js文件代码如下，可以直接复制粘贴使用。

/**
 * @requires SuperMap/Layer/CanvasLayer.js
 * @requires SuperMap/Layer/Grid.js
 * @requires SuperMap/Tile/Image.js
 */

/**
 * Class: SuperMap.Layer.Tianditu
 * 天地图服务图层类。
 *     用于显示天地图的地图服务，使用<SuperMap.Layer.Tianditu>的
 *     构造函数可以创建天地图图层，更多信息查看：
 *
 * Inherits from:
 *  - <SuperMap.Layer.CanvasLayer>
 */
SuperMap.Layer.Tianditu = SuperMap.Class(SuperMap.CanvasLayer, {

    /**
     * APIProperty: layerType
     * {String} 图层类型.(vec:矢量图层，img:影像图层，ter:地形图层)
     */
    layerType:"vec",    //(vec:矢量图层，cva:矢量标签图层，img:影像图层,cia:影像标签图层，ter:地形,cta:地形标签图层)

    /**
     * APIProperty: isLabel
     * {Boolean} 是否是标签图层.
     */
    isLabel:false,

    /**
     * Property: attribution
     * {String} The layer attribution.
     */
    attribution: "Data by <a style='white-space: nowrap' target='_blank' href='http://www.tianditu.com'>Tianditu</a>",

    /**
     * Property: url
     * {String} 图片url.
     */
    url:"http://t${num}.tianditu.com/DataServer?T=${type}_${proj}&x=${x}&y=${y}&l=${z}&tk=28b495e4df789d971d2ae77b01a55a55",

    //cva_url:"http://t${num}.tianditu.com/DataServer?T=cva_${proj}&x=${x}&y=${y}&l=${z}",

    /**
     * Property: zOffset
     * {Number} 图片url中z值偏移量
     */
    zOffset:1,

    /**
     * APIProperty: dpi
     * {Float} 屏幕上每英寸包含像素点的个数。
     * 该参数结合图层比例尺可以推算出该比例尺下图层的分辨率.默认为96。
     */
    dpi: 96,

    /**
     * Constructor: SuperMap.Layer.Tianditu
     * 创建天地图图层
     *
     * Example:
     * (code)
     * var tiandituLayer = new SuperMap.Layer.Tianditu();
     * (end)
     */
    initialize: function (options) {
        var me = this;
        me.name = "天地图";

//        options = SuperMap.Util.extend({
//            maxExtent: new SuperMap.Bounds(
//                minX, minY, maxX, maxY
//            ),
//            tileOrigin:new SuperMap.LonLat(minX, maxY),
//            //maxResolution:maxResolution,
//            //minResolution:minResolution,
//            resolutions:resolutions,
//            units:me.units,
//            projection:me.projection
//        }, options);
        SuperMap.CanvasLayer.prototype.initialize.apply(me, [me.name, me.url, null, options]);
    },

    /**
     * APIMethod: clone
     * 创建当前图层的副本。
     *
     * Parameters:
     * obj - {Object}
     *
     * Returns:
     * {<SuperMap.Layer.Tianditu>}  新的图层。
     */
    clone: function (obj) {
        var me = this;
        if (obj == null) {
            obj = new SuperMap.Layer.Tianditu(
                me.name, me.url, me.params, me.getOptions());
        }

        obj = SuperMap.CanvasLayer.prototype.clone.apply(me, [obj]);
        obj._timeoutId = null;

        return obj;
    },

    /**
     * Method: getTileUrl
     * 获取每个tile的图片url
     *
     * Parameters:
     * xyz - {Object}
     */
    getTileUrl:function(xyz){
        var me = this;

        var proj = this.projection;
        if(proj.getCode){
            proj = proj.getCode();
        }

        if(proj=="EPSG:4326"){
            var proj = "c"
        }
        else{
            var proj = "w";
        }

        var x = xyz.x;
        var y = xyz.y;

        var z = xyz.z+me.zOffset;
        var num = Math.abs((xyz.x + xyz.y) % 7);

        var lt = this.layerType;
        if(this.isLabel){
            if(this.layerType=="vec")lt="cva"
            if(this.layerType=="img")lt="cia"
            if(this.layerType=="ter")lt="cta"
        }

        var url = SuperMap.String.format(me.url, {
            num: num,
            x: x,
            y: y,
            z: z,
            proj:proj,
            type:lt
        });
        return url;
    },

    /**
     * Method: setMap
     * Set the map property for the layer. This is done through an accessor
     *     so that subclasses can override this and take special action once
     *     they have their map variable set.
     *
     *     Here we take care to bring over any of the necessary default
     *     properties from the map.
     *
     * Parameters:
     * map - {<SuperMap.Map>}
     */
    setMap: function(map) {
        SuperMap.CanvasLayer.prototype.setMap.apply(this, [map]);
        var proCode = null;
        var proj = this.projection||map.projection;
        if(proj){
            if(proj.getCode){
                proCode = proj.getCode();
            }
            else{
                proCode = proj;
            }
        }
        this.setTiandituParam(proCode);
    },

    /**
     * Method: setTiandituParam
     * 设置出图相关参数
     *
     * Parameters:
     * projection - {String} 投影坐标系
     */
    setTiandituParam:function(projection){
        var lt = this.layerType;
        if(lt=="vec"){
            var resLen = 18;
            var resStart = 0;
            this.zOffset = 1;
            this.numZoomLevels = 18;
        }
        else if(lt=="img"){
            var resLen = 17;
            var resStart = 0;
            this.zOffset = 1;
            this.numZoomLevels = 17;
        }
        else if(lt=="ter"){
            var resLen = 13;
            var resStart = 0;
            this.zOffset = 1;
            this.numZoomLevels = 13;
        }
        if(projection=="EPSG:4326"){
            var minX = -180;
            var minY = -90;
            var maxX= 180;
            var maxY= 90;

            //var maxResolution = 156543.0339;
            //var minResolution = 0.5971642833709717;

            var resolutions = [];
            for(var i=resStart;i<resLen;i++){
                resolutions.push(1.40625/2/Math.pow(2,i));
            }

            this.units = "degree";
            this.projection = new SuperMap.Projection("EPSG:4326");

            this.maxExtent=new SuperMap.Bounds(
                minX, minY, maxX, maxY
            );
            this.tileOrigin = new SuperMap.LonLat(minX, maxY);
            this.resolutions = resolutions;
        }
        else{
            var minX = -20037508.3392;
            var minY = -20037508.3392;
            var maxX= 20037508.3392;
            var maxY= 20037508.3392;

            //var maxResolution = 156543.0339;
            //var minResolution = 0.5971642833709717;

            var resolutions = [];
            for(var i=resStart;i<resLen;i++){
                resolutions.push(156543.0339/2/Math.pow(2,i));
            }
            //this.numZoomLevels = 18;

            this.units = "m";
            this.projection = new SuperMap.Projection("EPSG:3857");

            this.maxExtent=new SuperMap.Bounds(
                minX, minY, maxX, maxY
            );
            this.tileOrigin = new SuperMap.LonLat(minX, maxY);
            this.resolutions = resolutions;
        }
    },

    CLASS_NAME: 'SuperMap.Layer.Tianditu'
});

export default SuperMap.Layer.Tianditu

4. 创建地图，完整代码如下：

<template>
    <div id="mymap" style="width:600px; height:500px;"></div>
</template>

<script>
    import '@supermap/iclient-classic/libs/SuperMap-8.1.1-17226'
	import '@supermap/iclient-classic/libs/SuperMap_Plot-8.1.1-17226'
	import '@/supermap/js/Tianditu.js'
    export default {
        name: "supermap",
        data(){
            return{
                Map:null
            }
        },
        mounted(){
            this.init();
        },
        methods:{
            init(){
                this.Map = new SuperMap.Map("mymap", {
                    controls: [
                        new SuperMap.Control.Navigation(),
                        new SuperMap.Control.Zoom(),
                        new SuperMap.Control.ScaleLine(),
                        new SuperMap.Control.MousePosition(),
                        new SuperMap.Control.LayerSwitcher()   //勾选图层选择框
                    ],
                    allOverlays: true
                });
                let tiandituLayer = new SuperMap.Layer.Tianditu();
                let tianMarkerLayer = new SuperMap.Layer.Tianditu();
                tianMarkerLayer.layerType = "cva";
                tianMarkerLayer.isLabel = true;
                this.Map.addLayers([tiandituLayer,tianMarkerLayer]);
                this.Map.setCenter(new SuperMap.LonLat(115.93171,28.68589),12);
            }
        }
    }
</script>

<style scoped>
</style>

1. 效果图如下所示

6. 注意事项

• 直接使用后地图上的控件图标会丢失，比如上图中的放大缩小按钮，可以打开控制台查看丢失的图标路径，我的项目是直接在index.html同级目录下添加theme文件夹。如下图所示：
  
• theme文件夹可以直接从supermap官网提供的示例代码中找到，懒得找的话直接在我上传的资源中下载即可（但是现在csdn下载资源所需积分都是系统自动设定的，我本意只是想分享而已，实在让人郁闷=。=，勤劳的童鞋还是自己去官网找找吧）点此下载