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

1. 安装依赖包（有的网友直接引用的本地开发包也能使用，但我的项目中引用本地开发包报错）

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
 * 天地图服务图层类。
 *     用于显示天地图的地图服务，使用的
 *     构造函数可以创建天地图图层，更多信息查看：
 *
 * Inherits from:
 *  - 
 */
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 Tianditu",

    /**
     * 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:
     * {}  新的图层。
     */
    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 - {}
     */
    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

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

1. 效果图如下所示

6. 注意事项

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