vue-baidu-map自定义覆盖物图标

Posted 2023-05-05

参考技术A <baidu-map class="map" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" style="height: calc(100%)" ref="map">

                      <bm-overlay

                        v-for="point of points"

                        :key="point.type"

                        pane="markerPane"

                        class="map-marker"//设置自定义的图标位置样式

                        @draw="drawO(point, $event.map, $event.el)"//根据传入的经纬度计算在地图上的位置

                      >

                        <div  >

                          <img src="../../assets/icon002.png" alt="" >//自定义图片

                          </div>

                      </bm-overlay>

              </baidu-map>

methods:

     draw(region, map, el) //根据经纬度计算图标显示位置

      let pixel = map.pointToOverlayPixel(

        lng: region.lng,

        lat: region.lat

      );

      el.style.left = pixel.x - 16 + "px";

      el.style.top = pixel.y - 31 + "px";

    ,

readNodes(nodes) //根据所有经纬度计算中心center和zoom

      let array = [];

      nodes.forEach(item =>

        array.push( lng: item.lng, lat: item.lat );

      );

      setTimeout(() =>

        let view = this.$refs.map.map.getViewport(array);

        this.center = view.center;

        this.zoom = view.zoom;

      , 300);

    ,



css：

.map-marker

  position: absolute;

  font-size: 16px;

  color: dodgerblue;

  font-weight: 500;

  div

    position: absolute;//改变定位

    img

      height: 30px;

      width: 30px;

   

 

POWER BI 自定义显示图标

参考技术A 条件格式的icon，一般在条件格式的高级控件里调整（可以直接应用在值上，也可以另外写度量值应用）

如果想实现自定义图标，一种是在度量值上写UNICHAR，还可以引入SVG

Powerbi自带的自定义图标

根据度量值添加自定义图标和颜色

★★★   https://www.jianshu.com/p/4c3e45f14611

注：文中使用到的unichar，可以到 https://unicode-table.com/cn/sets/ 查询使用更多自定义图标

使用SVG

效果如图：根据值的大小，buble的颜色、大小不同，颜色呈中心散射。

使用SVG的原因：

1. 自定义图标元素 

2. 自定义大小 

3. 灵活

使用SVG的规范：

前面+ “data:image/svg+xml;utf8,”

使用SVG的方法：

★  https://cloud.tencent.com/developer/article/1511182

     https://www.cnblogs.com/Javi/p/13424794.html

付费可视化对象

https://xviz.com/visuals/bubble-scatter-chart/ 

提供包括bubble在内的更多符合IBCS标准的可视化对象。