arcgis js 简单示例

2023-09-25 14 0

文章目录

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

4+版本

参考文档

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

基本型

<!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/4.13/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.13/"></script><style>html, body, #viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style></head><body><div id="viewDiv"></div></body><script>require(["esri/Map","esri/views/MapView"], function(Map, MapView) {var map = new Map({basemap: "topo-vector"});var view = new MapView({container: "viewDiv",map: map,center: [-118.80500, 34.02700], // longitude, latitudezoom: 13});});</script>  
</html>

在这里插入图片描述

添加点线面

<!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/4.13/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.13/"></script><style>html, body, #viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style></head><body><div id="viewDiv"></div></body><script>require(["esri/Map","esri/views/MapView","esri/Graphic","esri/layers/GraphicsLayer"], function(Map, MapView, Graphic, GraphicsLayer) {var map = new Map({basemap: "topo-vector"});var view = new MapView({container: "viewDiv",map: map,center: [-118.80657463861, 34.0005930608889], // longitude, latitudezoom: 13});var graphicsLayer = new GraphicsLayer();map.add(graphicsLayer);//点var point = {type: "point",longitude: -118.80657463861,latitude: 34.0005930608889};var simpleMarkerSymbol = {//设置样式type: "simple-marker",color: [226, 119, 40],  // orangeoutline: {color: [255, 255, 255], // whitewidth: 1}};var pointGraphic = new Graphic({geometry: point,symbol: simpleMarkerSymbol});graphicsLayer.add(pointGraphic);    //------------//线var simpleLineSymbol = {type: "simple-line",color: [226, 119, 40], // orangewidth: 2};var polyline = {type: "polyline",paths: [[-118.821527826096, 34.0139576938577],[-118.814893761649, 34.0080602407843],[-118.808878330345, 34.0016642996246]]};var polylineGraphic = new Graphic({geometry: polyline,symbol: simpleLineSymbol})graphicsLayer.add(polylineGraphic);//面var polygon = {type: "polygon",rings: [[-118.818984489994, 34.0137559967283],[-118.806796597377, 34.0215816298725],[-118.791432890735, 34.0163883241613],[-118.79596686535, 34.008564864635],[-118.808558110679, 34.0035027131376]]};var simpleFillSymbol = {type: "simple-fill",color: [227, 139, 79, 0.8],  // orange, opacity 80%outline: {color: [255, 255, 255],width: 1}};var polygonGraphic = new Graphic({geometry: polygon,symbol: simpleFillSymbol});graphicsLayer.add(polygonGraphic);});</script>  
</html>

在这里插入图片描述

添加多个点

<!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/4.13/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.13/"></script><style>html, body, #viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style></head><body><div id="viewDiv"></div></body><script>require(["esri/Map","esri/views/MapView","esri/Graphic","esri/layers/GraphicsLayer"], function(Map, MapView, Graphic, GraphicsLayer) {var map = new Map({basemap: "topo-vector"});var view = new MapView({container: "viewDiv",map: map,center: [-118.80657463861, 34.0005930608889], // longitude, latitudezoom: 12});var graphicsLayer = new GraphicsLayer();map.add(graphicsLayer);//点var point = {type: "point",longitude: -118.80657463861,latitude: 34.0005930608889};var point2 = {type: "point",longitude: -119.00657463861,latitude: 34.0005930608889};var simpleMarkerSymbol = {type: "simple-marker",color: [226, 119, 40],  // orangeoutline: {color: [255, 255, 255], // whitewidth: 1}};var pointGraphic = new Graphic({geometry: point,symbol: simpleMarkerSymbol});graphicsLayer.add(pointGraphic);    graphicsLayer.add(new Graphic({geometry: point2,symbol: simpleMarkerSymbol}));    //------------});</script>  
</html>

点击后弹出自定义提示框

<!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/4.13/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.13/"></script><style>html, body, #viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style></head><body><div id="viewDiv"></div></body><script>require(["esri/Map","esri/views/MapView","esri/Graphic","esri/layers/GraphicsLayer"], function(Map, MapView, Graphic, GraphicsLayer) {var map = new Map({basemap: "topo-vector"});var view = new MapView({container: "viewDiv",map: map,center: [-118.80657463861, 34.0005930608889], // longitude, latitudezoom: 12});var graphicsLayer = new GraphicsLayer();map.add(graphicsLayer);//点var point = {type: "point",longitude: -118.80657463861,latitude: 34.0005930608889};var simpleMarkerSymbol = {type: "simple-marker",color: [226, 119, 40],  // orangeoutline: {color: [255, 255, 255], // whitewidth: 1}};//*** ADD ***//// Create attributesvar attributes = {Name: "My point",  // The name of theLocation: " Point Dume State Beach",  // The owner of the};// Create popup templatevar popupTemplate = {title: "{Name}",content: "I am located at <b>{Location}</b>."};var pointGraphic = new Graphic({geometry: point,symbol: simpleMarkerSymbol,attributes: attributes,popupTemplate: popupTemplate});graphicsLayer.add(pointGraphic);    });</script>
</html>

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

    var attributes = {Name: "My point",  // The name of theLocation: " 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});

自定义点图标与位置标签

<!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/4.13/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.13/"></script><style>html, body, #viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style></head><body><div id="viewDiv"></div></body><script>require(["esri/Map","esri/views/MapView","esri/Graphic","esri/layers/GraphicsLayer"], function(Map, MapView, Graphic, GraphicsLayer) {var map = new Map({basemap: "topo-vector"});var view = new MapView({container: "viewDiv",map: map,center: [-118.80657463861, 34.0005930608889], // longitude, latitudezoom: 12});var graphicsLayer = new GraphicsLayer();map.add(graphicsLayer);// Add a blue location pinvar pictureGraphic = new Graphic({geometry: {type: "point",longitude: -118.80657463861,latitude: 34.0005930608889},symbol: {type: "picture-marker",url: "num_1.png",//图片地址width: "18px",height: "18px"}});graphicsLayer.add(pictureGraphic);// Add text below the pinvar textGraphic = new Graphic({geometry: {type: "point",longitude: -118.80657463861,latitude: 34.0005930608889},symbol: {type: "text",color: [25,25,25],//字颜色haloColor: [255,255,255],//字边框颜色haloSize: "1px",text: "This is my location!",xoffset: 0,//与坐标的x轴偏移yoffset: -25,//与坐标的y轴偏移font: {size: 12}}});graphicsLayer.add(textGraphic);  });</script>
</html>

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

3+版本

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

添加点及弹出信息框

<!DOCTYPE html>
<html>
<!--
参考文章
https://blog.csdn.net/idomyway/article/details/84798010
--><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>

在这里插入图片描述

绘制热力图

主要参考的这篇文章
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>

在这里插入图片描述

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,只能使用其他方法来实现了。
先随便写一个有弹出框的页面

在这里插入图片描述
然后观察地图渲染后的js源码。
在这里插入图片描述
其中,蓝色底色的部分即是信息框的代码,并且可以得知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"><!--<a title="缩放至" class="action zoomTo" href="javascript:void(0);"><span>缩放至</span></a>--></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>
代码编程
赞赏

相关文章

stos 汇编指令的含义(图文并茂,一目了然)
特殊图
图文并茂详解NAT协议(含实例分析)
任意个数异或最大值(DFS)
图文并茂,Spring Boot Starter 万字详解!还有谁不会?
过山车【HDOJ2063】