ArcGIS动态渲染标记的简单示例

ArcGIS simple example dynamically rendering a marker

本文关键字：简单 动态 ArcGIS      更新时间：2023-09-26

我很难在ArcGIS中添加一个简单的可点击标记，纯粹使用JavaScript进行映射。所有ArcGIS示例似乎都是从服务器上获取标记和相关弹出信息的如何使用ArcGIS获得与下面的谷歌地图示例代码相同的结果

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="width: 500px; height: 500px;"></div>
<script type="text/javascript">
    window.onload = function() {
        var myOptions = {
            zoom: 2,
            center: new google.maps.LatLng(40, -75),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var icon = new google.maps.MarkerImage("http://cinnamonthoughts.org/wp-content/uploads/2010/01/Custom-Marker-Avatar.png");
        var markerOptions = {
            icon: icon,
            map: map,
            position: new google.maps.LatLng(37.7699298, -122.4469157),
        };
        var marker = new google.maps.Marker(markerOptions);
        google.maps.event.addListener(marker, 'click', function() {
            var infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent("hello world");
            infoWindow.open(map, marker);
        });
    };
</script>

试试这个：

  1. 为您创建经度和纬度Point
  2. 如有必要，将点转换为Web Mercator空间参考
  3. 为您的自定义图片标记创建图片标记符号
  4. 使用点和符号创建Graphic
  5. 创建GraphicsLayer
  6. 将图形添加到图形层
  7. 将图形图层添加到地图中
  8. 将自定义onClick事件侦听器添加到层

一些等效代码：

var point = new esri.geometry.Point(longitude, latitude);
point = esri.geometry.geographicToWebMercator(point);
var symbol = new esri.symbol.PictureMarkerSymbol("marker.png", 32, 32);
var graphic = new esri.Graphic(point, symbol);
var layer = new esri.layers.GraphicsLayer();
layer.add(graphic);
map.addLayer(layer);
dojo.connect(layer, "onClick", onClick);

在事件监听器上，您可以打开自定义infoWindow或任何您喜欢的东西：

function onClick(event) {
    map.infoWindow(...)
...

更改"marker.png"和32x32以使用自定义标记图像和尺寸。

尝试使用CSS定位将图像图标放在屏幕X Y上的任何位置，然后将onClick处理程序放在实际的div或IMG标记中。试着用相对和绝对的组合来达到恰到好处的效果。

div#header {
position: relative;
}
img#headimg {
position: absolute;
left: whatever you like
top: whatever you like
}
相关文章：