ArcGIS实现打点弹窗

来源：互联网发布：splice js循环编辑：程序博客网时间：2024/04/29 16:01

引用的资源：

<link rel="stylesheet" type="text/css"href="app/templates/manage/arcgis319/dijit/themes/tundra/tundra.css" /><link rel="stylesheet" type="text/css"href="app/templates/manage/arcgis319/esri/css/esri.css" /><script type="text/javascript"src="app/templates/manage/arcgis319/init.js"></script>

初始化地图：

var map,g;require(["esri/layers/ArcGISTiledMapServiceLayer","esri/layers/ArcGISDynamicMapServiceLayer","esri/symbols/SimpleMarkerSymbol","esri/map","dojo/on","esri/graphic","esri/geometry/Point","dojo/domReady!"], function(ArcGISTiledMapServiceLayer,ArcGISDynamicMapServiceLayer,SimpleMarkerSymbol, Map, on,Graphic,Point) {var longitude =114.29055;var latitude =36.1822;$.ajax({url:"${basePath}city/getCityCoordinateByUserName",dataType:"json",success:function(result){longitude = result.city.longitude;latitude = result.city.latitude;},error:function(data){keyflag=false;$.messager.alert("提示", "加载地图失败", "info",function(){keyflag=true;});}})  map = new Map("map",{    //basemap: "osm",    center: [longitude, latitude],    zoom: 10,    logo:false  });});

具体例子：根据查询条件筛选符合条件的点并显示在地图上：

//查询按钮功能function queryFuc() {map.graphics.clear();if(clusterLayer!=undefined){map.removeLayer(clusterLayer);}$.ajax({url:'gis/tt',data:{month:$('#search_date').val(),city:$('#cityName').combobox('getValue')},success : function(data) {var obj= $.parseJSON(data);if(obj.length<1){alert("当前条件下未查询到数据");return false;} require([        "esri/layers/ArcGISTiledMapServiceLayer",        "esri/layers/ArcGISDynamicMapServiceLayer",        "esri/symbols/PictureMarkerSymbol",        "esri/map",        "dojo/on",        "esri/graphic",        "esri/geometry/Point",        "esri/Color",        "esri/InfoTemplate"      ], function (ArcGISTiledMapServiceLayer,ArcGISDynamicMapServiceLayer,PictureMarkerSymbol, Map, on,Graphic,Point,Color,InfoTemplate){ var resultUnionExtent;     var multipoint = new esri.geometry.Multipoint(); $.each(obj,function(i, item) { g=new Graphic(); simpleMarkerSymbol = new PictureMarkerSymbol({            "url":"${basePath}app/templates/manage/arcgis319/img/marker.png",            "height":15,            "width":20,            "type":"esriPMS",            "angle": 0,          });  var point=new Point([item.LONGITUDE, item.LATITUDE]);   multipoint.addPoint(point);    g.setGeometry(point);      g.setSymbol(simpleMarkerSymbol);     /*  g.setInfoTemplate(infoTemplate); */      map.graphics.add(g);});

//根据当前所有点的范围来动态缩放地图显示比例 if(multipoint.points.length > 0){    if(resultUnionExtent == null){    resultUnionExtent = multipoint.getExtent();    }else{    resultUnionExtent = resultUnionExtent.union(multipoint.getExtent());    } } map.setExtent(resultUnionExtent.expand(1.2));  }); }});}

给一个infoTemplate的参考：

  var contentHTML = "<div style='font-size:0.3em; opacity: 0.8; overflow-y:hidden;'>";contentHTML += "<div>" + "资源名称："+ rainObj[0]["resName"] + "<br>类型： "+rainObj[0]["resKind"]+ "<br> 所属局站："+ rainObj[0]["baseStation"]+ "<br> 具体地址：" + rainObj[0]["address"]+ "<br> 站点纬度：" + rainObj[0]["latitude"]+ "   站点经度："+ rainObj[0]["longitude"]+ "</div></div>";    var json = {content : contentHTML};    var infoTemplate = new InfoTemplate(json);

阅读全文

0 0