天地图 自定义覆盖物（能用Marker，最好还是用）

地图

    在天地图中，无法直接将Marker点，变成html标签，所以就需要自定义覆盖物去处理html标签

如果对于开发任务来说，Marker对于地图来说是必不可少的，但是有时候又需要一些自定义的html标签。

    因此这个时候，就需要自定义处理。

例如：坐标系为（EPSG:4326）

const data = [

{

name: '郑州市',
lat: 34.757975,
lng: 113.665412,
value: 300,
color: '#fff',
background: 'rgb(126, 0, 35)'

},

{

name: '开封市',
lat: 34.797049,
lng: 114.341447,
value: 50,
 color: '#fff',
background: 'rgb(255, 0, 0)'

},

{

name: '洛阳市',
lat: 34.663041,
lng: 112.434468,
value: 90,
color: '#303133',
background: 'rgb(255, 255, 0)'

}

];

const map:any = ref()

map.value = new window.T.Map('map', {

projection: 'EPSG:4326'

});

data.map((item: any) => {

var definedOverlay = window.T.Overlay.extend({
  initialize: function (lnglat: any, options: any) {
    this.lnglat = lnglat;
    this.setOptions(options);
  },
  onAdd: function (map: any) {
    this.map = map;
    var div = (this._div = document.createElement('div'));
    div.style.position = 'absolute';
    div.style.backgroundColor = item.color;
    div.style.borderRadius = '50%';
    div.style.color = 'white';
    div.style.width = '20px';
    div.style.height = '20px';
    div.style.whiteSpace = 'nowrap';
    div.style.userSelect = 'none';
    div.style.fontSize = '12px';
    div.style.zIndex = '999';
    div.style.cursor = 'pointer';
    var that = this;
    //点击事件
    div.onclick = function () {
      var pos = that.map.lngLatToLayerPoint(that.lnglat);
      posLocation.x = pos.x - 200;
      posLocation.y = pos.y + 20;
      popShow.value = true;
      console.log('9999', pos);
    };
    map.getPanes().overlayPane.appendChild(this._div);
    this.update(this.lnglat);
  },
  onRemove: function () {
    var parent = this.div.parentNode;
    if (parent) {
      parent.removeChild(this.div);
      this.map = null;
      this.div = null;
    }
  },
  setLnglat: function (lnglat: any) {
    this.lnglat = lnglat;
    this.update();
  },
  getLnglat: function () {
    return this.lnglat;
  },
  setPos: function (pos: any) {
    this.lnglat = this.map.layerPointToLngLat(pos);
    this.update();
  },
  /**
   * 更新位置
   */
  update: function () {
    var pos = this.map.lngLatToLayerPoint(this.lnglat);
    this._div.style.top = pos.y + 'px';
    this._div.style.left = pos.x + 'px';
  }
});
var point = new window.T.LngLat(item.lng, item.lat);
var pdefinedOverlay = new definedOverlay(point, {});
map.value.addOverLay(pdefinedOverlay);

});