Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

使用ESMap的地图平台开发三维地图

室内三维地图 2019-02-20 09:28:00 阅读数:364 评论数:0 点赞数:0 收藏数:0

 

本文简单的介绍使用ESmap的SDK开发(DIY自己地图的)一个地图的过程。若有不足,欢迎指正。

一、创建地图

只需四步,从无到有,在浏览器中创建一个自己的三维地图,炫酷到爆!

第一步:引入ESMap 的SDK

ESMap家的SDK目前不支持用require js引用,只能使用引用

第二部:创建一个地图容器

第三部:拷贝地图数据和主题数据到自己创建的工程目录中

我拷贝的路径为:根目录>data文件夹>地图数据文件/主题文件夹>主题文件

 

第四部:配置初始化参数varmap=newesmap.ESMap({

container:container,mapDataSrc: defaultOpt.mapDataUrl,//地图数据位置

mapThemeSrc: defaultOpt.mapThemeUrl,//主题数据位置token:"escope"

});//打开地图数据

map.openMapById(esmapId);

大功告成,显示创建的地图

 

二、ESMap地图支持的功能

创建好三维地图后,根据需要添加功能到地图,可添加功能有:地图控件、地图标注、地图导航、地图数据信息检索、热力图绘制、地图路径规划等等。

其中地图控件可为地图添加:楼层控制控件、放大缩小控制控件、显示地图比例尺、添加指北针、二三维切换开关。

其中地图标注有9种类型可选择:图片标注、文字标注、线标注、多边形注、定位标注、气泡标注,还有最近新增的高级功能内嵌页面标注、三维模型标注和信息窗标注。

三、简单实现部分功能

如下是创建了几个标注到我的地图上:

创建标注需要注意的地方:由于数据加载、页面渲染的问题,创建标注代码要写在地图加载完成map.on(‘loadComplete’)代码的后面。

  1. 创建一个图片+文字标注:

第一步:新建一个文字标注图层varlayer=newesmap.ESLayer(esmap.ESLayerType.TEXT_MARKER);//新建标注图层

//可以给图层添加自定义namelayer.name='mylayer';

第二部:创建一个文字图片标注实例,标注对象的值可以自定义;

vartm=newesmap.ESTextMarker({

x: gpos.x-30,y: gpos.y-30,

id:2019,//id,可自定义image:'image/user.png',//图片标注的图片地址

imageAlign:'bottom',//图片在文字方位left,top,right,bottomimageSize:64,//图片大小

name:"图片文字标注",//文字名称spritify:true,//跟随地图缩放变化大小,默认为true,可选参数

scale:1,//文字等级缩放默认为1,可选参数,0.1表明缩小10倍height:1,//距离地面高度

showLevel:20,//地图缩放等级达到多少时隐藏,可选参数fillcolor:"255,0,0",//填充色

fontsize:"24",//字体大小strokecolor:"255,255,0"//边框色

});

第三部:把创建的标注添加到楼层对象中

varfloorLayer=map.getFloor(1)//获取第一层的楼层对象

layer.addMarker(tm);//将标注添加到图层floorLayer.addLayer(layer);//将图层添加到楼层对象

一个图片+文字标注就这样完成啦!

 

如果不想要这个标注了,也可以删除掉标注

方法一://可以删除一整个标注图层

floorLayer.removeLayersByTypes(esmap.ESLayerType.IMAGE_MARKER);

方法二:

//也可以从标注图层中删除标注

layer.remove(tm);//删除某一个标注layer.removeAll();//删除所有标注

2.创建一个线标注:

第一步:确定两个坐标点(标注的起点和终点)varcenter=map.center;//取地图的中心墨卡托坐标

//定义两个点varv1={

x: center.x+20,y: center.y+20,

fnum:1,//楼层offset:10//偏移量

}varv2={

x: center.x-10,y: center.y-10,

fnum:1,offset:10

}

第二步:创建线标注对象

//定义两个点集合

varpoints=[v1, v2];//配置线标注样式 线标注的样式很多种:实线、普通箭头线、自定义虚线、导航线等,我选择的箭头线

varlineStyle={lineWidth:6,

alpha:0.8,offsetHeight:0,

lineType: esmap.ESLineType.ARROW}

//创建线标注对象varlinemark=newesmap.ESLineMarker(1, points, lineStyle)

第三部:画线

//调用地图的画线方法 画标注线

map.drawLineMark(linemark);

so easy  一个线标注就这样完成啦!

 

同样,如果不想要这个标注,可以清除掉这个标注,方法如下:

可以根据设置的ID删除线标注

   map.clearLineMarkById(1)//我设置的id是1

也可以直接删除地图所有的线标注

   map.clearAllLineMark();

3.创建一个气泡标注

第一步:创建气泡标注varpopMarker=newesmap.ESPopMarker({

mapCoord: {x: gpos.x-20,//设置弹框的x轴

y: gpos.y-20,//设置弹框的y轴height:4,//控制信息窗的高度

fnum:1//设置弹框位于的楼层},

className:"myPopMarker",//自定义popMarker样式。在css里配置width:300,//设置弹框的宽度

height:150,//设置弹框的高度marginTop:10,//弹框距离地面的高度

//设置弹框的内容content:' 我的popMarker< p >点击下方图片标注切换显示隐藏;长按图片标注可以拖动< /p >

< div class="myPopClose" >关闭< /div >',//创建好气泡标注后 可以调用气泡标注相关方法

//popMarker.hide() //隐藏//popMarker.show() //显示

//popMarker.toggle() //切换显示/隐藏//popMarker.close() //删除标注

//下面我使用了气泡标注隐藏方法created:function(e) {

$(".myPopClose").click(function() {popMarker.hide();//为关闭按钮绑定隐藏事件

})}

});

我定义的气泡标注的css样式:

.myPopMarker{

padding:020px;background:rgb(28,235,190);

color:rgb(20,21,22);border:1pxsolid/#5e5e5e;

opacity:.7;}

.myPopClose{position:absolute;

top:0;right:0;

width:43px;height:25px;

text-align:center;background-color:honeydew;

color:/#000;cursor:pointer;

}

 

一个气泡标注就这样完成啦!

 

以上就是我用ESMap的地图制作平台创建的地图,并简单实现了标注功能其中三种标注方法的过程,是不是觉得有点意思,感兴趣的小伙伴也去创建一个专属自己的地图吧!

可以在线体验下:演示链接

Thank you for reading!

 

 

 

版权声明
本文为[室内三维地图]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/esmap/p/10399376.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领