第三部：拷贝地图数据和主题数据到自己创建的工程目录中 我拷贝的路径为:根目录>data文件夹>地图数据文件/主题文件夹>主题文件 第四部：配置初始化参数 var map =new esmap.ESMap({ container:container, mapDataSrc: defaultOpt.mapDataUrl, //地图数据位置 mapThemeSrc: defaultOpt.mapThemeUrl, //主题数据位置 token:"escope" }); //打开地图数据 map.openMapById(esmapId); 大功告成，显示创建的地图！ 二、ESMap地图支持的功能 　　创建好三维地图后，根据需要添加功能到地图，可添加功能有：地图控件、地图标注、地图导航、地图数据信息检索、热力图绘制、地图路径规划等等。 　　其中地图控件可为地图添加：楼层控制控件、放大缩小控制控件、显示地图比例尺、添加指北针、二三维切换开关。 　　其中地图标注有9种类型可选择：图片标注、文字标注、线标注、多边形注、定位标注、气泡标注，还有最近新增的高级功能内嵌页面标注、三维模型标注和信息窗标注。 三、简单实现部分功能 　　如下是创建了几个标注到我的地图上： 　　创建标注需要注意的地方：由于数据加载、页面渲染的问题，创建标注代码要写在地图加载完成map.on(‘loadComplete’)代码的后面。 创建一个图片+文字标注： 　　第一步：新建一个文字标注图层 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); //将图层添加到楼层对象 　　一个图片+文字标注就这样完成啦！ 如果不想要这个标注了，也可以删除掉标注 方法一： //可以删除一整个标注图层 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 一个线标注就这样完成啦！ 同样，如果不想要这个标注，可以清除掉这个标注,方法如下： 可以根据设置的ID删除线标注 map.clearLineMarkById(1)//我设置的id是1 也可以直接删除地图所有的线标注 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的地图制作平台创建的地图，并简单实现了标注功能其中三种标注方法的过程，是不是觉得有点意思，感兴趣的小伙伴也去创建一个专属自己的地图吧！ 可以在线体验下：演示链接 Thank you for reading!https://www.cnblogs.com/esmap/p/10399376.html