本文簡單的介紹使用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!
