arcgis js 画点

缺乏、安全感 2023-10-18 22:35 16阅读 0赞

1**.引入需要的css、js文件，github地址**：[https://github.com/zhangliqingyun/arcgis-javascript/tree/master/arcgis/3.29][https_github.com_zhangliqingyun_arcgis-javascript_tree_master_arcgis_3.29]

2**.页面定义div：**

<div id='map' style="width:100%;height:100%;display:block;position: absolute;"></div>

3**.加载地图连接：**

4.**画点的方法：**

//画点的方法
        function drawPointSupermap(data,type,popContent,pointPicture,moveTip){
             require(["esri/geometry/Point","esri/SpatialReference","esri/graphic","esri/dijit/InfoWindow","dojo/dom-construct","dojo/dom-attr","dojo/dom-style","dojo/dom"
             ], function(Point,SpatialReference,Graphic, InfoWindow,domConstruct,domAttr,domStyle,dom) {         
                 var point = new Point(data.jd, data.wd, new SpatialReference({wkid:4326})); 
                 var graphic = new Graphic(point, pictureMarkerSymbol);    
                 cleanLayer();                              //清理图层                     
                 pointLayer.add(graphic);             
                 pointLayer.on("click",popupLayerClick);    //点击提示层的方法
                 pointLayer.on("mouse-over",popupLayerOver);//鼠标放到提示层的方法
                 pointLayer.on("mouse-out",popupLayerOut);  //鼠标移开提示层的方法
                 map.infoWindow.hide();                     //隐藏弹出提示框     
                 position();                                //定位放大地图                
                 
                 //清理图层 
                 function cleanLayer(){
                    pointLayer.clear();                //单点图层
                 }                                 
            
                 //定位放大地图
                 function position(){  
                    var latitude = parseFloat(data.jd);
                    var longitude = parseFloat(data.wd);       
                    var point = new Point(latitude, longitude, map.spatialReference);        
                    map.setScale(5000000);        //缩放比例 （比例尺）                                    
                    map.centerAndZoom(point);     //定位           
                 }
    
                 //点击提示层的方法   
                 function popupLayerClick(e){ 
                    e.stopPropagation();   
                    var graphic = e.graphic;              
                    map.infoWindow.setTitle("基本信息");              
                    map.infoWindow.setContent(popContent);         
                    map.infoWindow.show(e.mapPoint,InfoWindow.ANCHOR_UPPERLEFT);      
                 }
                
                 //鼠标放到提示层的方法
                 function popupLayerOver(e){
                    map.setMapCursor("pointer");
                    var scrPt = map.toScreen(e.graphic.geometry);     
                    var textDiv = domConstruct.create("div");
                    domAttr.set(textDiv,{
                        "id":"text",
                        "text":""  
                    });
                    domStyle.set(textDiv, {
                        "left": scrPt.x+15 + "px",
                        "top": scrPt.y-10 + "px",     
                        "position": "absolute",
                        "z-index":99,
                        "background":"#fcffd1",
                        "font-size":"10px",
                        "border":"1px solid #0096ff",
                        "padding": "0.1em 0.3em 0.1em",
                        "border-radius": "3px",
                        "box-shadow": "0 0 0.75em #777777"
                    });
                    textDiv.innerHTML = moveTip;      
                    if(dom.byId("text") != null){             //判断提示框存在则移除提示框
                        dom.byId("map").removeChild(dom.byId("text"));   
                    }
                    dom.byId("map").appendChild(textDiv);    
                 }  
                
                 //鼠标移开提示层的方法    
                 function popupLayerOut(e){
                    map.setMapCursor("default");  
                    if(dom.byId("text") != null){             //判断提示框存在则移除提示框
                        dom.byId("map").removeChild(dom.byId("text"));   
                    }    
                 }   
            });                  
        }

[https_github.com_zhangliqingyun_arcgis-javascript_tree_master_arcgis_3.29]: https://github.com/zhangliqingyun/arcgis-javascript/tree/master/arcgis/3.29