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

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

npm install @supermap/iclient-classic

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

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

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

<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>

效果图如下所示

6. 注意事项

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

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

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
Vue学习笔记（二）—— vue项目中使用axios
一.文档链接 axios文档 vue开发插件二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
svg图片在vue项目中的应用
svg图片在vue项目中的应用一.安装 svg-sprite-loader 插件 npm install svg-sprite-loader 二.基于 vue-cli2.x 项目 webpack 配 ...
TypeScript深度剖析:Vue项目中应用TypeScript？
一.前言与link类似在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-component库而来,这个库vue官 ...
如何在Vue项目中应用TypeScript？
一.前言在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, # npm 下载 npm i vue-property-decorator -s # ...
Vue项目中你是如何解决跨域的呢？
Vue项目中你是如何解决跨域的呢? 一.跨域是什么跨域本质是浏览器基于同源策略的一种安全手段同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能所谓同源( ...
在vue项目中使用echarts 阿星小栈
在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 安装echarts依赖 ...
Antv | G2-Plot图表在vue项目中的使用
什么是G2-Plot G2Plot 是一套简单.易用.并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,"G2Plot"中的 G2 即意指图形语法 (the Gr ...

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

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

最新文章

热门文章