天地图 自定义覆盖物（能用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);

});