cesium中使用svg

 this.datasource = new Cesium.CustomDataSource("peopleNumLayer");
 this.viewer.dataSources.add(this.datasource);
代码调用

    let promise = this.createRectangle(
        ctr.name,
        i,
        {
          color: "white",
          size: "300px",
          width: "1000",
          height: "500",
          stroke: "transparent",
          fill: "transparent",
          strokeW: "1",
        },
        50,
        {
          longitude: ctr.coord[0],
          latitude: ctr.coord[1],
        }
      );
      promise.then((en) => {
        this.entities.push(en);
      });
 //计算svg偏移量
  getCoordinateOffset(width, height, pos) {
    //暂定1px=>0.0002度
    const ratio = 0.00001;
    return {
      w: width * ratio,
      h: height * ratio * Math.cos((pos.latitude * Math.PI) / 180),
    };
  },
  //svg贴图加载
  createRectangle(name, conId, attr, value, pos) {
    let $this = this;
    return new Promise(function(resolve) {
      let svgStr = `<?xml version="1.0" encoding="utf-8"?>
                        <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
                        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                        <svg  width="${attr.width}" height="${
        attr.height
      }" viewBox=" 0 0 ${attr.width} ${
        attr.height
      }" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                        <filter id="f1" x="0" y="0">
                          <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
                        </filter>
                      </defs>
                      <rect width="${attr.width}" height="${
        attr.height
      }"  stroke="${attr.stroke}" stroke-width="${attr.strokeW}" fill="${
        attr.fill
      }" filter="url(#f1)" />
                            <text x="${attr.width / 2}" y="${attr.height /
        1.5}"  text-anchor="middle" style="fill:${attr.color};font-size:${
        attr.size
      };font-weight:bold;">${value}</text>
                        </svg>`;
      const textImage = new Image();
      textImage.src =
        "data:image/svg+xml;base64," +
        window.btoa(unescape(encodeURIComponent(svgStr)));

      textImage.onload = function() {
        let imgRange = $this.getCoordinateOffset(
          textImage.width,
          textImage.height,
          pos
        );
        let wOffset = imgRange.w / 2;
        let hOffset = imgRange.h / 2;
        let en = $this.datasource.entities.add({
          name: name,
          conId: conId,
          pos: pos,
          offsetWidth: textImage.width,
          offsetHeight: textImage.height,
          fixWidth: wOffset,
          fixHeight: hOffset,
          rectangle: {
            material: this.src,
            granularity: Cesium.Math.PI_OVER_FOUR,
            coordinates: Cesium.Rectangle.fromDegrees(
              +pos.longitude - wOffset,
              +pos.latitude - hOffset,
              +pos.longitude + wOffset,
              +pos.latitude + hOffset
            ),
          },
        });
        resolve(en);
      };
    });
  },
上一篇:uni-app微信小程序打开APP地图方法


下一篇:taro3.x: h5地图兼容组件封装