根據項目要求，需要對指定的位置進行標注。
1、初始化地圖服務
2、根據地圖服務接口信息進行標注
3、根據經緯度信息進行標注
展示接口截圖：
以下代碼並不能直接粘貼跑起來，因為代碼所涉及的文件地址都是內網的地址。需要自行更改對應的IP
如截圖所示：
1、紅色的是todoLabel 方法，根據經緯度值直接標注上去的。
2、藍色車輛圖標，是targetLabelFun 調用地圖服務接口，添加到圖層上去的。
1 <!--地圖初始化--> 2 <!doctype html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>地圖初始化</title> 7 <link rel="stylesheet" type="text/css" href="http://10.101.8.102:80/map/js/3.26/esri/css/esri.css" /> 8 <script type="text/javascript" src="http://10.101.8.102:80/map/js/3.26/init.js" ></script> 9 <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script> 10 <style>html, body {height: 100%;width: 100%;margin: 0;padding: 0;}</style> 11 </head> 12 <body> 13 <div id="xinyiMapPID" style="height: 70%;width: 90%;padding-left:50px"> 14 <div id="xinyiMap"></div> 15 </div> 16 <script type="text/javascript"> 17 $(function () { 18 initMap({},'xinyiMap'); 19 20 }) 21 var maplet = null;//地圖對象 22 var initMap = function(param,DOMID){ 23 return new Promise(function(resolve) { // 用於回調操作，預留 24 var domMapID; 25 var layer_city; // 圖層對象 26 if (DOMID == undefined || DOMID == "") {domMapID = "xinyiMap";} // 傳遞不同的id值，用於初始化不同的DOM地圖服務 27 else {domMapID = DOMID;} 28 var list = {// 默認地圖初始化參數 29 minZoom: '11', 30 maxZoom: 19, 31 zoom: 16, 32 center: [113.33227, 23.14154], // 廣州 33 } 34 var options = Object.assign(list, param); // 參數對象合並,若存在重復，后面的會覆蓋前面的 35 require(["esri/map", 36 "esri/config", 37 "esri/dijit/OverviewMap", 38 "esri/layers/ArcGISTiledMapServiceLayer" 39 ], 40 function (Map, config, OverviewMap, ArcGISTiledMapServiceLayer) { 41 42 $("#" + domMapID).width($("#" + domMapID).parent().width()); // 重新定義地圖區域的寬高，等於父級的寬高 43 $("#" + domMapID).height($("#" + domMapID).parent().height()); 44 45 maplet = new Map(domMapID, {// 初始化地圖 46 center: options.center, //初始化展示中心位置 47 zoom: options.zoom, 48 logo: false, //logo設置圖標是否顯示,true時地圖底部顯示powered by ESRI 49 maxZoom: options.maxZoom, //最大放縮級別 50 minZoom: options.minZoom, //最小放縮級別 51 navigationMode: 'css-transforms' //指示在平移和縮放時地圖是否使用CSS3變換。 52 }) 53 54 //ArcGISTiledMapServiceLayer，用於加載服務器端的緩存地圖服務,displayLevels表示放縮級別約束 55 layer_city = new ArcGISTiledMapServiceLayer('http://10.101.8.103:6080/arcgis/rest/services/gz_google_7_19MapService/MapServer', {displayLevels: [10,11,12, 13, 14, 15, 16, 17,18,19]}); 56 maplet.addLayer(layer_city, 0); // 把創建的ArcGISTiledMapServiceLayer地圖服務添加到map地圖中 57 // 進行標注 58 maplet.on('load',function(){ 59 targetLabelFun();//調用地圖服務接口，進行標注 60 todoLabel(23.14154,113.33227,1); //直接根據經緯度值進行標注。緯度（0°——90），經度（0°——180°） 61 }) 62 63 }) 64 }) 65 resolve(maplet); 66 } 67 68 // 地圖標注方法,根據地圖服務進行標注 69 var targetLabelFun = function () { 70 var labelObj = null; // 定義需要標注的對象 71 require([ 72 "esri/map", // 創建地圖類 73 "esri/layers/ArcGISTiledMapServiceLayer", 74 "esri/symbols/PictureMarkerSymbol", 75 "esri/renderers/SimpleRenderer", 76 "esri/layers/FeatureLayer" 77 ],function (Map, ArcGISTiledMapServiceLayer, PictureMarkerSymbol, SimpleRenderer, FeatureLayer, ) { 78 var pictureSymbol = new PictureMarkerSymbol('http://10.101.8.102:80/map/img/car.png', 24, 36); // 標注所需的圖標，用於在圖層上進行標注 79 var simpleRender = new SimpleRenderer(pictureSymbol); // 使用Symbol參數創建一個新的SimpleRenderer對象。 80 labelObj = new FeatureLayer('http://10.101.8.103:6080/arcgis/rest/services/viasCameraMapService/MapServer/0', {visible: true, id: 'layer_label', outFields: ['*']}) 81 labelObj.setRenderer(simpleRender); 82 maplet.addLayer(labelObj); 83 }) 84 } 85 // 根據經緯度進行標注 86 var todoLabel = function (lat,lon,index) {//113.33227, 23.14154 87 require([ 88 "esri/map", // 創建地圖類 89 "esri/geometry/webMercatorUtils", 90 "esri/layers/GraphicsLayer", 91 "esri/symbols/PictureMarkerSymbol", 92 "esri/graphic", 93 "esri/geometry/Point" 94 ], function (map,webMercatorUtils, GraphicsLayer, PictureMarkerSymbol, Graphic, Point) { 95 var pot = new Point(parseFloat(lon), parseFloat(lat), { "wkid": 4326 }); 96 var webMctor = webMercatorUtils.geographicToWebMercator(pot); // 轉換為橫軸墨卡托系統坐標 97 var pms = new PictureMarkerSymbol("http://10.101.8.102:80/map/img/point_red.png",21,33); 98 var graphicObj = new Graphic(webMctor, pms, null, null); 99 maplet.graphics.add(graphicObj); 100 maplet.centerAt(webMctor); 101 }) 102 103 } 104 105 </script> 106 </body> 107 </html>