本文简单的介绍使用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文件夹>地图数据文件/主题文件夹>主题文件

第四部:配置初始化参数

var map =new esmap.ESMap({
container:container,
mapDataSrc: defaultOpt.mapDataUrl, //地图数据位置
mapThemeSrc: defaultOpt.mapThemeUrl, //主题数据位置
token:"escope"
});
//打开地图数据
map.openMapById(esmapId);

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

二、ESMap地图支持的功能

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

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

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

三、简单实现部分功能

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

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

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

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

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

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

var tm =new esmap.ESTextMarker({
,
,
, //id,可自定义
image: 'image/user.png', //图片标注的图片地址
imageAlign: 'bottom', //图片在文字方位left,top,right,bottom
, //图片大小
name: "图片文字标注", //文字名称
spritify: true, //跟随地图缩放变化大小,默认为true,可选参数
, //文字等级缩放默认为1,可选参数,0.1表明缩小10倍
, //距离地面高度
, //地图缩放等级达到多少时隐藏,可选参数
fillcolor: "255,0,0", //填充色
fontsize: "24", //字体大小
strokecolor: "255,255,0"//边框色
});

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

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

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

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

方法一:

//可以删除一整个标注图层
floorLayer.removeLayersByTypes(esmap.ESLayerType.IMAGE_MARKER);

方法二:

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

2.创建一个线标注:

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

var center = map.center; //取地图的中心墨卡托坐标
//定义两个点
var v1 = {
,
,
, //楼层
//偏移量
}
var v2 = {
,
,
,
}

第二步:创建线标注对象

//定义两个点集合
var points = [v1, v2];
//配置线标注样式 线标注的样式很多种:实线、普通箭头线、自定义虚线、导航线等,我选择的箭头线
var lineStyle = {
,
alpha: 0.8,
,
lineType: esmap.ESLineType.ARROW
}
//创建线标注对象
, points, lineStyle)

第三部:画线

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

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

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

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

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

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

map.clearAllLineMark();

3.创建一个气泡标注

第一步:创建气泡标注

var popMarker = new esmap.ESPopMarker({
mapCoord: {
, //设置弹框的x轴
, //设置弹框的y轴
, //控制信息窗的高度
//设置弹框位于的楼层
},
className: "myPopMarker", //自定义popMarker样式。在css里配置
, //设置弹框的宽度
, //设置弹框的高度
, //弹框距离地面的高度
//设置弹框的内容
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 {
px;
);
);
px solid#5e5e5e;
opacity: .7;
}
.myPopClose{
position: absolute;
;
;
px;
px;
text-align: center;
background-color: honeydew;
color: #000;
cursor: pointer;
}
 

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

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

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

Thank you for reading!

 

 

使用ESMap的地图平台开发三维地图的更多相关文章

  1. 用three.js开发三维地图实例

    公司要做智慧消防楼层可视化,需要用到web3d,开源的引擎中先研究了cesium三维地球,但cesium做楼层感觉是大材小用,而且体验也不好,最终选用的是功能强大.更适合小型场景的three. thr ...

  2. 百度地图API开发----手机地图做导航功能

    第一种方式:手机网页点击打开直接进百度地图APP <a href="baidumap://map/direction?mode=[transit:公交,driving:驾车]& ...

  3. 关于高德地图Android开发时地图只显示一次、第二次打开不定位的解决办法

    我按照高德官方Demo改的 第一次是可以定位的,如左图 第二次就不能定位了,如右图 在onDestory中把aMap置为空即可 aMap = null; 修改完如下图: 原理是第二次打开时aMap不为 ...

  4. 如何使用JS来开发室内三维地图的轨迹回放功能

     在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回 ...

  5. 微信小程序室内地图导航开发-微信小程序JS加载esmap地图

    一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小 ...

  6. 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图

    如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...

  7. 使用室内三维地图引擎ESMap来管理摄像头设备、消防设备和人员轨迹展示

    目前室内三维地图如何轻量化,能够在手机微信.电脑浏览器等平台快速显示地图,显示的地图性能好,转动地图不卡是大家都要面对的问题, 使用室内三维地图引擎ESMap后目前可以不用操心这方面的问题,开发只需要 ...

  8. Senparc.Weixin.MP SDK 微信公众平台开发教程(十三):地图相关接口说明

    为了方便大家开发LBS应用,SDK对常用计算公式,以及百度和谷歌的地图接口做了封装. 常用计算: 用于计算2个坐标点之间的直线距离:Senparc.Weixin.MP.Helpers.Distance ...

  9. SkylineGlobe 7.0.1 & 7.0.2版本Web开发 如何正确使用三维地图控件和工程树控件

    Skyline TerraExplorer Pro目前正式发布的7.0.1&7.0.2版本,还只是64位的版本, 在Web开发的时候,如何在页面中正确嵌入三维地图控件,让一些小伙伴凌乱了. 下 ...

随机推荐

  1. macOS High Sierra Terminal巨卡问题的解决

    输入命令特别卡,拖拽窗口也特别卡,想到可能和界面渲染有关系,到设置里面把不透明度调成满值,问题解决. 真正的技术原因是看iOS开发相关的书的时候,书里面有这方面渲染消耗的提示说明.

  2. Top Open Source Projects to Watch in 2017

    https://opensource.com/article/16/12/yearbook-projects-watch-2017 No one has a crystal ball to see t ...

  3. 使用Selenium对新浪微博模拟登录

    Selenium的配置 在项目中引入Selenium库 下载chromedriver.exe 在项目代码中加入chromedriver位置的配置 使用Selenium Selenim语法 智能等待 隐 ...

  4. PAT1097:Deduplication on a Linked List

    1097. Deduplication on a Linked List (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 ...

  5. cropper(裁剪图片)插件使用(案例)

    公司发布微信H5前端阵子刚刚弄好的H5端的图片上传插件,现在有需要裁剪图片.前端找了一个插件---cropper 本人对这插件不怎么熟悉,这个案例最好用在一个页面只有一个上传图片的功能上而且只适合单个 ...

  6. Android 样式的开发(转)

    Android(2)    目录(?)[-] rectangle oval line ring layer-list篇 普通图片 bitmap标签 点九图片 nine-patch标签 color标签 ...

  7. RedHat Linux下iptables防火墙设置

    一般情况下iptables已经包含在Linux发行版中.运行 # iptables --version 来查看系统是否安装iptables 启动iptables:# service iptables ...

  8. 虚拟机搭建CentOS主机win10通过xshell连接

    目标:主机是win10系统,虚拟机搭建CentOS,在主机上通过XShell连接操作. 第一步 主机上安装虚拟机 第二步 下载CentOS 下载地址http://101.110.118.69/isor ...

  9. Spring Cloud构建微服务架构(二)服务消费者

    Netflix Ribbon is an Inter Process Communication (IPC) cloud library. Ribbon primarily provides clie ...

  10. c# xml操作(二)

    c# xml操作(二) 此博文包含图片 (-- ::)转载▼ 标签: 杂谈 分类: c# 上次,我们介绍了增加和删除xml的一些操作,这次我们将介绍如何更改和读取xml特定节点.我们依然以上次的xml ...