地图部件中的图标引入墙外链接，没有梯子不能正常显示

image.png

准备

添加地图部件
image.png

介绍

image.png

全程只用一个标记：

  1. 取消勾选Use marker image function
    1. 默认是勾选的
  2. Custom marker image处上传图片

  3. 点击右上角对勾，应用修改

    根据字段变化图标

  4. 勾选Use marker image function

  5. 修改 Marker image function中的脚本（根据脚本选出image的下标）

    1. var speed = dsData[dsIndex]['speed'];
    2. var res = {
    3.  url: images[0],
    4.  size: 55
    5. };
    6. if (typeof speed !== undefined) {
    7.  var percent = (speed - 45)/85;
    8.  var index = Math.min(2, Math.floor(3 * percent));
    9.  res.url = images[index];
    10. }
    11. return res;

  6. 上传图标到Marker images

image.png

效果

image.png

代码

虽然这样修改可以解决一个地图图表的问题，但是如果只用默认且固定的图标，每次都得上传图片，还是比较麻烦。
直接修改代码即可。
ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts

  1. createColoredMarkerIcon(color: tinycolor.Instance): { size: number[], icon: Icon } {
  2.   return {
  3.     size: [21, 34],
  4.     icon: L.icon({
  5.       //替换此处iconUrl，这是图标
  6.       iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color.toHex(),
  7.       iconSize: [21, 34],
  8.       iconAnchor: [21 * this.markerOffset[0], 34 * this.markerOffset[1]],
  9.       popupAnchor: [0, -34],
  10.       //替换此处shadowUrl，这是图标阴影
  11.       shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
  12.       shadowSize: [40, 37],
  13.       shadowAnchor: [12, 35]
  14.     })
  15.   };
  16. }

可能的问题

想使用固定图标
勾选了Use marker image function
没有修改 Marker image function中的默认脚本
导致图标显示不出来。仔细看前面的步骤，就没问题了。

  1.                           ![不点赞美女哭了.jpg](https://cdn.nlark.com/yuque/0/2021/jpeg/1453676/1618726151419-b0ffd3fb-b94b-485b-930a-eb55b8c1a22f.jpeg#align=left&display=inline&height=271&margin=%5Bobject%20Object%5D&name=%E4%B8%8D%E7%82%B9%E8%B5%9E%E7%BE%8E%E5%A5%B3%E5%93%AD%E4%BA%86.jpg&originHeight=271&originWidth=509&size=11471&status=done&style=none&width=509)