esri/symbols/SimpleMarkerSymbol 点符号

本文介绍如何使用AMD模块加载Esri的SimpleMarkerSymbol,该符号用于在地图上绘制点或多点。提供了构造函数、常量、属性及方法等详细信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

AMD模块要求 ]

require ([ “esri / symbols / SimpleMarkerSymbol” ],function (SimpleMarkerSymbol ){ / * code goes here * / });   

描述

标记符号用于在图形图层上绘制点和多点。SimpleMarkerSymbol用于将点显示为简单形状,例如圆形。此外,符号可以有一个可选的轮廓,由线符号(SimpleLineSymbol)定义。

 

构造函数

 

名称简述
new SimpleMarkerSymbol()创建一个空的点符号对象(无样式)
new SimpleMarkerSymbol(style, size, outline, color)通过参数创建一个点符号对象
new SimpleMarkerSymbol(json)使用JSON创建一个点符号对象

常量

NameDescription
STYLE_CIRCLE圆符号
STYLE_CROSSThe marker is a cross.
STYLE_DIAMONDThe marker is a diamond.
STYLE_PATHThe marker is a shape defined using an SVG Path string. See also the setPath method.
STYLE_SQUAREThe marker is a square.
STYLE_XThe marker is a diagonal cross.

 

属性

名称类型简述
angleNumberThe angle of the marker.
colorColorSymbol color.
outlineSimpleLineSymbolOutline of the marker.
sizeNumberSize of the marker in pixels.
styleStringThe marker style.
typeStringThe type of symbol.
xoffsetNumberThe offset on the x-axis in pixels.
yoffsetNumberThe offset on the y-axis in pixels.

 

方法

NameReturn typeSummary
setAngle(angle)MarkerSymbolRotates the symbol clockwise around its center by the specified angle.
setColor(color)SymbolSets the symbol color.
setOffset(x, y)MarkerSymbolSets the x and y offset of a marker in screen units.
setOutline(outline)SimpleMarkerSymbolSets the outline of the marker symbol.
setPath(path)SimpleMarkerSymbolSets the marker shape to the given path string and switches the marker style to STYLE_PATH.
setSize(size)MarkerSymbolSets the size of a marker in pixels.
setStyle(style)SimpleMarkerSymbolSets the marker symbol style.
toJson()ObjectConverts object to its ArcGIS Server JSON representation.

 

构造函数详细信息

 

require([
  "esri/symbols/SimpleMarkerSymbol", ... 
], function(SimpleMarkerSymbol, ... ) {
  var sms = new SimpleMarkerSymbol();
  ...
});

 

检查一下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>添加地图小部件</title> <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css"> <script src="https://js.arcgis.com/3.45/init.js"></script> <style> html, body, #mapDiv { padding: 0; margin: 0; width: 100%; height: 100%; } </style> <script> /*在arcgis api for javascript中,提供了一个类叫做esri/toolbars/navigation, 通过这个类,用户可以实现对地图的基本操作。 */ require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/dijit/Scalebar", "esri/symbols/SimpleMarkerSymbol", "esri/toolbars/draw", "esri/graphic", "esri/layers/GraphicsLayer", "esri/Color", ], function(Map, ArcGISDynamicMapServiceLayer, Scalebar, SimpleMarkerSymbol, Draw, Graphic, GraphicsLayer, Color ) { var map = new Map("mapDiv", { center: [-95.625,39.243], zoom:2, basemap: "hybrid" , isPan:false,//禁止平移 }); //调用动态地图服务 var layer = new ArcGISDynamicMapServiceLayer( "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",{ "opacity": 0.75 }) map.addLayer(layer) ; //添加比例尺 var scalebar = new Scalebar({ map: map,// 参考底图,必选项 attachTo: "bottom-left", // 指定比例尺在地图上的位置 scalebarStyle:"line",// 比例尺类型,比例尺以线性显示 scalebarUnit: "english",// 比例尺单位 }); // 声明一个draw工具条 var toolBar = new Draw(map); // 绑定激活绘图工具的函数 function activate_tool() { // 根据class获取所有按钮 var btns = document.getElementsByClassName('btn-info'); console.log('btns',btns) for(var i = 0; i < btns.length; ++ i) { var type = btns[i].getAttribute('aria-label'); // 绘制 if (type === "POINT") { btns[i].onclick = function() { toolBar.activate(Draw.POINT) }; // 结束绘制 } else if (type === "disabledraw") { btns[i].onclick = function() { toolBar.deactivate(); } } }}; // 调用函数 activate_tool(); // 为声明的draw工具添加了一个draw-complete事件,绘图结束后将图形显示在地图上 toolBar.on("draw-complete", drawEndEvent) function drawEndEvent(evt) { var geometry=evt.geometry; console.log("geometry",geometry) var type=geometry.type; console.log("type",type) // 创建符号 var pointSymbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_TRIANGLE,//的形状 20,//的大小 new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]), 1),//轮廓线的样式 new Color([0,255,0,0.25])//的颜色 ); // 添加图形到地图 if (type === "point") { var graphic=new Graphic(geometry,pointSymbol); } var graphicslayer=new GraphicsLayer(); graphicslayer.add(graphic); map.addLayer(graphicslayer); } }); </script> </head> <body> <button class='btn-info' aria-label="POINT"></button> <button class='btn-info' aria-label="disabledraw">结束绘制</button> <div id="mapDiv"></div> </body> </html>
06-07
检查以下代码有无错误有无冗余:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>WebGIS的地图应用</title> <!-- 在head部分增加引用esri提供的样式表 --> <link rel="stylesheet" href="https://js.arcgis.com/3.45/esri/css/esri.css"> <!-- 增加一个script标签,在该标签中引入ArcGIS API for JavaScript,实现ArcGIS API for JavaScript的调用 --> <script src="https://js.arcgis.com/3.45/init.js"></script> <style> /* 通过style标签来设置html body mapDiv的样式 */ html, body, #mapDiv { padding: 0;/* 外边距 */ margin: 0;/* 内边距 */ width: 100%;/* 宽 */ height: 100%;/* 高 */ } #legendDiv{ width:200px; height:600px; position:absolute !important; top:200px; left:10px; } </style> <script> require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/dijit/Scalebar", "esri/symbols/SimpleMarkerSymbol", "esri/toolbars/draw", "esri/graphic", "esri/layers/GraphicsLayer", "esri/Color", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/renderers/UniqueValueRenderer", "esri/symbols/SimpleFillSymbol", "esri/dijit/Legend" ], function( Map, ArcGISDynamicMapServiceLayer, Scalebar, SimpleMarkerSymbol, Draw, Graphic, GraphicsLayer, Color, FeatureLayer, InfoTemplate, UniqueValueRenderer, SimpleFillSymbol, Legend ) { var map = new Map("mapDiv", { center: [-95.625,39.243],// 经纬度中心 zoom:2, // 缩放级数 basemap: "hybrid" // 混合底图类型 }); //添加比例尺 var scalebar = new Scalebar({ map: map,// 参考底图,必选项 attachTo: "bottom-left", // 指定比例尺在地图上的左下角 scalebarStyle:"line",// 比例尺类型,比例尺以线性显示 scalebarUnit: "english",// 比例尺单位 }); // 声明一个draw工具条 var toolBar = new Draw(map); // 绑定激活绘图工具的函数 function activate_tool() { // 根据class获取所有按钮 var btns = document.getElementsByClassName('btn-info'); console.log('btns',btns) for(var i = 0; i < btns.length; ++ i) { var type = btns[i].getAttribute('aria-label'); // 绘制 if (type === "POINT") { btns[i].onclick = function() { toolBar.activate(Draw.POINT) }; // 结束绘制 } else if (type === "disabledraw") { btns[i].onclick = function() { toolBar.deactivate(); } } }}; // 调用函数 activate_tool(); // 为声明的draw工具添加了一个draw-complete事件,绘图结束后将图形显示在地图上 toolBar.on("draw-complete", drawEndEvent) function drawEndEvent(evt) { var geometry=evt.geometry; console.log("geometry",geometry) var type=geometry.type; console.log("type",type) // 创建符号 var pointSymbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_TRIANGLE,//的形状 20,//的大小 null,//轮廓线的样式 new Color([255,0,127,0.5])//的颜色 ); // 添加图形到地图 var graphic=new Graphic(geometry,pointSymbol); var graphicslayer=new GraphicsLayer(); graphicslayer.add(graphic); map.addLayer(graphicslayer); } var featurelayer=new FeatureLayer('https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2',//必选参数 { mode:FeatureLayer.MODE_SNAPSHOT,//指定构造要素图层时显示的模式 outFields:["*"],//指定返回的数据值,*表示返回所有值 infoTemplate:new InfoTemplate(" ", "${sub_region}"), } ) var defaultSymbol=new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL); //声明独立值专题图 var renderer = new UniqueValueRenderer( defaultSymbol, //默认符号 "sub_region"//渲染器用于匹配值的属性字段 ); //为独立值指定不同的符号 renderer.addValue("Pacific",new SimpleFillSymbol().setColor(new Color([255,0,0,0.5]))) renderer.addValue("Mtn",new SimpleFillSymbol().setColor(new Color([255,128,0,0.5]))) renderer.addValue("N Eng",new SimpleFillSymbol().setColor(new Color([255,255,0,0.5]))) renderer.addValue("S Atl",new SimpleFillSymbol().setColor(new Color([0,255,0,0.5]))) renderer.addValue("Mid Atl",new SimpleFillSymbol().setColor(new Color([0,255,255,0.5]))) renderer.addValue("E N Cen",new SimpleFillSymbol().setColor(new Color([0,0,255,0.5]))) renderer.addValue("W N Cen",new SimpleFillSymbol().setColor(new Color([128,0,128,0.5]))) renderer.addValue("E S Cen",new SimpleFillSymbol().setColor(new Color([75,0,130,0.5]))) renderer.addValue("W S Cen",new SimpleFillSymbol().setColor(new Color([138,43,226,0.5]))) //调用要素图层的setRenderer的方法,生成专题图 featurelayer.setRenderer(renderer) //将要素图层添加到地图 map.addLayer(featurelayer) //添加图例 var legend = new Legend({ map: map, layerInfos:[{ //layerInfos是个对象,指定地图中要显示在图例中的图层的子集 layer:featurelayer, //添加到图例中的图层 title:"美国各区域分布图例" //指定图层标题 }] }, "legendDiv"); legend.startup(); }); </script> </head> <body> <button class='btn-info' aria-label="POINT"></button> <button class='btn-info' aria-label="disabledraw">结束绘制</button> <div id="mapDiv"></div> <div id="legendDiv"></div> </body> </html>
最新发布
06-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值