基于MapView創建2D地圖實例 官方示例：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=intro-mapview ## 一、mapView示例 ~~~ require([ 'esri/Map', 'esri/views/MapView', 'dojo/domReady!' ], function(Map, MapView) { var map = new Map({ basemap: 'streets' // dark-gray }); var mapView = new MapView({ map: map, container: 'js_map', center: [102.9331224074, 25.1049040686], zoom: 6, // rotation: -127.7 // 旋轉地圖 }); }); ~~~  **注意：dojo/domReady!一定要放在最后引入** ## 二、實例創建完成回調 ~~~ mapView.when(function(){ // This function will execute once the promise is resolved }, function(error){ // This function will execute if the promise is rejected due to an error }); ~~~ ## 三、屬性設置 ~~~ mapView.set({ center: [121.3022630323934, 29.868660680345652], zoom: 10 }); ~~~ ## 四、觀察屬性變動 ~~~ mapView.watch(['zoom'], function(newV, oldV, propName) { console.log(newV, oldV, propName) }); ~~~ ## 五、常用事件 ~~~ // 點擊事件 mapView.on('click', function(res) { var mapPoint = res.mapPoint, zoom = mapView.zoom; console.log([mapPoint.longitude, mapPoint.latitude], zoom) }); // 縮放事件 mapView.on('mouse-wheel', function(res) { console.log(res); }); // 拖拽事件 mapView.on('drag', function(res) { console.log(res); }); // 大小改變事件 mapView.on('resize', function(res) { console.log(res); }); // 圖層創建呈現完成事件 mapView.on('layerview-create', function(res) { console.log(res); }); mapView.on('pointer-up', function(res) { if(res.button === 2) { // 右健 var divEle = document.createElement('div'); divEle.style.cssText = 'position: fixed;left: '+res.x+'px;top: '+res.y+'px;background-color: #ddd;border: 1px solid #ccc;'; divEle.textContent = 'Hello ArcGis.'; document.body.appendChild(divEle); } }); ~~~ ## 六、事件示例 1、通過mapView綁定 ``` // 點標記 var pointGraphic = new Graphic({ attributes: { id: 'aaa' }, geometry: { type: "point", longitude: 102.91835013921454, latitude: 24.07329419928656 }, symbol: { type: "simple-marker", color: [226, 119, 40], outline: { color: [255, 255, 255], width: 2 } } }); // 綁定事件 mapView.on('click', function(event) { mapView.hitTest(event).then(function(res) { var marker = res.results[0]; console.log(marker.graphic.attributes) // 獲取捆綁的屬性 }); }); ``` 2、通過body綁定（適合文本標記） ``` $('body').on('click', 'text',function(e) { e.stopPropagation(); console.log($(this).text()) }); ```