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个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...
随机推荐
- 优雅地使用Retrofit+RxJava(二)
前言 在我上一篇讲Retrofit+RxJava在MVP模式中优雅地处理异常(一)中,发现非常多网友发邮箱给我表示期待我的下一篇文章,正好趁着清明假期.我就写写平时我在使用RxJava+Retrofi ...
- Mac怎么设置wifi热点
苹果 Mac 系统中要把无线当作 Wifi 热点来用的话,需要电脑有其它网络接入才可以,也就是说它需要一个可以用于上网的网络,比如有线网络.尤其是对于使用 MacBook Pro 或 MacBook ...
- TableView相关属性
//是否要显示分隔线 tableView.separatorStyle = UITableViewCellSeparatorStyleNone; tableView.separatorStyle = ...
- thinkphp5项目--企业单车网站（八）（文章板块要点）（删除图片）
thinkphp5项目--企业单车网站(八)(文章板块要点)(删除图片) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise ...
- ZOJ 2476 Total Amount 字符串
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1476 题目大意: 给你n串数字组成的字符串,要求输出他们相加的和. 如:n= ...
- GCD 初步学习
GCD应该是比較牛逼的东西了吧,一时半会应该是操作不好. 在cocoa-china上面有两篇关于GCD的文章.GCD 深入理解(一) GCD 深入理解(二) CSDN荣芳志博客:点击打开链接 我仅仅是 ...
- [RxJS] Reusable multicasting with Subject factories
The way we use publish() (or multicast with an RxJS Subject) makes the shared Observable not reusabl ...
- Maven项目中mvn clean后找不到測试类问题
在Maven项目中进行单元測试,但mvn clean后又一次mvn install项目,再次进行单元測试.会有下面的错误. <span style="font-family:KaiTi ...
- [CSS] Target Positional Elements Using *-Of-Type CSS pseudo-classes
Learn how to target elements based on their position inside of a parent element in relation to its s ...
- Android 异步更新UI-线程池-Future-Handler实例分析
前言: 我们在开发Android过程中,在处理耗时任务和UI交互的过程中,都会将耗时任务放到子线程处理并刷新. 下面我提出的两个问题,相信大多数开发者都会碰到: 1. 数据经常需要读取更新,并且比较耗 ...