admin管理员组文章数量:1650835
问题发现
ArcGIS API for JS 4.8会出现一个问题,添加进来的FeatureLayer在三维模式下,点击高亮显示,在二维下点击就无高亮的效果。当使用labelingInfo注记要素图层的时候也会出现这个问题,在三维下注记显示,在二维下注记不显示。
问题研究
查看官方的API发现,这两个功能都需要WebGL的支持,三维下默认是WebGL渲染,二维下需要代码开启WebGL渲染,说是添加下面代码可以使用WebGL渲染。
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
}
如果你觉得这样就会解决,太天真了。这代码加了也没有任何用。最后才发现二维模式下WebGL渲染使用是有限制条件的。
说是可以使用WebGL渲染,可这就相当于是VIP功能了呗!
- 只针对托管在ArcGIS Online的地图服务,和ArcGIS Server10.6.1以上版本发布的服务。
- 对在前端页面自己代码创造的Feature组成的FeatureLayer无法使用
解决方案
二维模式下高亮的解决,可以通过给FeatureLayer添加点击事件,通过点击事件获取的geometry,自己在屏幕上画一个特殊颜色出来就可以了。例子可以参考ArcGIS API for JS4.7加载FeatureLayer,点击弹出信息并高亮显示
至于label注记的解决,我使用的是两个FeatureLayer叠加的形式,一个的symbol用的是"fill-symbol",上面的一层用"text-symbol"。下面是我用GeoJson生成的FeatureLayer,添加图形和注记的代码,可以参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>江西</title>
<link type="text/css" rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.8/esri/css/main.css"/>
<script>
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
}
</script>
<style type="text/css">
html, body, #mapDIV {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: lightblue;
}
</style>
<script src="http://localhost/arcgis_js_api/library/4.8/init.js"></script>
<script src="http://localhost/arcgis_js_api/library/4.8/dojo/dojo.js"></script>
<script src="http://apps.bdimg/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
require(["esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/Polygon",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/layers/support/LabelClass",
"esri/tasks/support/Query",
"dojo/_base/connect",
"dojo/on",
"dojo/query",
"esri/request",
"dojo/domReady!"
],
function (
Map,
MapView,
GraphicsLayer,
FeatureLayer,
Graphic,
Polygon,
SimpleLineSymbol,
SimpleFillSymbol,
LabelClass,
Query,
connect,
on,
query,
esriRequest
) {
var layer;
var map = new Map({
// layers: [graphicLayer]
basemap: "dark-gray"
});
var view = new MapView({
container: "mapDIV",
map: map,
extent: {
xmin: 113.574103,
ymin: 24.492908,
xmax: 118.481308,
ymax: 30.076852,
spatialReference: 4326
}
});
var layerRenderer = {
type: "simple",
symbol: {
type: "simple-fill",
color: [12, 60, 142, 1],
outline: {
color: [17, 102, 171],
width: 1
}
}
};
var fields = [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}, {
name: "areaName",
alias: "areaName",
type: "string"
}, {
name: "areaCode",
alias: "areaCode",
type: "string"
}
];
view.when(function () {
getData()
.then(createGraphics)
.then(createLayer);
});
function getData() {
console.log("获取数据");
var url = "36.json";
return esriRequest(url, {
responseType: "json"
})
}
function createGraphics(response) {
var graphics = [];
var labels = [];
response.data.features.forEach(function (feature, i) {
graphics.push({
geometry: new Polygon({
type: "polygon",
rings: feature.geometry.coordinates[0]
}),
attributes: {
ObjectID: i,
areaName: feature.properties.NAME,
areaCode: feature.properties.CODE
}
});
labels.push({
geometry: new Polygon({
type: "polygon",
rings: feature.geometry.coordinates[0]
}),
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "white",
haloColor: "black",
haloSize: "1px",
text: feature.properties.NAME,
xoffset: 3,
yoffset: 3,
font: { // autocast as new Font()
size: 12,
family: "sans-serif",
weight: "bold"
}
},
attributes: {
ObjectID: i
}
})
});
return [graphics, labels];
}
function createLayer(graphics) {
layer = new FeatureLayer({
source: graphics[0],
fields: fields,
objectIdField: "ObjectID",
renderer: layerRenderer,
spatialReference: {
wkid: 4326
},
outFields: ["*"],
geometryType: "polygon"
});
var labelLayer = new FeatureLayer({
source: graphics[1],
fields: fields,
objectIdField: "ObjectID",
// renderer:layerRenderer,
spatialReference: {
wkid: 4326
},
outFields: ["*"],
geometryType: "polygon"
});
//添加面层
map.add(layer);
//添加注记层
map.add(labelLayer);
}
});
</script>
</head>
<body class="claro">
<div id="mapDIV"></div>
</body>
</html>
就是下面这个样子:
本文标签: 注记jsAPIArcGISFeatureLayer
版权声明:本文标题:ArcGIS API for JS 4.8二维高亮无效与FeatureLayer注记不显示的问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729534538a1205245.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论