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个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...
随机推荐
- Day2：字符串常用方法
字符串常用方法 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan name = "my \tname is ...
- Loadrunner11--输入license后提示违反许可证安全,禁止操作
安装中文补丁包后,重新把mlr5lprg.dll.lm70.dll覆盖LR11安装目录下“bin”文件夹下mlr5lprg.dll.lm70.dll.运行deletelicense.exe.重新用管理 ...
- Mybatis的使用中的一些不太注意的技巧
以下就总结一下Mybatis的使用中的一些不太注意的技巧,算是Mybatis的总结笔 1.插入时主键返回 我们向数据库插入一条记录是,使用Mybatis的<insert>是无法返回插入的主 ...
- OVS中对于用户层和datapath层的多个通道利用epoll进行控制
这里先临时记录下代码流程,有待完好. static int construct(struct ofproto *ofproto_) { struct ofproto_dpif *ofproto = o ...
- C#自定义配置文件节的实现
1.配置文件:(注意configSections必须放在最上面否则会报错) <?xml version="1.0" encoding="utf-8" ?& ...
- Source Insight 3.50.0065使用详解
转自calvinlee1984 Subject:Source Insight3.50.0065使用详解 Date: 21-Oct-2011 By: Calvinlee1984@ ...
- if..... if..... 和if..... else if.....
曾经一度认为没有区别,,在有的时候是没有区别的,,但是有些时候则不可相互替换 这两个是有区别的 if..... if..... 是不相关的.只要各自判断两部分的条件即可,两个都会执行 if.... e ...
- ZOJ 1494 Climbing Worm 数学水题
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=494 题目大意: 一只蜗牛要从爬上n英寸高的地方,他速度为u每分钟,他爬完u需要 ...
- MCI
MCI(Media Control Interface)媒体控件接口是Mircrosoft提供的一组多媒体和文件的标准接口.它的好处是可以方便地控制绝大多数多媒体设备 包括音频,视频,影碟,录像等多媒 ...
- Fragment为载体可自己主动布局的CardView（GitHub上写开源项目初体验）
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 前些天一直在看Android5.0 的Material Desgin,里面新增 ...