新手照的官方示例和API，实现了简单的查询和各种ArcGisforJavascript自带控件的放置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>种粮大户</title> <!-- 线上地址 <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css"/> <script src="https://js.arcgis.com/4.11/"></script> --> <!-- 本地js --> <link rel="stylesheet" href="http://localhost/arcgis_js_v411_sdk/arcgis_js_api/library/4.11/esri/css/main.css"/> <script src="http://localhost/arcgis_js_v411_sdk/arcgis_js_api/library/4.11/init.js"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #optionsDiv { background-color: dimgray; color: white; padding: 10px; width: 350px; } .esri-popup .esri-popup-header .esri-title { font-size: 18px; font-weight: bolder; } .esri-popup .esri-popup-body .esri-popup-content { font-size: 14px; } .esri-basemap-toggle{ margin-right: -40px } .esri-compass{ margin-right: -80px; margin-bottom: 80px; } .esri-zoom{ margin-bottom: 125px; } #topbar { background: #fff; padding: 10px; } .action-button { font-size: 16px; background-color: transparent; border: 1px solid #d3d3d3; color: #6e6e6e; height: 32px; width: 32px; text-align: center; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); } .action-button:hover, .action-button:focus { background: #0079c1; color: #e4e4e4; } .active { background: #0079c1; color: #e4e4e4; } .esri-ui-top-left{ top:20px; left:30px; } </style> <script> require(["esri/Map", 'esri/views/MapView', 'esri/layers/WebTileLayer', 'esri/layers/support/TileInfo', 'esri/layers/FeatureLayer', "esri/widgets/Expand", "esri/widgets/BasemapToggle", "esri/geometry/SpatialReference", "esri/widgets/Search", "esri/widgets/Sketch", "esri/layers/GraphicsLayer", "esri/widgets/Compass", "esri/widgets/DistanceMeasurement2D", "esri/widgets/AreaMeasurement2D", "esri/tasks/QueryTask", "esri/tasks/support/Query", 'dojo/domReady!'], function(Map, MapView, WebTileLayer, TileInfo,FeatureLayer,Expand ,BasemapToggle,SpatialReference,Search,Sketch,GraphicsLayer,Compass,DistanceMeasurement2D ,AreaMeasurement2D,QueryTask,Query) { /* code goes here */ var tileInfo = new TileInfo({ dpi: 90.71428571427429, rows : 850, cols : 172, maxAllowableOffset:0, compressionQuality : 6, origin : { x : -180, y : 90 }, spatialReference : { wkid : 4326 }, lods : [ {level : 2,levelValue: 2, resolution : 0.3515625, scale : 147748796.52937502}, {level : 3,levelValue: 3, resolution : 0.17578125, scale : 73874398.264687508}, {level : 4,levelValue: 4,resolution : 0.087890625, scale : 36937199.132343754}, {level : 5,levelValue: 5, resolution : 0.0439453125, scale : 18468599.566171877}, {level : 6,levelValue: 6, resolution : 0.02197265625, scale : 9234299.7830859385}, {level : 7,levelValue: 7, resolution : 0.010986328125, scale : 4617149.8915429693}, {level : 8,levelValue: 8, resolution : 0.0054931640625, scale : 2308574.9457714846}, {level : 9,levelValue: 9, resolution : 0.00274658203125, scale : 1154287.4728857423}, {level : 10,levelValue: 10, resolution : 0.001373291015625, scale : 577143.73644287116}, {level : 11,levelValue: 11, resolution : 0.0006866455078125, scale : 288571.86822143558}, {level : 12,levelValue: 12, resolution : 0.00034332275390625, scale : 144285.93411071779}, {level : 13,levelValue: 13, resolution : 0.000171661376953125, scale : 72142.967055358895}, {level : 14,levelValue: 14, resolution : 8.58306884765625e-005, scale : 36071.483527679447}, {level : 15,levelValue: 15, resolution : 4.291534423828125e-005, scale : 18035.741763839724}, {level : 16,levelValue: 16, resolution : 2.1457672119140625e-005, scale : 9017.8708819198619}, {level : 17,levelValue: 17, resolution : 1.0728836059570313e-005, scale : 4508.9354409599309}, {level : 18,levelValue: 18, resolution : 5.3644180297851563e-006, scale : 2254.4677204799655}, { level: 19,levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 }, { level: 20,levelValue: 20, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 } ] }) // 天地图开发者key var tk = "53e7ce68eef9b582752cada22e254cc9"; // 基础地图 var layer = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk='+tk,{ // subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'], subDomains: ['t0'], tileInfo: tileInfo }) var layer_anno = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk='+tk,{ //subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'], subDomains: ['t0'], tileInfo: tileInfo }) // 影像图 var layerw = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=img_c&x={col}&y={row}&l={level}&tk='+tk,{ // subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'], subDomains: ['t0'], tileInfo: tileInfo }) var layerw_anno = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk='+tk,{ //subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'], subDomains: ['t0'], tileInfo: tileInfo }) const hlayer = new GraphicsLayer(); var resultsLayer = new GraphicsLayer(); // 创建地图，不设置底图，如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984) var map = new Map({ logo:false, spatialReference : { wkid : 4326 }, basemap: { thumbnailUrl: "img/ditu.png", title: "基础地形", baseLayers: [layer, layer_anno] }, layers: [hlayer,resultsLayer] }); // 创建MapView var view = new MapView({ container: "viewDiv", spatialReference : { wkid : 4326 }, map: map, center: [120.243,30.256], //1:scale的图 level scale: 288571.86822143558 , popup: { dockEnabled: true, dockOptions: { position: "top-right", breakpoint: false } } }); view.ui.move("zoom", "bottom-right"); // 影像和基础地图切换 var toggle = new BasemapToggle({ view: view, nextBasemap:{ thumbnailUrl: "img/wditu.png", title: "影像地形", baseLayers: [layerw, layerw_anno] }, layers: [hlayer] }); view.ui.add(toggle, "bottom-right"); // 绘制图形控件 const sketch = new Sketch({ layer: hlayer, view: view }); view.ui.add(sketch, "top-right"); //数据属性模版 var popupTemplate = { title: " {DKID},{ZhenName} ,{CunName}", overwriteActions: true, content: [{ type: "fields", fieldInfos: [{ fieldName: "DKID", label: "地块名称", format: { places: 0, digitSeparator: true } }, { fieldName: "ZhenName", label: "镇名", format: { places: 0, digitSeparator: true } }, { fieldName: "CunName", label: "村名", format: { places: 0, digitSeparator: true } }, { fieldName: "name", label: "所属人", format: { places: 0, digitSeparator: true } },{ fieldName: "DKMJ", label: "地块面积", format: { places: 6, digitSeparator: true } },{ fieldName: "CBMJ", label: "承包面积", format: { // 小数位数 places: 6, digitSeparator: true } }] }] }; //地块 图层 var featureLayer = new FeatureLayer({ url: "http://localhost:6080/arcgis/rest/services/MapService/FeatureServer/0", outFields: ["*"], popupTemplate: popupTemplate }); map.add(featureLayer); var compassWidget = new Compass({ view: view }); // Add the Compass widget to the top left corner of the view view.ui.add(compassWidget, "bottom-right"); var activeWidget = null; // add the toolbar for the measurement widgets view.ui.add("topbar", "bottom-left"); document .getElementById("distanceButton") .addEventListener("click", function() { setActiveWidget(null); if (!this.classList.contains("active")) { setActiveWidget("distance"); } else { setActiveButton(null); } }); document .getElementById("areaButton") .addEventListener("click", function() { setActiveWidget(null); if (!this.classList.contains("active")) { setActiveWidget("area"); } else { setActiveButton(null); } }); // 测量 function setActiveWidget(type) { switch (type) { case "distance": activeWidget = new DistanceMeasurement2D({ view: view }); // skip the initial 'new measurement' button activeWidget.viewModel.newMeasurement(); view.ui.add(activeWidget, "top-right"); setActiveButton(document.getElementById("distanceButton")); break; case "area": activeWidget = new AreaMeasurement2D({ view: view }); // skip the initial 'new measurement' button activeWidget.viewModel.newMeasurement(); view.ui.add(activeWidget, "top-right"); setActiveButton(document.getElementById("areaButton")); break; case null: if (activeWidget) { view.ui.remove(activeWidget); activeWidget.destroy(); activeWidget = null; } break; } } function setActiveButton(selectedButton) { view.focus(); var elements = document.getElementsByClassName("active"); for (var i = 0; i < elements.length; i++) { elements[i].classList.remove("active"); } if (selectedButton) { selectedButton.classList.add("active"); } } // 监听搜索按钮 document .getElementById("searchdiv") .addEventListener("click", function searchAll(){ // 将地块图层隐藏 featureLayer.visible = false; // 清除上次查询 resultsLayer.removeAll(); var searchUrl = "http://localhost:6080/arcgis/rest/services/MapService/FeatureServer/0"; var txt = document.getElementById("searchtext").value; var queryTask = new QueryTask({ url:searchUrl }); // 查询条件 var query = new Query(); query.returnGeometry=true; query.outFields=["*"]; query.outSpatialReference = { wkid : 4326 }; if(txt!=null&&txt!=''&&txt!=""){ query.where =" CunName Like '%"+txt+"%' or ZhenName Like '%"+txt+"%' "; }else{ query.where =" 1=1 "; } // 执行query语句，完成后执行then中的方法 queryTask.execute(query) .then(getResults); }); // 监听清除按钮，如果不清除会导致一直显示 document .getElementById("qcdiv") .addEventListener("click", function qcAll(){ // 清空搜索框中的值 document.getElementById("searchtext").value=""; // 显示地块图层 featureLayer.visible = true; // 清除搜索图层 resultsLayer.removeAll(); }); // 展示数据方法 function getResults(response) { var peakResults = response.features.map(function(feature) { // 地块的样式 feature.symbol = { type: "simple-fill", // 填充颜色 color: [51, 204, 51, 0.3], style: "solid", // 边框线 outline: { color: [1, 4, 1, 0.3], width: 1 } }; // 数据展示格式 feature.popupTemplate = popupTemplate; return feature; }); resultsLayer.addMany(peakResults); // 将结果添加到地图后动画化 view.goTo(peakResults).then(function() { view.popup.open({ features: peakResults, featureMenuOpen: true, updateLocationEnabled: true }); }); } }); </script> </head> <body> <div id="viewDiv"> </div> <div id="topbar"> <button class="action-button esri-icon-minus" id="distanceButton" type="button" title="测量两个点或多个点的距离" ></button> <button class="action-button esri-icon-polygon" id="areaButton" type="button" title="测量面积" ></button> </div> <div class="esri-ui-top-left esri-ui-corner"> <div class="esri-component esri-search esri-widget" style="width: 400px;"> <div class="esri-search--multiple-sources esri-search__container"> <div class="esri-search__input-container"> <form class="esri-search__form" > <input type="text" placeholder="示例:镇名或村名" tabindex="0" class="esri-input esri-search__input" title="查询" id="searchtext" value=""> </form> </div> <div role="button" title="清除" class="esri-search__submit-button esri-widget--button" tabindex="0" id="qcdiv" > <span class=""><img src="img/qc.png"></span> </div> <div role="button" title="搜索" class="esri-search__submit-button esri-widget--button" tabindex="0" id="searchdiv" > <span class="esri-icon-search"></span> <span class="esri-icon-font-fallback-text">搜索</span> </div> </div> </div> </div> </body> </html>上面的地址改成自己的服务地址，我自己也踩过坑，如果有问题，可以问我
