欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-05 15:59:33
如何使用JS开发绚酷的三维室内地图效果?目前使用一个室内三维地图引擎SDK来创建地图浏览、缩放、旋转、图层显隐等功能,可以实现停车场导览,商场导览,显示商场的商店信息,人员轨迹信息等功能,所有这些都是前端JS代码实现,大家可以一起跟随来试下。 ......

 

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

一、创建地图

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

第一步:引入esmap 的sdk

esmap家的sdk目前不支持用require js引用,只能使用<script src="lib/esmap.min.js"></script >引用

  <scriptsrc="../lib/esmap.min.js"></script>

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

 <divid="map-container"></div>

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

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

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

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

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

第四部:配置初始化参数

var map =new esmap.esmap({
container:container,
mapdatasrc: defaultopt.mapdataurl, //地图数据位置
mapthemesrc: defaultopt.mapthemeurl, //主题数据位置
token:"escope"
});
//打开地图数据
map.openmapbyid(esmapid);

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

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

二、esmap地图支持的功能

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

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

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

三、简单实现部分功能

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

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

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

  第一步:新建一个文字标注图层

var layer =new esmap.eslayer(esmap.eslayertype.text_marker); //新建标注图层
//可以给图层添加自定义name
layer.name ='mylayer';

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

var tm =new esmap.estextmarker({
x: gpos.x -30,
y: gpos.y -30,
id: 2019, //id,可自定义
image: 'image/user.png', //图片标注的图片地址
imagealign: 'bottom', //图片在文字方位left,top,right,bottom
imagesize: 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"//边框色
});

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

var floorlayer = map.getfloor(1) //获取第一层的楼层对象
layer.addmarker(tm); //将标注添加到图层
floorlayer.addlayer(layer); //将图层添加到楼层对象

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

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

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

方法一:

//可以删除一整个标注图层
floorlayer.removelayersbytypes(esmap.eslayertype.image_marker);

方法二:

//也可以从标注图层中删除标注
layer.remove(tm); //删除某一个标注
layer.removeall(); //删除所有标注

2.创建一个线标注:

第一步:确定两个坐标点(标注的起点和终点)

var center = map.center; //取地图的中心墨卡托坐标
//定义两个点
var v1 = {
x: center.x +20,
y: center.y +20,
fnum: 1, //楼层
offset: 10//偏移量
}
var v2 = {
x: center.x -10,
y: center.y -10,
fnum: 1,
offset: 10
}

第二步:创建线标注对象

//定义两个点集合
var points = [v1, v2];
//配置线标注样式 线标注的样式很多种:实线、普通箭头线、自定义虚线、导航线等,我选择的箭头线
var linestyle = {
linewidth: 6,
alpha: 0.8,
offsetheight: 0,
linetype: esmap.eslinetype.arrow
}
//创建线标注对象
var linemark =new esmap.eslinemarker(1, points, linestyle)

第三部:画线

//调用地图的画线方法 画标注线
map.drawlinemark(linemark);

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

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

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

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

   map.clearlinemarkbyid(1)//我设置的id1

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

   map.clearalllinemark();

3.创建一个气泡标注

第一步:创建气泡标注

var popmarker = new esmap.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: 0 20px;
background: rgb(28, 235, 190);
color: rgb(20, 21, 22);
border: 1 px solid#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的地图平台开发三维地图

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

可以在线体验下:

thank you for reading!