arcgis api for javascript 添加图层时设置标注，自定义符号
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>安监？？？</title> <link rel="stylesheet" href="js/dist/css/calcite-bootstrap.min-v0.2.css">
<link rel="stylesheet" href="js/dist/css/calcite-maps-arcgis-4.x.min-v0.2.css">
<link rel="stylesheet" href="js/esri/css/main.css">
<script src="js/init.js"></script> <style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
} .or-wrap {
background-color: #e0e0e0;
height: 1px;
margin: 2em 0;
overflow: visible;
} .or-text {
background: #fff;
line-height: 0;
padding: 0 1em;
position: relative;
top: -.75em;
} .symbol-text {
background: #fff;
line-height: 0;
padding: 0 1em;
position: relative;
top: -.1em;
} </style> <script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/config",
"esri/WebScene",
"esri/layers/Layer",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/layers/SceneLayer",
"esri/layers/TileLayer",
"esri/Graphic",
"esri/widgets/Expand",
"esri/widgets/Home",
"esri/geometry/Extent",
"esri/Viewpoint",
"esri/geometry/Polygon",
"esri/core/watchUtils",
"dojo/_base/array", 'script/Draw.js',
'script/Draw2.js',
'script/Custom.js',
'script/Measure.js',
'script/MeasureLenght.js',
'script/MeasureArea.js',
'script/MeasureConfig.js',
'script/QueryByRectangle.js',
'script/QueryByPolygon.js',
'script/QueryByPoint.js',
'script/QueryLayerConfig.js',
'script/GeoQueryLayerConfig.js', 'script/EditPoint.js',
'script/EditPointConfig.js',
"script/CustiomSymbolConfig.js",
"script/CustomAnimation.js",
"script/EditPolygonConfig.js",
"script/EditPointLayerConfig.js",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/Color",
"esri/layers/BaseTileLayer", "dojo/on",
"dojo/dom",
"dojo/domReady!"
],
function (
Map, SceneView, esriConfig, WebScene, Layer, FeatureLayer, GraphicsLayer, SceneLayer, TileLayer, Graphic, Expand,
Home, Extent, Viewpoint, Polygon, watchUtils, arrayUtils,
Draw, Draw2, Custom, Measure, MeasureLenght, MeasureArea, MeasureConfig, QueryByRectangle, QueryByPolygon, QueryByPoint,
QueryLayerConfig, GeoQueryLayerConfig,
EditPoint, EditPointConfig, CustiomSymbolConfig, CustomAnimation, EditPolygonConfig, EditPointLayerConfig,
QueryTask, Query, Color, BaseTileLayer,
on, dom
) {
function getUniqueValueSymbol(name, color) {
//点符号用图标表示。要清楚地看到点的位置
//我们将图标垂直移动并添加callout行。这条线连接了与点特征位置相连接的符号。
//图标大小
return {
type: "point-3d",
symbolLayers: [{
type: "icon",
resource: {
href: name
},
size: 30,
outline: {
color: "white",
size: 2
}
}], // 垂直偏移将符号垂直移动
verticalOffset: {
screenLength: 10,
maxWorldLength: 0,
minWorldLength: 0
}, callout: {
type: "line",
color: "white",
size: 1,
border: {
color: color
}
}
};
} var featureLayer; var map = new WebScene({
basemap: "hybrid"
}); // 视图和home按钮的初始范围
var initialExtent = new Extent({
xmin: 117.2,
xmax: 117.4,
ymin: 39.2,
ymax: 39.4,
spatialReference: 4326
});
var view = new SceneView({
container: "viewDiv",
extent: initialExtent,
map: map
}); //添加标注开始----------------------------------------------------------
//指定标注录入的图层
var fUrl = "https://services8.arcgis.com/91J2IDFbEdu7LCaR/arcgis/rest/services/enterprise/FeatureServer/0";
//var fUrl = "https://2108aa73.all123.net/arcgis/rest/services/Hosted/enterprise/FeatureServer/0";
//根据enterptype字段定义唯一值渲染器，图片符号形式
var renderer = {
type: "unique-value", // autocasts as new SimpleRenderer()
field: "enterptype",
uniqueValueInfos: [{
value: 20,
symbol: getUniqueValueSymbol("image/Museum.png", "#D13470")
}, {
value: 30,
symbol: getUniqueValueSymbol("image/Restaurant.png", "#F97C5A")
}, {
value: 40,
symbol: getUniqueValueSymbol("image/Restaurant.png", "#F97C5A")
}, {
value: 50,
symbol: getUniqueValueSymbol("image/Restaurant.png", "#F97C5A")
}],
//根据预警级别设置符号颜色
visualVariables: [{
type: "color",
field: "warnlevel",
stops: [
{ value: 0, color: "green" },
{ value: 1, color: "blue" },
{ value: 2, color: "red" },
{ value: 3, color: "yellow" }
]
}]
};
featureLayer = new FeatureLayer({
url: fUrl,
id: "enterpriselayer",
renderer: renderer,
elevationInfo: {
// 高程模式，将点放在建筑物顶部或其他场景三维物体上，否则与三维模型一起展示时会被覆盖掉
mode: "relative-to-scene"
}, visible: true,
outFields: ["*"],
//设置标注
labelingInfo: [
{
labelExpressionInfo: {
value: "{Name}"
},
symbol: {
type: "label-3d", // autocasts as new LabelSymbol3D()
symbolLayers: [{
type: "text", // autocasts as new TextSymbol3DLayer()
material: {
color: "white"
},
// we set a halo on the font to make the labels more visible with any kind of background
halo: {
size: 1,
color: [50, 50, 50]
},
size: 10
}]
}
}],
labelsVisible: true
});
map.add(featureLayer);
});
</script>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
arcgis api for javascript 添加图层时设置标注，自定义符号的更多相关文章
- ArcGIS API for Javascript的Point clustering使用及默认符号无法显示问题
1.将包含ClusterFeatureLayer.js文件的extras文件夹放在部署的arcgis api目录下,如下图. extras路径 2.使用ClusterFeatureLayer关键代码如 ...
- ArcGIS api for javascript——鼠标悬停时显示信息窗口
描述 本例展示当用户在要素上悬停鼠标时如何显示InfoWindow.本例中,要素是查询USA州图层的QueryTask的查询结果.工作流程如下: 1.用户单击一个要素 2.要素是“加亮的”图形. 3. ...
- ArcGIS api for javascript——使用图层定义显示地图
描述 本例展示如何使用图层定义来限制显示在地图上的图层信息.为了了解本例做了什么,看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的.检查地图中的图层列表.现在注意这行代码限制 ...
- 转：ArcGIS API for JavaScript之图层
参考文章地址: https://developers.arcgis.com/javascript/3/jsapi/layer-amd.html Layer |–TiledMapServiceLayer ...
- 转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述
原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...
- ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务
1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...
- ArcGIS API for Javascript 使用缓冲区结果做query查询出现“esri.config.defaults.io.proxyUrl 尚未进行设置”错误
1.前言 在研究ArcGIS API for JavaScript时会遇到这样的问题,比如我们在做缓冲区分析时,用分析的范围作为空间查询query的参数,在执行结果中总是会看到“esri.config ...
- arcgis api for JavaScript _加载三维图层(scene layer)
arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript 4.x 版本增加对三维的支持. 关于三维图层(sce ...
- ArcGIS API For JavaScript 开发（五）要素图层的编辑
2018-4-3 这篇博客主要讲述要素的层的编辑功能,是基于FeatureLayer的applyEdit方法.由于自己目前正在学习当中,有许多不足之处请各位指出,欢迎指导学习! 主要功能是 1.将地图 ...
随机推荐
- [Day1]常用Dos命令，Java相关描述及基础
1.常用的DOS命令 (1)返回上一级目录:cd.. (2)返回盘符根目录:cd\ (3)切换当前盘符: 盘符: (4)进入文件夹: cd 文件路径 (5)展示当前目录下的所有内容:D ...
- ios开发之 NSObject详解
NSObject是大部分Objective-C类继承体系的根类.这个类遵循NSObject协议,提供了一些通用的方法,对象通过继承NSObject,可以从其中继承访问运行时的接口,并让对象具备Obje ...
- python各种模块,迭代器,生成器
从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能) 本质就是.py结尾的python文件(文件名:test.py,对应的模块名就是test) 包:用来从逻辑上组织模块的,本质就是一个目 ...
- redis的基本介绍
redis是什么? redis是一种菲关系型数据库,存储key-value类型的数据. redis支持的数据类型 这里所说的数据类型其实就是value对应的数据类型.一共有五种: String 1.S ...
- 快速安装elkstack
一.介绍 The Elastic Stack - 它不是一个软件,而是Elasticsearch,Logstash,Kibana 开源软件的集合,对外是作为一个日志管理系统的开源方案.它可以从任何来源 ...
- SpringBoot-热部署Devtools
热部署 什么是热部署 所谓的热部署:比如项目的热部署,就是在应用程序在不停止的情况下,实现新的部署 项目演示案例 @RestController @Slf4j public class IndexCo ...
- 类的copy和deepcopy
- (instancetype)initWithName:(NSString *)name age:(NSUInteger)age sex:(CYLSex)sex { if(self = [super ...
- 【雅思】【写作】【大作文】Discuss both views and give your own opinion
•Discuss both views and give your own opinion • • •Agree or disagree •Discuss both views •Report ...
- 循环打印视图(学习WHILE循环)
) --视图名 --总视图数 --循环次数 SELECT @RowCount = COUNT(NAME) FROM sysobjects WHERE xtype = 'v' WHILE @i < ...
- 利用Python实现简单的相似图片搜索的教程
大概五年前吧,我那时还在为一家约会网站做开发工作.他们是早期创业公司,但他们也开始拥有了一些稳定用户量.不像其他约会网站,这家公司向来以洁身自好为主要市场形象.它不是一个供你鬼混的网站——是让你能找到 ...