Skip to content

天地图api试用 #265

Open
Open
@smileyby

Description

天地图 类参考: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)

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions