devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：从前慢现在也慢 | 2024-02-18 19:17:23

赞

踩

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

  • 1
  1. 在要使用地图的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'

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. 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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  1. 创建地图，完整代码如下：
<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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  1. 效果图如下所示

在这里插入图片描述
6. 注意事项

  • 直接使用后地图上的控件图标会丢失，比如上图中的放大缩小按钮，可以打开控制台查看丢失的图标路径，我的项目是直接在index.html同级目录下添加theme文件夹。如下图所示：
    在这里插入图片描述
  • theme文件夹可以直接从supermap官网提供的示例代码中找到，懒得找的话直接在我上传的资源中下载即可（但是现在csdn下载资源所需积分都是系统自动设定的，我本意只是想分享而已，实在让人郁闷=。=，勤劳的童鞋还是自己去官网找找吧）点此下载
本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号