arcgis for javascript在FeatureLayer上添加文本信息

GISER_WDL

已于 2024-01-26 22:34:23 修改

阅读量668

点赞数 14

文章标签： javascript arcgis 前端

于 2024-01-26 22:34:03 首次发布

本文链接：https://blog.csdn.net/m0_65745337/article/details/135876129

版权

1、通过source构建FeatureLayer

2、通过在FeatureLayer的labelingInfo属性中添加labelClass

const labelClass = {
       symbol: {
           type: 'text',
           color: 'white',
           backgroundColor: [5, 39, 74, 0.6],
           borderLineColor: [165, 255, 208],
           borderLineSize: 1,
           lineHeight: 0.2,
           xoffset: '10px',
           yoffset: '20px',
           font: {
               size: 12,
               family: 'sans-serif',
               weight: 'bold',
           },
       },
       labelExpressionInfo: {
           expression: '$feature.name',
       },
   };

3、完整实现代码如下

onMounted(() => {
   const map = new Map({
       basemap: 'topo-vector',
   });

   view = new SceneView({
       container: 'meshDiv',
       map: map,
       center: [105, 29],
       zoom: 6,
   });

//在武汉市中心点添加TextSymbol
addTextSymbol();
});

//在武汉市中心点添加TextSymbol
const addTextSymbol = () => {
   const labelClass = {
       symbol: {
           type: 'text',
           color: 'white',
           backgroundColor: [5, 39, 74, 0.6],
           borderLineColor: [165, 255, 208],
           borderLineSize: 1,
           lineHeight: 0.2,
           xoffset: '10px',
           yoffset: '20px',
           font: {
               size: 12,
               family: 'sans-serif',
               weight: 'bold',
           },
       },
       labelExpressionInfo: {
           expression: '$feature.name',
       },
   };
   const point = {
       type: 'point',
       longitude: 114.384697,
       latitude: 30.669599,
       spatialReference: { wkid: 4326 },
   };
   let graphic = new Graphic({
       geometry: point,
       attributes: { name: '123' },
   });
   let graphicsLayer = new GraphicsLayer();
   graphicsLayer.add(graphic);
   const featureLayer = new FeatureLayer({
       source: graphicsLayer.graphics,
       fields: [
           {
               name: 'ObjectID',
               alias: 'ObjectID',
               type: 'oid',
           },
           {
               name: 'name',
               alias: 'name',
               type: 'string',
           },
       ],
       objectIdField: 'ObjectID',
       geometryType: 'point',
       outFields: ['*'],
       labelingInfo: [labelClass],
       renderer: {
           type: 'simple',
           symbol: {
               type: 'picture-marker',
               url: '',
               width: '0px',
               height: '0px',
           },
       },
   });
   view.map.add(featureLayer);
};