需求：

对点要素采用图片标记符号化，同时基于某个字段进行标注，最终达到图示的标注效果。

代码：

<html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /><title>Flat symbol layers | Sample | ArcGIS API for JavaScript 4.20</title><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.20/"></script><script>require(["esri/Map","esri/views/MapView","esri/layers/FeatureLayer","esri/layers/support/LabelClass"], (Map, MapView, FeatureLayer, LabelClass) => {// Create the Mapconst map = new Map({basemap: "streets"});// Create the SceneView and set initial cameraconst view = new MapView({container: "viewDiv",map: map,center: [-91.027553, 38.792375],scale: 20000000,});const labelClass = new LabelClass({symbol: {type: "text",  // autocasts as new TextSymbol()color: "white",haloColor: "blue",haloSize: 1,yoffset: 10,//标注沿y轴向上偏移font: {  // autocast as new Font()family: "Ubuntu Mono",size: 14,weight: "bold"}},labelPlacement: "center-center",labelExpressionInfo: {expression: 'DefaultValue($feature.OBJECTID, "no data")'}});// Request feature layers and overwrite rendererconst featureLayer = new FeatureLayer({url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CITIES_EastUSA/FeatureServer/0",// define renderingrenderer: {type: "simple",symbol: {type: "picture-marker",url:"./pic/pic.png",height: "100px",width: "70px"}},outFields: ["OBJECTID"],// Ensure that all features are shown at all scalesmaxScale: 0,minScale: 0,labelingInfo: [labelClass]});map.add(featureLayer);});</script>
</head><body><div id="viewDiv"></div></body></html>

其中标记图片我是从网上随便找的一张图片，链接：https://i-1-lanrentuku.qqxzb-img.com/2020/11/9/c18a9b07-a9bf-4966-b969-b07fd9814aef.png

将其下载后放到iis指定的路径下，例如：我放到我自己新建的pic文件夹下。

前端实现图片标记符号化以及标注相关推荐

前端：HTML/02/排版标记，块元素，行内元素，html字符实体，列表标记，图片标记
html排版标记 <p></p> :表示一个段落常用属性:align :水平对齐方式,取值:left(左),center(居中),right(右) 换行标记<br> ...
Web前端技术开发学习笔记(HTML标记语言篇)——第6章图片标记
第6章图片标记 6.1 网页常见图片格式 6.2 插入图片 6.2.1 设置图片大小 6.2.2 设置图片文本 6.2.3 设置图片与周围对象的间距 6.2.4设置图片的对齐方式 6.2.5设置图片 ...
前端常见图片格式整理
前端常见图片格式整理 PNG (Portable Network Graphics,便携式网络图形,1996) PNG有8位.24位.32位三种形式,其中8位PNG支持两种不同的透明形式(索引透明和a ...
前端JS图片压缩处理
2020-10 分享近期工作遇到了用户上传图片由前端压缩图片大小,再传到OSS.这样可以减少用户上行传输的数据量,减少用上传的等待时长,优化用户体验. 方案:利用js现成canvas. Canvas ...
JavaScript 实现前端下载图片
JavaScript 实现前端下载图片前几天公司的项目有个需求,实现点击下载图片功能,当时我就想着还不简单嘛,当即写下以下代码: const download = document.createEl ...
canvas实现图片标记
前言由于业务需求,需要有一个图片标记功能,其实就是对图片画框画线做标记,类似微信的图片编辑但是需要存下标记图及其标记的具体数据,.功能其实很简单,但刚开始的时候也是费了一些功夫的.我将原项目中该功 ...
图片标记软件_如何设计软件功能标记
图片标记软件 A previous company had a problem: our deploys were thousands of lines in size, took nearly ...
前端 Canvas 图像标记
前端 Canvas 图像标记作者:@ 很菜的小白在分享日期:2021年12月22日介绍为什么要做图像标记?我们开发过程可能会涉及到需要在一张图片上做记号,例如:人脸识别,我们可能需要将识别到的 ...
一款用于改进图片搜索效果的标注游戏
[摘要]: 图片搜索由于在搜索目标上的特殊性,往往依赖于图片所在网页的文本来判断图片的内容(我们成为图片周边文本).而周边文本往往不能很好的表达图片的内容,并且一张图片往往在多个网页中被引用,图片周边 ...

前端实现图片标记符号化以及标注

需求：

代码：

前端实现图片标记符号化以及标注相关推荐

最新文章

热门文章