PictureMarkerSymbol 访问不允许的 blob，即使使用 url 属性 Arcgis JS Api 4.27 中的 Base 64 图像时也是如此 - 可能的错误

Question

即使在 Arcgis JavaScript Api 4.27 中的 url 属性中使用 Base 64 图像，PictureMarkerSymbol 也会访问不允许的 blob。当您设置 PictureMarkerSymbol 时，请指定图像的 url：

const mySymbol = {
            type: "picture-marker",
            url: "/Content/myimage.png",
            width: "48px",
            height: "48px",
            contentType: "image/png"
        };

运行代码时，当图片标记符号设置为使用 png（或 base64 图像）时，arcgis javascript api 4.27 会将其转换为 blob。如果您将 Web 服务器设置为不允许访问内容安全策略中的 Blob，您将收到此错误：

错误：

拒绝加载图片 '斑点：https://www.myserver.com/953e5424-d924-2c3a-92b4-4cf83c376042' 因为它违反了以下内容安全策略指令： “img-src *数据：”。请注意，“*”仅匹配带有网络的 URL 方案（'http'、'https'、'ws'、'wss'）或方案匹配的 URL

self

的计划。必须显式添加方案“blob:”。

我现在尝试使用 Base64 图像，而不引用 png。但是，图片标记符号仍然尝试创建斑点并中断，因为它无权在客户端上执行此操作：

const mySymbol = {
            type: "picture-marker",
            url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=",
            width: "48px",
            height: "48px",
            contentType: "image/png"
        };

同样的错误：

拒绝加载图片 '斑点：https://www.myserver.com/953e5424-d924-2c3a-92b4-4cf83c376042' 因为它违反了以下内容安全策略指令： “img-src *数据：”。请注意，“*”仅匹配带有网络的 URL 方案（'http'、'https'、'ws'、'wss'）或方案匹配的 URL

self

的计划。必须显式添加方案“blob:”。

我无法控制服务器来允许内容安全策略上的 blob。如何解决这个问题？这看起来像是 ArcGIS API 4.27 的问题，强制使用“blob”来设置图片标记符号。

Answer 1

以下是解决方法。上述问题仍然是一个问题。解决方法包括使用 SimpleMarkerSymbol 或 WebStyleSymbol 而不是使用 PictureMarkerSymbol。您可以创建 SVG 图片，然后使用 SimpleMarkerSymbol。在路径属性中设置 SVG 图片，如下所示。将 yoffset 设置为图像大小的一半，以将图像显示在地图上的正确位置。下面的示例将图像设置为 30px，将 yoffset 设置为 15px，以在正确的位置显示点。例如：

const mySimpleMarkerSymbol= {
        type: "simple-marker",
        path: "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z",
        color: "red",
        outline: {
            color: "white"
        },
        xoffset: "0",
        yoffset: "15px",
        size: "30px",
        angle: "0",
        style: "path"
    };

路径属性。

上面的

path属性定义了图像。使用 SVG 编辑器例如这个来编辑/创建图像。

第二个选项涉及使用带有

可以在此链接中选择的预制图形的 WebStyleSymbol。这是一个例子：

const myWebStyleSymbol = {
        type: "web-style",
        name: "tear-pin-2",
        styleName: "Esri2DPointSymbolsStyle"
};