esri loader Angular example about esri-loader HOT 18 CLOSED

import esriLoader from 'esri-loader';
import arcgis_url from 'Conf/arcgisUrl';

var app = {};

/*

初始化地图，id为需要绑定的map id
*/
app.initMap = function(id){
var that = this;
var p = new Promise(function(resolve, reject){
esriLoader.loadModules(['dojo/parser', 'esri/config', 'esri/map', 'esri/layers/ArcGISDynamicMapServiceLayer','esri/layers/FeatureLayer',
"esri/toolbars/MeasureTools", "dojo/_base/array", "esri/layers/LayerDrawingOptions", "dojo/on", "dojo/query",
"esri/tasks/query", "esri/tasks/QueryTask", "esri/layers/GraphicsLayer", "esri/tasks/FindTask","esri/tasks/FindParameters", 'esri/tasks/BufferParameters', 'esri/SpatialReference', "esri/geometry/Extent",
'esri/toolbars/navigation', 'esri/toolbars/draw', 'esri/tasks/GeometryService', 'esri/symbols/Font',
'esri/symbols/SimpleMarkerSymbol', 'esri/symbols/SimpleFillSymbol', 'esri/symbols/SimpleLineSymbol',
'esri/symbols/TextSymbol', 'esri/Color', 'esri/graphic', 'esri/tasks/LengthsParameters', 'esri/geometry/Point',
'esri/geometry/Polyline', 'esri/tasks/AreasAndLengthsParameters', 'dojo/dom-attr', 'esri/geometry/normalizeUtils', 'dojo/domReady!'], arcgis_url.initUrl)
.then(([parser, esriConfig, Map, ArcGISDynamicMapServiceLayer, FeatureLayer, deMeasureTools, arrayUtils, LayerDrawingOptions, on, query,
Query, QueryTask, GraphicsLayer,FindTask,FindParameters,BufferParameters, SpatialReference, Extent,
Navigation, Draw, GeometryService, Font, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol,
TextSymbol, Color, Graphic, LengthsParameters, Point, Polyline, AreasAndLengthsParameters, domAttr, normalizeUtils]) => {
console.log(arcgis_url);

parser.parse();
esriConfig.defaults.io.corsEnabledServers.push("218.241.213.230:6080");
esriConfig.defaults.io.corsEnabledServers.push("sampleserver1.arcgisonline.com");
esriConfig.defaults.geometryService = new GeometryService(arcgis_url.GeometryService);
 esriConfig.defaults.io.proxyUrl = "http://218.241.213.230:8888/Java/proxy.jsp";
	esriConfig.defaults.io.alwaysUseProxy = false;
// create map with the given options at a DOM node w/ id 'mapNode'
/*extent:new Extent(121,29,122,29.5, new SpatialReference({ wkid:4610 }))*/
that.map = new Map(id, {
	  	center: [121.4, 29.3],
 	zoom: 11,
 	logo:false,
});

//设置地图坐标系类型  
 var spatialReference = new SpatialReference(4610);  
 that.map.spatialReference = spatialReference;  
var basemap = new ArcGISDynamicMapServiceLayer(arcgis_url.basemap);
basemap.id = "basemap";
 that.map.addLayer(basemap);
 //自己封装的测量工具，在服务器arcgisapi中
 var measurTool = new deMeasureTools({
     map: that.map
 }, "map-tool");
 /*that.map.onClick = function(e){
 	var t = e;
 	console.log(e);
 };*/
 
 var fieldsSelectionSymbol =new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
 new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
that.Map = Map;
that.ArcGISDynamicMapServiceLayer=ArcGISDynamicMapServiceLayer;
that.FeatureLayer=FeatureLayer;
that.Navigation=Navigation;
that.arrayUtils = arrayUtils;
that.LayerDrawingOptions = LayerDrawingOptions;
that.SimpleFillSymbol=SimpleFillSymbol;
that.SimpleLineSymbol=SimpleLineSymbol;
that.Color=Color;
that.Query=Query;
that.Graphic=Graphic;
that.GraphicsLayer=GraphicsLayer;
that.esriConfig=esriConfig;
that.BufferParameters=BufferParameters;
that.SpatialReference=SpatialReference;
that.Extent=Extent;
that.GeometryService=GeometryService;
that.FindTask=FindTask;
that.FindParameters=FindParameters;
that.Point=Point;
that.SimpleMarkerSymbol=SimpleMarkerSymbol;
that.QueryTask=QueryTask;
that.query=query;
that.Draw=Draw;
that.normalizeUtils=normalizeUtils;
/*that.Draw=Draw;
that.Font=Font;
that.TextSymbol=TextSymbol;
that.LengthsParameters=LengthsParameters;
that.Polyline=Polyline;
that.AreasAndLengthsParameters=AreasAndLengthsParameters;
that.domAttr=domAttr;*/
resolve({
	ok:true
});
}).catch(err => {

console.error(err);
});
})
return p;
}
export default app;

import esris from './map';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap';
import arcgis_url from 'Conf/arcgisUrl';
var gpsMap = {};
gpsMap.mapRoad = function(roadName,serverUrl){
var map = esris.map;
//乡镇定位的函数
map.graphics.clear();//清空graphics
//实例化查询参数
var findParams = new esris.FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [2];//对地级城市和省记性查询
findParams.searchFields = ['GLMC'];//匹配图层中的字段属性
findParams.searchText = roadName;
var findTask = new esris.FindTask(serverUrl);
//进行查询
findTask.execute(findParams,showFindResult);
//查询结果匹配
function showFindResult(queryResult){
if (queryResult.length === 0) {
alert("查询无结果");
return;
}
console.log(queryResult)
$.each(queryResult, function(index, value) {
var pointSymbol = new esris.SimpleMarkerSymbol(//定义点符号
esris.SimpleMarkerSymbol.STYLE_CIRCLE, 10,
new esris.SimpleLineSymbol(esris.SimpleLineSymbol.STYLE_SOLID,
new esris.Color([255,0,0]), 1),
new esris.Color([255,0,0])
);
var outline= new esris.SimpleLineSymbol(esris.SimpleLineSymbol.STYLE_DASHDOT,new esris.Color([255, 0, 0]), 1); //定义面的边界线符号
var PolygonSymbol = new esris.SimpleFillSymbol(esris.SimpleFillSymbol.STYLE_SOLID, outline,new esris.Color([0, 255, 0, 1])); //定义面符号
var graphic ={}; //创建graphic
var locationPoint ={};//创建定位点
var geometry = value.feature.geometry;//获得该图形的形状
if(geometry.type == 'polygon'){
graphic = new esris.Graphic(geometry, PolygonSymbol);
locationPoint=geometry.getCentroid();
}
else if(geometry.type == 'point'){
graphic = new esris.Graphic(geometry, pointSymbol);
locationPoint=geometry;
}
//	map.graphics.add(graphic);
console.log(graphic)
console.log(locationPoint)
// map.centerAndZoom(locationPoint,1);
});
}
}