基本知识 | A-Zero

# 基本知识

矢量地图的比例尺：1：10000（10级）1：2000的（12级）
0.5米分辨率影像年度覆盖，2米分辨率卫星影像全省月度覆盖，可以查看右下角的影像获取时间

# 常用方法

# 在Vue中使用

在index.html引入天地图api

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=key" type="text/javascript"></script>

添加mapinit方法，初始化地图

export default {
  init() {
    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (window.T) {
        console.log('天地图脚本初始化成功...')
        resolve(window.T)
        reject('error')
      }
    })
  },
}

创建实例加载地图

<template>
  <div id="mapContainer" style="width: 880px; height: 600px;"></div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted(){
    const T = window.T;
      let map = new T.Map("mapContainer", {
        projection: "EPSG:4326",
      })
      map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 8)
	  this.map.setMinZoom(4)
	  this.map.setMaxZoom(18)
	  // 创建缩放平移控件对象
	  let control = new T.Control.Zoom()
	  this.map.addControl(control)
	  // 比例尺控件
	  let scale = new T.Control.Scale()
	  this.map.addControl(scale)
	  // 地图类型控件
	  let ctrl = new T.Control.MapType()
	  this.map.addControl(ctrl)
	  ctrl.setPosition(T_ANCHOR_BOTTOM_LEFT)
	  // 鹰眼控件
	  // let miniMap = new T.Control.OverviewMap({
	  //     isOpen: true,
	  //     size: new T.Point(150, 150)
	  // })
	  // this.map.addControl(miniMap)
	  
	  map.setMapType(TMAP_SATELLITE_MAP) // 设置地图类型
	  // TMAP_NORMAL_MAP：显示普通的街道视图
	  // TMAP_SATELLITE_MAP：显示卫星视图
	  // TMAP_HYBRID_MAP：显示卫星和路网的混合视图
	  // TMAP_TERRAIN_MAP：显示地形视图
	  // TMAP_TERRAIN_HYBRID_MAP：显示地形和路网混合的视图
	  
	  map.setViewport(points) //使所有标注都在视野范围内
  }
}
</script>

# 加载天地图山东影像图

http://service.sdmap.gov.cn/tileservice/sdrasterpubmap?service=WMTS&version=1.0.0
&request=GetTile&tilematrix=18&layer=SDRasterPubMap&style=default&tilerow=39646
&tilecol=216107&tilematrixset=raster&format=image%2Fjpeg
&tk=39606602a547762609c4d1d585a84827

# 坐标系转换

// 定义一些常量
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
var PI = 3.1415926535897932384626;
var a = 6378245.0;
var ee = 0.00669342162296594323;

/**
 * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换 / 即百度转谷歌、高德
 * @param { Number } bd_lon
 * @param { Number } bd_lat
 */
function bd09togcj02 (bd_lon, bd_lat) {
    var x_pi = 3.14159265358979324 * 3000.0 / 180.0
    var x = bd_lon - 0.0065
    var y = bd_lat - 0.006
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
    var gg_lng = z * Math.cos(theta)
    var gg_lat = z * Math.sin(theta)
    return [gg_lng, gg_lat]
}

/**
 * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换 / 即谷歌、高德 转 百度
 * @param { Number } lng
 * @param { Number } lat
 */
function gcj02tobd09 (lng, lat) {
    var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI)
    var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI)
    var bd_lng = z * Math.cos(theta) + 0.0065
    var bd_lat = z * Math.sin(theta) + 0.006
    return [bd_lng, bd_lat]
}

/**
 * WGS84坐标系转火星坐标系GCj02 / 即WGS84 转谷歌、高德
 * @param { Number } lng
 * @param { Number } lat
 */
function wgs84togcj02 (lng, lat) {
    if (outOfChina(lng, lat)) {
        return [lng, lat]
    }else {
        var dlat = transformlat(lng - 105.0, lat - 35.0)
        var dlng = transformlng(lng - 105.0, lat - 35.0)
        var radlat = lat / 180.0 * PI
        var magic = Math.sin(radlat)
        magic = 1 - ee * magic * magic
        var sqrtmagic = Math.sqrt(magic)
        dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
        dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
        const mglat = lat + dlat
        const mglng = lng + dlng
        return [mglng, mglat]
    }
}

/**
 * GCJ02（火星坐标系） 转换为 WGS84 / 即谷歌高德转WGS84
 * @param { Number } lng
 * @param { Number } lat
 */
function gcj02towgs84 (lng, lat) {
    if (outOfChina(lng, lat)) {
        return [lng, lat]
    }
    else {
        var dlat = transformlat(lng - 105.0, lat - 35.0)
        var dlng = transformlng(lng - 105.0, lat - 35.0)
        var radlat = lat / 180.0 * PI
        var magic = Math.sin(radlat)
        magic = 1 - ee * magic * magic
        var sqrtmagic = Math.sqrt(magic)
        dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
        dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
        const mglat = lat + dlat
        const mglng = lng + dlng
        return [lng * 2 - mglng, lat * 2 - mglat]
    }
}

/**
 * 百度坐标系转wgs84坐标系
 * @param {*} lng
 * @param {*} lat
 */
function bd09towgs84 (lng, lat) {
      // 百度坐标系先转为火星坐标系
      const gcj02 = bd09togcj02(lng, lat)
      // 火星坐标系转wgs84坐标系
      const result = gcj02towgs84(gcj02[0], gcj02[1])
      return result
}

/**
 * wgs84坐标系转百度坐标系
 * @param {*} lng
 * @param {*} lat
 */
function wgs84tobd09 (lng, lat) {
    // wgs84先转为火星坐标系
    const gcj02 = wgs84togcj02(lng, lat)
    // 火星坐标系转百度坐标系
    const result = gcj02tobd09(gcj02[0], gcj02[1])
    return result
}

/**
 * 经度转换
 * @param { Number } lng
 * @param { Number } lat
 */
function transformlat (lng, lat) {
    var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
    ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
    ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
    return ret
}

/**
 * 纬度转换
 * @param { Number } lng
 * @param { Number } lat
 */
function transformlng (lng, lat) {
    var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
    ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
    ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
    return ret
}

/**
 * 判断是否在国内，不在国内则不做偏移
 * @param {*} lng
 * @param {*} lat
 */
function outOfChina (lng, lat) {
    return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false)
}

← GeoServer 高德地图 →