简体   繁体   English

如何使用ArcGIS JavaScript API直接绘制点和文本

[英]How to directly draw points and text with ArcGIS JavaScript API

I am new to ArcGIS. 我是ArcGIS的新手。

I want to directly draw some points and some text on the map. 我想直接在地图上绘制一些点和一些文本。

something like below. 像下面这样。 but it just show map and draw nothing. 但它只显示地图,什么也没画。

anyone can help me fix this problem? 任何人都可以帮助我解决此问题?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Draw point and text</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis?v=3.1"></script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.layers.agsdynamic");
var map;
var layer;
var mapUrl;
var defaultSymbol;
function Init() 
{
    map = new esri.Map("mapDiv");
    mapUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer";
    //mapUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer";
    layer = new esri.layers.ArcGISDynamicMapServiceLayer(mapUrl);
    map.addLayer(layer);        
    defaultSymbol = new esri.symbol.SimpleMarkerSymbol(); // point
    defaultSymbol.setColor(new dojo.Color([255, 0, 0]));

    addPoint(10, 10);
    addText(10, 20, "Text");
}
function addPoint(x, y)
{
    var pt = new esri.geometry.Point(x, y, map.spatialReference);
    var graphic = new esri.Graphic(pt, defaultSymbol);
    map.graphics.add(graphic);
}
function addText(x, y, text) 
{
    var pt = new esri.geometry.Point(x, y, map.spatialReference);

    //Create font
    var font = new esri.symbol.Font();
    font.setSize(18);
    font.setWeight(esri.symbol.Font[WEIGHT_NORMAL]);

    //Create the TextSymbol
    var textSymbol = new esri.symbol.TextSymbol();
    textSymbol.setText(text);
    textSymbol.setColor(new dojo.Color([0, 255, 0]));
    textSymbol.setFont(font);
    textSymbol.setKerning(true);
    var graphic = new esri.Graphic(pt, textSymbol);
    map.graphics.add(graphic);
}

 dojo.addOnLoad(Init);
     </script>  
    </head>
   <body class="tundra">
   <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
   </body>  
   </html>

use Tiled Map as base map, then add Dynamic Map layers, change addPoint function: Note: the wkid dependent on your map spatial. 使用平铺地图作为基础地图,然后添加动态地图图层,更改addPoint函数:注意:wkid取决于您的地图空间。

function addPoint(x, y)
{
   var point = new esri.geometry.Point(x, y, new esri.SpatialReference({ wkid: 102113 }));
   var mp = esri.geometry.geographicToWebMercator(point);
   point = new esri.geometry.Point({ "x": mp.x, "y": mp.y, "spatialReference": { "wkid": 102113} });
   var graphic = new esri.Graphic(point, defaultSymbol);
   map.graphics.add(graphic);
}

There's nothing wrong with your graphics code. 您的图形代码没有错。

I tried to run your code as-is, but the map.graphics object was null - I couldn't load that sample layer from ESRI. 我尝试按原样运行您的代码,但是map.graphics对象为null-我无法从ESRI加载该示例图层。 I replaced your line: 我替换了您的行:

map.addLayer(layer)

with

map.addLayer(new esri.layers.OpenStreetMapLayer());

just to get some base data up, and I got a red dot and some green text somewhere off the coast of Africa. 只是为了获取一些基础数据,我在非洲沿海某处出现了一个红点和一些绿色文本。 It looks like the dynamic layer isn't creating a graphics object...? 好像动态图层没有在创建图形对象...?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM