Arcgis Javascript (一) 加载高德地图，标记点位，更新点位，显示点位弹窗-CSDN博客

本文链接：https://blog.csdn.net/yiyueqinghui/article/details/102665634
这里由于需要引入文件，故无法运行，需要源码的话，直接上github
如下文件对映github上的arcgis_point.html
点击跳转github
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ArcGIS JS加载高德地图</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
    <style>
        html,body{
            height: 100%;
        }
        #map{
            height: 100%;
        }
    </style>


    <script type="text/javascript">
    	/* dojoConfig 配制，如果引入外部js用于地图的话，需要packages打包引入路径，例如这里引入高德底图，就需要如下配制，
    	 * packages:[{name:'js',location: location.pathname.replace(/\/[^/]*$/, '') + '/js'}],
    	 * 方可reauire([ "js/gaodeLayer"],function(goadeLayer){})
    	 * */
        var dojoConfig = { 
            async: false, //是否异步
            parseOnLoad: true,
            packages: [{ //解释：require(["js/.."],function(){}) 中  js/ 即为 location的值
                name: "js", //对应require引用包里的js
                location: location.pathname.replace(/\/[^/]*$/, '') + '/js' //location.pathname表示当前文件位置 
            }]
        };
        
//      配制参考 https://www.cnblogs.com/mytudousi/p/6166280.html
    </script>
    <!--<script src="https://js.arcgis.com/3.29/"></script>-->
    <script type="text/javascript" src="js/init.js"></script>
    <script>
        //地图控件
        var map;
        require(["esri/map",
        "esri/geometry/Extent",
        "esri/geometry/Point", 
        "esri/SpatialReference",
        "esri/dijit/Scalebar",
        "js/gaodeLayer",
        "esri/graphic",
        "esri/layers/GraphicsLayer", 
        "esri/InfoTemplate",
        "esri/dijit/Popup",
        "dojo/domReady!"], 
        function (Map,Extent,Point,SpatialReference,Scalebar,gaodeLayer,Graphic,GraphicsLayer,InfoTemplate,Popup) {
            //创建popup弹出层
            var div = document.createElement('div');
            var popup = new Popup(null, div);
            
            var startExtent = new Extent(112.445306, 35.485907, 112.445376, 35.485997,new SpatialReference({ wkid:4326 }) );
        	
            map = new Map("map", {
//              extent:startExtent,
                basemap: "streets",
                center: [116.397428, 39.90923],
                zoom: 10,
                logo :false, //logo
                infoWindow: popup,  //弹窗
                slider : true //缩小按钮
            });
            // var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
            // var baselayer = new gaodeLayer({layertype: "st"});//加载卫星图
            
            //加载高德图层
            var baselayer = new gaodeLayer({layertype: "road"});//加载标注图
            map.addLayer(baselayer);//添加高德地图图层到map上
            
            //初始化比例尺
            var scalebar = new Scalebar({
                map: map,
                attachTo: "bottom-left",
                scalebarUnit: "dual",
            });
            //显示比例尺
            scalebar.show();
			
			//车辆图层
			var pointlayer = new GraphicsLayer();
			map.addLayer(pointlayer,1);
			 //标注车辆位置
		    var lnglats = [
		       {
		       	  oldPosition:[116.397428, 39.90923],
		       	  position:[116.368904, 39.943423],
		       	  info:'沪H159327',
		       	  angle:30,
		       	  id:1,
		       },
		       {
		       	  oldPosition:[116.302122, 39.921176],
		       	  position:[116.382122, 39.921176],
		       	  info:'京J02364',
		       	  angle:35,
		       	  id:2
		       }
		    ];
		    
			map.on("load", function() {
				for(var i=0;i<lnglats.length;i++){
					let x = lnglats[i].oldPosition[0],
					    y = lnglats[i].oldPosition[1],
					    desc = lnglats[i].info; 
					//加载车辆图标    
					ShowLocation(x,y,desc);
				}
				
			});
			
		
			
			//点击车辆图层，弹出框信息
			var popup_point = {x:0,y:0};
            pointlayer.on("click",  function(e) {
            	var dom = "<table>"+
			         "<tr><td>车牌</td><td>123</td></tr>"+
			         "<tr><td>经纬度</td><td>116  39</td></tr>"+
			    "</table>";
                popup.setTitle('图形信息');
                popup.setContent(dom);
                popup.show(e.mapPoint);
                
                //保存当前弹窗坐标，用以区别是哪个弹窗
                let geometry = e.graphic.geometry;
                popup_point.x = geometry.x;
                popup_point.y = geometry.y;
            	
            });

            var all_points = [];
            //添加车辆图标到地图 
			function ShowLocation(x, y ,desc) {
				//点坐标
				var point = new Point(x, y, new SpatialReference({
					wkid: 4326
				}));
				//标记图标
				var symbol = new esri.symbol.PictureMarkerSymbol("./img/carLogo.png", 25, 20);
				
				var graphic = new Graphic(point, symbol);
				
				let attr = {x:x,y:y,desc:'old point'};
				graphic.attr = attr;
				//记录图层上已经填加的车辆坐标
				all_points.push(graphic);
				//增加点们到pointlayer图层
                pointlayer.add(graphic);
			};
			
			//更新弹窗信息
			function updatePopup(data){
				var point = new Point(data.x,data.y,new SpatialReference({
					wkid: 4326
				}));
				popup.hide();
				var dom = "<table>"+
			         "<tr><td>车牌</td><td>12345</td></tr>"+
			         "<tr><td>经纬度</td><td>116.7  39.9</td></tr>"+
			    "</table>";
                popup.setTitle('图形信息');
                popup.setContent(dom);
				popup.show(point)
			}
			
			//模拟车辆的运动
			setTimeout(function(){
				//修改坐标
				let x_old = lnglats[0]['oldPosition'][0], y_old = lnglats[0]['oldPosition'][1];
				let x = lnglats[0]['position'][0],y = lnglats[0]['position'][1];
				var point = new Point(x,y,new SpatialReference({
					wkid: 4326
				}));
				//移动车辆位置
				all_points[0].setGeometry(point);
				
				//修改弹窗绑定信息
				let attr ={x:x,y:y,desc:'moved new points'};
				all_points[0].attr = attr;
				
				//修改弹窗信息
				if(popup_point.x == x_old&popup_point.y == y_old){
				    updatePopup(attr);
				}
				
			},5000);
        });


    </script>
</head>
<body>
<!-- 地图div的id设为map -->
<div id="map"></div>
</body>
</html>