Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注
4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性，设置这两个属性可以实现显示将属性中某个字段作为标注。但是这两个属性只针对三维SceneView有效。如下图截图所示。
那么在二维中要实现FeatureLayer添加标注的功能，只能自己在FeatureLayer要素中的某个位置，添加一个TextSymbol的Point要素。结合上一篇讲到的 “获取FeatureLayer中的graphics集合”，我们可以通过如下的方法进行实现
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer - 4.7</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7/"></script>
</head>
<body>
<div id="viewDiv"></div>
<script type="text/javascript">
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"dojo/domReady!"
],
function (Map, MapView, FeatureLayer, GraphicsLayer) {
let map = new Map({
basemap: "satellite"
}); let view = new MapView({
container: "viewDiv",
map: map,
center: [-73.950, 40.702],
zoom: 12,
padding: {
right: 300
}
}); let featureLayer1 = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
outFields: ["OBJECTID_1"]
});
let nameGraphicsLayer = new GraphicsLayer();
map.add(featureLayer1);
map.add(nameGraphicsLayer); view.when(function () {
//地图刚初始化时获取graphics集合，需要监控featureLayer的updating状态完成后才能获取到
view.whenLayerView(featureLayer1).then(function (lyrView) {
lyrView.watch("updating", function(){
lyrView.queryFeatures().then(function (results) {
//console.log(results);
results.forEach(function (g) {
nameGraphicsLayer.add({
geometry: {
type: "point",
latitude: g.geometry.centroid.latitude,
longitude: g.geometry.centroid.longitude
},
symbol: {
type: "text",
color: "white",
text: g.attributes["OBJECTID_1"],
font: {
size: 14,
family: "sans-serif",
weight: "bolder"
}
}
});
});
});
});
});
});
}
);
</script>
</body>
</html>
效果图：
Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注的更多相关文章
- Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合
在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...
- Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置
在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...
- Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
- Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示
在现在的 arcgis_js_v45_api 版本中并没有直接提供点击Polygon对象高亮显示.需要实现如下几个步骤: 1.点击地图时,获取Polygon的Graphic对象: 2.对获取到的Gra ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能
1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果
其实就只是用到了 view.goTo() 函数,再利用 window.setInterval() 函数(定时器)定时执行goTo().代码如下: <!DOCTYPE html> < ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注
1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...
- Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作
1. 不设置默认底图,第一个图层作为底图,然后叠加另外一个图层 先添加图层1,第一个图层1作为默认底图,然后在图层1上叠加图层2,并设置图层2的透明度为50%. <!DOCTYPE html&g ...
- Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果
一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...
随机推荐
- JS错误记录 - fgm练习 - 函数传参
<script> window.onload = function() { var oBtn = document.getElementsByTagName('button')[0]; v ...
- （转）Oracle EXP-00091解决方法
转自:http://blog.csdn.net/dracotianlong/article/details/8270136 EXP-: 正在导出有问题的统计信息. . . 正在导出表 WF_GENER ...
- 【】queue
[链接]点击打开链接 [题意] 实话实说,给 OIER 大神们排队这种工作是最让人头疼的事情了.因为同学们都有自尊 心,都不愿意排后面. 现在共有 n 个同学要排成一列,每个同学有两个属性:影响力和承 ...
- C#中lock
http://www.cnblogs.com/apsnet/archive/2012/07/08/2581475.html
- 重写ajax方法实现异步请求session过期时跳转登录页面（转）
一般我们会在过滤器里判断登录状态,如果没登录就跳转登录页面,过滤器java核心代码如下: UserItem loginUser = (UserItem)request.getSession().get ...
- Android自定义组件系列【11】——实现3D立体旋转效果
今天在网上看到一篇文章写关于Android实现3D旋转(http://www.ibm.com/developerworks/cn/opensource/os-cn-android-anmt2/inde ...
- Ubuntu下成功安装QQ2013
阳光小强最近用Win8系统感觉特别不爽,中午果断换了一个win7系统,又想着能不能搞个双系统(最近在看一些linux东西),于是就开始整起来.结果并不好,linux虽然整好了,但是硬盘全部格式化了,当 ...
- MySQL误删数据救命指南
预防误操作导致文件/数据丢失的建议: 1.欲删除文件时,将rm命令改成mv,可在系统层面将rm命令做个alias(或参考Windows / Mac OSX做法,删除文件时先进回收站).2.删除数据库. ...
- 使用Verdi理解RTL design
使用Verdi理解RTL design 接触到一些RTL代码,在阅读与深入理解的过程中的一些思考记录 协议与设计框图 认真反复阅读理解相关协议与设计框图,一个design的设计文档中,设计框图展示了这 ...
- jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...