arcgis js 简单示例

快来打我* 2021-09-23 11:46 357阅读 0赞

### 文章目录 ###

*   *  4+版本
     *   *  参考文档
         *  基本型
         *  添加点线面
         *  添加多个点
         *  点击后弹出自定义提示框
         *  自定义点图标与位置标签
     *  3+版本
     *   *  添加点及弹出信息框
         *  绘制热力图
         *  js弹出指定点的信息框
         *  弹出多个信息框

## 4+版本 ##

### 参考文档 ###

[https://developers.arcgis.com/labs/javascript/display-point-line-and-polygon-graphics/][https_developers.arcgis.com_labs_javascript_display-point-line-and-polygon-graphics]  
[http://desktop.arcgis.com/zh-cn/arcmap/latest/get-started/main/get-started-with-arcmap.htm][http_desktop.arcgis.com_zh-cn_arcmap_latest_get-started_main_get-started-with-arcmap.htm]

### 基本型 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]

### 添加点线面 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]

### 添加多个点 ###

### 点击后弹出自定义提示框 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 2]  
这里用到了一个挺奇怪的语法

var attributes = { 
            Name: "My point",  // The name of the
            Location: " Point Dume State Beach",  // The owner of the
        };

相当于临时定义了一个数据字典，在`popupTemplate`中，括号内的部分会按照attributes 中设定的值进行替换。也就是说，直接设置成这样也是可以的

var popupTemplate = { 
            title: "My point111",
            content: "I am located at <b> Point Dume State Beach222</b>."
        };
    
        var pointGraphic = new Graphic({ 
            geometry: point,
            symbol: simpleMarkerSymbol,
             
            //attributes: attributes,
            popupTemplate: popupTemplate
        });

### 自定义点图标与位置标签 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 3]可以看出，这是用两个对象分别实现的，即通过symbol的type属性来区分标记的类型。

## 3+版本 ##

[https://developers.arcgis.com/javascript/3/][https_developers.arcgis.com_javascript_3]  
还是要吐槽一下3版本的官方文档，对web开发真的很不友好，找点api真叫一个累。不过相关的博客文章到是有很多。

### 添加点及弹出信息框 ###

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    		<title>Tiled map service</title>
    
    		<link rel="stylesheet" href="http://127.0.0.1:8020/arcgis_js_v318_api/arcgis_js_api/library/3.18/3.18/esri/css/esri.css">
    
    		<style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } </style>
    
    		<script src="http://127.0.0.1:8020/arcgis_js_v318_api/arcgis_js_api/library/3.18/3.18/init.js"></script>
    
    		<script> var map; var td; require(["esri/map", "esri/InfoTemplate", "esri/symbols/PictureMarkerSymbol", "dojo/on", "esri/Color", "dojo/query", "esri/geometry/Point", "esri/geometry/Polyline", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/graphic", "esri/layers/GraphicsLayer", "dojo/domReady!" ], function( Map, InfoTemplate, PictureMarkerSymbol, on, Color, query, Point, Polyline, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Draw, SimpleMarkerSymbol, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, Graphic, GraphicsLayer, QueryTask) { var map = new Map("map", { //basemap: "streets", center: [123.415, 41.65], zoom: 5, showAttribution: false }); //地图服务 var tiled = new ArcGISTiledMapServiceLayer("http://11.22.33.44:9898/test/arcgis/rest/services/MapServer?Authorization=Basic TUtMWUzYTViYzY0NWQwOmM5N2M0MjM2Mzd"); map.addLayer(tiled); map.on("load", function(featureSet) { simpleMarkerSymbol = new PictureMarkerSymbol({ "url":"num_1.png",//本地图片地址 "height":15, "width":20, "type":"esriPMS", "angle": 0, }); //创建客户端图层 var graphicsLayer=new GraphicsLayer(); //将客户端图层添加到地图中 map.addLayer(graphicsLayer); var geometry=new Point({ "x": 123.415, "y": 41.65 }); var graphic=new Graphic(geometry,pSymbol); graphic.setSymbol(simpleMarkerSymbol); // map.on("click", function(evt) { // // }); var infoTemplate = new InfoTemplate("标题信息", "<p>FID:111</p>" + //html代码 "<p>NAME:222</p>" + "<p>address:333</p>" ); graphicsLayer.add(graphic); graphicsLayer.setInfoTemplate(infoTemplate); }); map.on("zoom-end", function(params){ //缩放事件 console.log(params); console.log(params.level); console.log(params.anchor); console.log(map); }); //end } ); </script>
    	</head>
    
    	<body>
    		<div id="map"></div>
    	</body>
    	<script type="text/javascript"> </script>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 4]

### 绘制热力图 ###

主要参考的这篇文章  
[https://www.jianshu.com/p/3b36a05872e2][https_www.jianshu.com_p_3b36a05872e2]  
里面写的很详细，只是代码不够纯净，我又扒了一份。

还是要说一句官方文档，我已经把所有热力图相关的文档都看一了遍，如果不是看了上面那篇文章，我是怎么也想不到`esri.layers.FeatureLayer`对象是可以往里添加点的。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    		<title>Tiled map service</title>
    		<link rel="stylesheet" href="http://127.0.0.1:8020/arcgis_js_v318_api/arcgis_js_api/library/3.18/3.18/esri/css/esri.css">
    		<style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } </style>
    
    		<script src="http://127.0.0.1:8020/arcgis_js_v318_api/arcgis_js_api/library/3.18/3.18/init.js"></script>
    		<script> var map; var td; require(["esri/map", "esri/renderers/HeatmapRenderer", "esri/InfoTemplate", "esri/symbols/PictureMarkerSymbol", "dojo/on", "esri/Color", "dojo/query", "esri/geometry/Point", "esri/geometry/Polyline", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/graphic", "esri/layers/GraphicsLayer", "dojo/domReady!" ], function( Map, HeatmapRenderer, InfoTemplate, PictureMarkerSymbol, on, Color, query, Point, Polyline, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Draw, SimpleMarkerSymbol, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, Graphic, GraphicsLayer, QueryTask) { var map = new Map("map", { //basemap: "streets", center: [123.415, 41.65], zoom: 5, showAttribution: false }); //地图服务 var tiled = new ArcGISTiledMapServiceLayer("http://11.22.33.44:9898/arcgis/rest/services/MapServer?Authorization=Basic NTUtMWUzYTViYzY0NWQwOmMzdlMDBhOWZlMWY4QxMTQzMWNl"); map.addLayer(tiled); map.on("load", function(featureSet) { var layerDefinition = { "geometryType": "esriGeometryPoint", "fields": [{ "name": "num", "type": "esriFieldTypeInteger", "alias": "num" }] } var featureCollection = { layerDefinition: layerDefinition, featureSet: null }; //创建FeatureLayer图层 var featureLayer = new esri.layers.FeatureLayer(featureCollection, { mode: esri.layers.FeatureLayer.MODE_SNAPSHOT, outFields: ["*"], opacity: 1 }); var heatmapRenderer = new HeatmapRenderer({ field: "num", colors: ["rgba(255, 0, 0, 0)", "rgb(0, 255, 0)", "rgb(255, 255, 0)", "rgb(255, 0, 0)"], blurRadius: 12, // maxPixelIntensity: 20, // minPixelIntensity: 2 }); featureLayer.setRenderer(heatmapRenderer); //heatmapRendererhtml中创建的渲染器 map.addLayer(featureLayer); //随便添加3条测试数据 var point = new esri.geometry.Point(123.415, 41.65, new esri.SpatialReference({ wkid: 4326//没看出有什么用，先放着了 })); //初始化起点 var graphic = new esri.Graphic(point); graphic.setAttributes({ "num": 123//点的权重 }); featureLayer.add(graphic); point = new esri.geometry.Point(123.615, 41.65, new esri.SpatialReference({ wkid: 4326 })); //初始化起点 graphic = new esri.Graphic(point); graphic.setAttributes({ "num": 12 }); featureLayer.add(graphic); point = new esri.geometry.Point(123.515, 41.75, new esri.SpatialReference({ wkid: 4326 })); //初始化起点 graphic = new esri.Graphic(point); graphic.setAttributes({ "num": 432 }); featureLayer.add(graphic); }); //end } ); </script>
    	</head>
    
    	<body>
    		<div id="map"></div>
    	</body>
    	<script type="text/javascript"> </script>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 5]

### js弹出指定点的信息框 ###

通过js弹出指定Graphic对象的InfoTemplate信息。本来想着触发Graphic的click事件来实现的，但是并没有找到相应的api。  
于是换了一种方式，通过infoWindow来模拟出Graphic点击后的样子。infoWindow可以设置出现位置，并且在出现时，会顶替掉Graphic的InfoTemplate。

相关方法代码

var pt = new esri.geometry.Point(123, 41, map.spatialReference);//创建点对象
    map.centerAt(pt);//对地图中心进行重新定位//graphic.geometry
    map.infoWindow.setTitle("标题信息");//graphic.getTitle()
    map.infoWindow.setContent("html格式 内容代码");//graphic.getContent()
    
    map.infoWindow.show(pt, map.getInfoWindowAnchor(pt));//显示信息
    //map.infoWindow.hide();//隐藏信息

还需要一种方式去存储地图上所有点的坐标与详情信息，很简单不写了。

### 弹出多个信息框 ###

依然没有找到相关api，只能使用其他方法来实现了。  
先随便写一个有弹出框的页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 4]  
然后观察地图渲染后的js源码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 6]  
其中，蓝色底色的部分即是信息框的代码，并且可以得知arcgis是通过其中的left，top属性来定位的。  
现在需要做的就是，把自定义的弹窗代码加入到map\_root下，并动态的进行定位。前者可以通过jquery轻松实现，后者需要用到这个api—`map.toScreen(new esri.geometry.Point(lng, lat));` 。这会把地理坐标转换为浏览器坐标。当拖动地图时，也需要重新定位，会用到这几个事件

//地图边缘改变
    				map.on('extent-change', function (e) { 
                    	
                    });
                    //鼠标拖拽
    	            map.on('mouse-drag', function (e) { 
                    	
                    });
                    //鼠标滚轮
                    map.on('mouse-wheel', function (e) { 
                    	
                    });

理论上来说mouse-drag应该能处理好拖拽时的变化，但是实际上显示会出现bug，我后面的代码里没有使用。这也导致了只有在鼠标拖拽完成之后，才会重新对弹窗进行定位。

完整代码

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    		<title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    		<link rel="stylesheet" href="https://js.arcgis.com/3.31/esri/css/esri.css">
    		<script src="https://js.arcgis.com/3.31/"></script>
    		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    		<style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style>
    	</head>
    
    	<body>
    		<div id="map"></div>
    		
    <div id="custom_window_info_template" style="display: none;">
    <div id="custom_position" class="esriPopup esriPopupVisible custom_" style="z-index: 40; left: 683px; top: 398px;">
    	<div class="esriPopupWrapper" style="position: absolute; left: 16px; top: -29px;">
    		<div class="sizer">
    			<div class="titlePane" style="user-select: none;">
    				<div class="spinner hidden" title="正在搜索..."></div>
    				<div id="custom_title" class="title">title 内容</div>
    				<div class="titleButton prev hidden" title="上一个要素"></div>
    				<div class="titleButton next hidden" title="下一个要素"></div>
    				<div class="titleButton maximize hidden" title="最大化"></div>
    				<div class="titleButton close hidden" title="关闭"></div>
    			</div>
    		</div>
    		<div class="sizer content">
    			<div id="custom_content" class="contentPane">html 格式内容</div>
    		</div>
    		<div class="sizer">
    			<div class="actionsPane">
    				<div class="actionList hidden">
    					
    				</div>
    			</div>
    		</div>
    		<div class="pointer"></div>
    	</div>
    	<div class="outerPointer left"></div>
    </div>		
    		
    	</body>
    	<script> require(["esri/map", "esri/geometry/Point" ], function(Map, Point) { var map = new Map("map", { center: [-118, 34.5], zoom: 8, basemap: "topo" }); map.on("load", function(featureSet) { // var pt = new Point(-118, 34.5); // map.infoWindow.setTitle("title"); // map.infoWindow.setContent( // "html" // ); // map.infoWindow.show(pt, map.getInfoWindowAnchor(pt)); jQuery("#map_root").append("<div id=\"mapInfo\"></div>"); var customWindowInfo = function(title, content, lng, lat){ jQuery("#custom_window_info_template #custom_position").attr("lng", lng); jQuery("#custom_window_info_template #custom_position").attr("lat", lat); jQuery("#custom_window_info_template #custom_title").html(title); jQuery("#custom_window_info_template #custom_content").html(content); var tempSc = map.toScreen(new esri.geometry.Point(lng, lat)); jQuery("#custom_window_info_template #custom_position").css("left", tempSc.x + "px"); jQuery("#custom_window_info_template #custom_position").css("top", tempSc.y + "px"); jQuery("#mapInfo").append(jQuery("#custom_window_info_template #custom_position").prop("outerHTML")); }; customWindowInfo("title title", "content content", -118, 34.5); customWindowInfo("title title", "content content222", -118, 34.8); map.on('extent-change', function (e) { reChangeCustomWindow(); }); map.on('mouse-drag', function (e) { //reChangeCustomWindow(); }); map.on('mouse-wheel', function (e) { reChangeCustomWindow(); }); reChangeCustomWindow = function(){ jQuery("#mapInfo").find(".custom_").each(function(i){ var obj = jQuery(this); var lng = obj.attr("lng"); var lat = obj.attr("lat"); var tempLocation = map.toScreen(new esri.geometry.Point(lng, lat)); obj.css("left", tempLocation.x); obj.css("top", tempLocation.y); }); }; }); }); </script>
    
    </html>

[https_developers.arcgis.com_labs_javascript_display-point-line-and-polygon-graphics]: https://developers.arcgis.com/labs/javascript/display-point-line-and-polygon-graphics/
[http_desktop.arcgis.com_zh-cn_arcmap_latest_get-started_main_get-started-with-arcmap.htm]: http://desktop.arcgis.com/zh-cn/arcmap/latest/get-started/main/get-started-with-arcmap.htm
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]: /images/20210923/9422af1c7ec442db86c0632188d4d363.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]: /images/20210923/2ce7b92395334c1b87c3115698dba650.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 2]: /images/20210923/5e7356a24d5b4e01a4988346cee7516b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 3]: /images/20210923/ba2eb91a6e494e2f86a86f3f0aa34bb6.png
[https_developers.arcgis.com_javascript_3]: https://developers.arcgis.com/javascript/3/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 4]: /images/20210923/1d0ce629057a483c9562a72f07edc03b.png
[https_www.jianshu.com_p_3b36a05872e2]: https://www.jianshu.com/p/3b36a05872e2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 5]: /images/20210923/71a051548094445c8c101441cda6d5b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 6]: /images/20210923/04a119f0926a458c9cb5bca959a2847c.png