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个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...
随机推荐
- clear属性来取消浮动
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...
- 如何在本地运行查看github上的开源项目
看中了一款很多星星的github的项目,想把这个项目拉到自己的电脑上运行查看项目效果,该怎么做?示例:我们今天要看的 github项目地址:https://github.com/lzxb/vue-cn ...
- jqgrid 实现行编辑，表单编辑的列联动
这个问题的场景相信大家都遇到过,比方有A,B,C三列,B,C列均为下拉框.可是C列的值是由B列的值来决定的.即C列中的值是动态变化的,变化的根据就是B列中你选择的值. 本文给出的是一个有用,简易快捷的 ...
- Android 中AIDL的使用与理解
AIDL的使用: 最常见的aidl的使用就是Service的跨进程通信了,那么我们就写一个Activity和Service的跨进程通信吧. 首先,我们就在AS里面新建一个aidl文件(ps:现在AS建 ...
- C语言深度剖析-----指针数组和数组指针的分析
指针数组和数组指针的分析 数组类型 定义数组类型 数组指针 这个不可能为数组指针,指向数组首元素 例 指针数组 例 main函数的参数 例 小结
- linux下查看动态链接库依赖关系的命令 x86: ldd *.so arm: arm-linux-readelf -d *.so 实际例子: 以项目中用到的库librtsp.so分析： lijun@ubuntu:~/workspace$ arm-hisiv100nptl-linux-ld -d librtsp.so arm-hisiv100nptl-linux-ld:
linux下查看动态链接库依赖关系的命令 x86:ldd *.so arm:arm-linux-readelf -d *.so 实际例子:以项目中用到的库librtsp.so分析:l ...
- C++利用SOAP开发WebService
// soapconsole.cpp : Defines the entry point for the console application.// #include "stdafx.h& ...
- jQuery常用方法(持续更新)（转）
0.常用代码: 请容许我在1之前插入一个0,我觉得我有必要把最常用的代码放在第一位,毕竟大部分时间大家都是找代码的. (1)AJAX请求 $(function() { $('#send').click ...
- hdu3377之简单路径求最值
Plan Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- mysql 查询重复 去除重复等等
查找所有重复标题的记录: SELECT * FROM t_info a WHERE ((SELECT COUNT(*) FROM t_info WHERE Title = a.Title) > ...