欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在不同位置添加标签

程序员文章站 2023-01-21 18:08:54
实现效果是在要素点的四周不同位置添加标签。 此节需要注意一个问题,书写的先后顺序可能会影响运行速度。要注意正确的书写先后。 1、定义涉及到的所有变量 var minScale = 2500000; var serviceUrl = "https://services.arcgis.com/V6ZHF ......

在不同位置添加标签

实现效果是在要素点的四周不同位置添加标签。

此节需要注意一个问题,书写的先后顺序可能会影响运行速度。要注意正确的书写先后。

1、定义涉及到的所有变量

var minscale = 2500000;

var serviceurl = "https://services.arcgis.com/v6zhfr6zdgnzuvg0/arcgis/rest/services/weather_stations_010417/featureserver/0";

2、设置地图视图

var view = new mapview({

  container:"viewdiv",

  map:new webmap({

    portalitem:{id:"f0e331d7986041ba8267298f579b3afe"}

  })

})

3、获取要素图层并添加到视图中的底图中去

<script type="text/plain" id="wind-direction">
  var deg = $feature.wind_direct;
  var speed = $feature.wind_speed;
  var dir = when( speed == 0, "",
    (deg < 22.5 && deg >= 0) || deg > 337.5, "n",
    deg >= 22.5 && deg < 67.5, "ne",
    deg >= 67.5 && deg < 112.5, "e",
    deg >= 112.5 && deg < 157.5, "se",
    deg >= 157.5 && deg < 202.5, "s",
    deg >= 202.5 && deg < 247.5, "sw",
    deg >= 247.5 && deg < 292.5, "w",
    deg >= 292.5 && deg < 337.5, "nw", "" );
  return speed + " mph " + dir;
</script>

var namearcade = "$feature.station_name";

var nameclass = {

  labelexpressioninfo:{expression:namearcade},

  labelplacement:"below-left",

  minscale:minscale,

  symbol:createtextsymbol("black")

};

var humidityarcade = "$feature.r_humidity + '% rh'";

var humidityclass = {

  labelexpressioninfo:{expression:humidityarcade},

  labelplacement:"below-left",

  minscale:minscale,

  symbol:createtextsymbol("#c17c47");

};

var temp = "round($feature.temp)+'f'";

var lowtempclass = {

  labelexpressioninfo:{expression:temp},

  where:"temp<=32",

  labelplacement:"above-left",

  symbol:createtextsymbol("#4792c1");

};

var hightempclass = {

  labelexpressioninfo:{expression:temp},

  where:"temp>32",

  labelplacement:"above-left",

  symbol:createtextsymbol("#f47742");

};

var windclass = { 

  labelexpressioninfo:{expression:document.getelementbyid("wind-direction")},

  labelplacement:"above-right",

  symbol:createtextsymbol("#3ba53f");

};

var layer = new featurelayer({

  url:serviceurl,

  renderer:{

    type:"simple",

    symbol:{

      type:"simple-marker",

      color:[255, 255, 255, 0.6],

      size:4,

      outline:{

        color:[0, 0, 0, 0.4],

        width:0.5

      }

    }

  },

  labelinginfo:[nameclass,humidityclass,lowtempclass,hightempclass,windclass]

});

view.map.add(layer);