使用ESMap的地圖平臺開發三維地圖
本文簡單的介紹使用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’)代碼的後面。
- 創建一個圖片+文字標註：
第一步：新建一個文字標註圖層
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!
使用ESMap的地圖平臺開發三維地圖