天地图api试用

[smileyby]

天地图 类参考：http://lbs.tianditu.gov.cn/api/js4.0/class.html

1. 天地图初始化

   const map = new T.Map('map')
   map.enableScrollWheelZoom();
   map.setMinZoom(MINZOOM);
   map.setMaxZoom(MAXZOOM);
   
   // MapType 类
   map.setMapType(TMAP_NORMAL_MAP)
   
   // 设置中心点
   const point = new T.LngLat(lng, lat);
   map.centerAndZoom(point, 16);

2. 自定义overlay

   // 创建自定义marker
   const marker = new definedOverlay(options)
   map.addOverLay(marker);
   marker.addEventListener('click', () => {
       console.log('marker click event');
   });

   // 自定义 overlay类
   // 调用该类时，要确保 地图已初始化成功
   const definedOverlay = T.Overlay.extend({
     initialize: function (lnglat, options) {
       this.lnglat = lnglat;
       this.options = options;
     },
     onAdd: function (map) {
       this.map = map;
       const div = (this._div = document.createElement('div'));
       div.style.position = 'absolute';
       div.style.transform = 'translate3d(-50%, -50%, 0)';
       div.style.height = '44px';
       div.style.padding = '2px';
       div.setAttribute('title', '点击可查看详情');
   	div.innerHTML = `自定义内容`;
       map.getPanes().overlayPane.appendChild(div);
       this.update(this.lnglat);
       return div;
     },
     onRemove: function () {
       const parent = this._div.parentNode;
       if (parent) {
         parent.removeChild(this._div);
         this.map = null;
         this.div = null;
       }
     },
     setLnglat: function (lnglat) {
       this.lnglat = lnglat;
       this.update();
     },
     getLnglat: function () {
       return this.lnglat;
     },
     setPos: function (pos) {
       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';
     },
     // 隐藏overlay
     hide: function () {
       this._div.style.display = 'none';
     },
     // 显示overlay  
     show: function () {
       this._div.style.display = 'block';
     },
     // overlay添加事件  
     addEventListener: function (type, callback) {
       if (this._div) {
         this._div['on' + type] =
           typeof callback === 'function' ? callback : function () {};
       }
     },
     // overlay 打开infowindow  
     openInfoWindow: function (infoWindow) {
       this.map.openInfoWindow(infoWindow, this.lnglat);
     },
   });
   
   export default definedOverlay;

3. 移除全部overlay

   const overlays = map.getOverlays();
   for (let i = 0; i < overlays.length; i++) {
   	map.removeOverLay(overlays[i]);
   }

4. 创建infoWindow

   const infoWindow = new T.InfoWindow();
   const sContent = document.createElement('div');
   sContent.innerHTML= `自定义内容`;
   
   infoWindow.setContent(sContent);
   const x = 0; // 横向偏移
   const y = -20; // 纵向偏移
   infoWindow.setOffset(new T.Point(x, y));
   marker.openInfoWindow(infoWindow);

5. 创建marker，并添加拖拽事件

   const point = new T.LngLat(lng, lat);
   const marker = new T.Marker(point, {
   	draggable: true, // 开启拖拽
   });
   
   const width = 20; // 图标宽
   const height = 20; // 图标高
   new T.Icon({
   	iconUrl: '图片地址',
   	iconSize: new T.Point(width, height),
   });
   marker.setIcon(iconObj);
   
   marker.addEventListener('dragging', (e) => {
   	console.log('拖拽事件对象：', e);
       console.log('经度：', e.lnglat.lng);
       console.log('纬度：', e.lnglat.lat);
   });
   
   map.addOverLay(marker)