The Vue project introduces Tiandi
index.htmlIntroduce the base map of Tiandi map in Vue's static resource directory , and develop Tiandi map source code path: Tiandi map API
Method 1: Load Tiandi map, refer to:public/index.html
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key"></script>
Method 2: Download 4.0 Tianmap js, use local js files to implement Tiantu, speed up Tiantu drawing and solve Tiantu loading lag ( no demonstration )
Realize the effect of Tiandi map, comment reference: public/index.htmlTiandi map below
js file directory put:components/tianditu/tianditu.api.js
Realize the Tianditu page, import Tianditu js, download path: tianditu.js Tianditu local cache 4.0 download_js Tianditu, Tianditu js file-Javascript document resource-CSDN download
1. Introduction: Tiantu Map JavaScript API 4.0 is a set of application programming interfaces that conform to the HTML5.0 specification, and provides various map services and data in the form of HTML 5.0, such as map display, labeling, positioning, etc. It provides developers with a channel to quickly call Tiandi map's online geographic information services, including quickly creating maps, calling maps, searching for place names, and adding overlays on maps , etc. Support browser-based map application development for PC and mobile, and map development with mainstream HTML4.0 and HTML5.0 features. 2. Implementation steps:
- Create a map container element;
- Introduce Tiantu, tk: Apply on the official website;
- Initialize the map object;
- Set the center point and level of the displayed map;
- Create a map type control;
- Add the control to the map, a control instance can only be added to the map once;
- Create coordinates, usually by calling the interface to obtain latitude and longitude;
- Create an overlay to use the icon;
- Create an instance of image annotation at this coordinate;
- Add an overlay to the map, an overlay instance can only be added to the map once;
1. Create a map container element
2. Introduce Tiandi, tk: apply on the official website;
Introduced in 2.1index.html
2.2 Obtain Tiandi map key
User system
Create a new application ===> fill in the information (note that the application type is server-side) ===> get the key
3. Initialize the map object
Register with Tiantu
The most basic use case file for a map
<template>
<!--创建地图容器元素-->
<div id="tdtMapDivID" class="divTdtMap"></div>
</template>
<script>
export default {
name: 'TdtMap',
data() {
return {
tdtMap: {}
};
},
created() { },
mounted() {
// 初始化天地图
this.initTdtMap();
},
watch: {},
methods: {
// 初始化天地图
initTdtMap() {
this.tdtMap = new T.Map(this.tdtMapDivID);
//设置显示地图的中心点和级别
this.tdtMap.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);
// 5.创建地图类型控件
const ctrl = new T.Control.MapType([{
title: '地图',
icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标（默认图标大小80x80）
layer: window.TMAP_NORMAL_MAP
}, {
title: '卫星',
icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
layer: window.TMAP_SATELLITE_MAP
}]);
// 6.将控件添加到地图，一个控件实例只能向地图中添加一次。
this.tdtMap.addControl(ctrl);
// 7.创建坐标，通常是调取接口获得经纬度
const point = new T.LngLat(112.9388, 28.2280);
// 8.创建覆盖使用的图标
const icon = new T.Icon({
iconUrl: '../marker-red.png',
iconSize: new T.Point(27, 27),
iconAnchor: new T.Point(10, 25)
});
// 9. 创建在该坐标上的一个图像标注实例
const marker = new T.Marker(point, icon);
// 10.将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
this.tdtMap.addOverLay(marker);
}
}
};
</script>
<style scoped>
.divTdtMap {
margin: 0px;
padding: 0px;
width: 100%;
height: 80vh;
z-index: 0;
}
</style>This is enough, but it is only the display of the map, and other functions such as coordinate marks and information windows can be realized in combination with the official example of Tiantu
Attached API summary:
设置地图中心点、缩放级别: map.centerAndZoom(new T.LngLat(lng, lat), zoom);
var map;
var zoom = 12;
//初始化地图对象
map = new T.Map("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(120.19551,30.25082), zoom);
放大地图:map.zoomIn()//类似双击地图
缩小地图:map.zoomOut()//类似双击地图
指定缩放几倍:map.setZoom(14);
地图平移:map.panTo(new T.LngLat(116.64899, 40.12948));
var bs = map.getBounds(); //获取可视区域
var bssw = bs.getSouthWest(); //可视区域左下角
var bsne = bs.getNorthEast(); //可视区域右上角
设置是否允许鼠标双击放大地图:
map.enableDoubleClickZoom();//允许双击地图放大
map.disableDoubleClickZoom();//禁止双击地图放大
设置是否允许鼠标滚轮缩放地图:
map.enableScrollWheelZoom();//允许鼠标滚轮缩放地图
map.disableScrollWheelZoom();//禁止鼠标滚轮缩放地图
设置是否允许鼠标惯性拖拽地图
map.enableInertia();//允许鼠标地图惯性拖拽
map.disableInertia()//禁止鼠标地图惯性拖拽
设置是否允许键盘操作地图
map.enableKeyboard();//允许键盘操作地图
map.disableKeyboard()//禁止键盘操作地图1. Prepare the page
According to the HTML standard, every HTML document should declare the correct document type, we recommend that you use the latest HTML5-compliant document declaration:
1
<!DOCTYPE html>
2. Introduce the Tiandi map JavaScript API file
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>3. Create a map container element
Maps require an HTML element as a container in order to be displayed on the page. Here we create a div element. Set the width and height of the div element to 100% so that it fills the entire screen, or you can calculate the size of the browser window and set it.
4. Create a map instance
//初始化地图对象
var map=new T.Map('mapDiv');5. Determine the latitude and longitude coordinates
var lnglat = new T.LngLat(116.40969,39.89945)Here we use the T.Lnglat class under the T namespace to create a coordinate point. The T.Lnglat class describes a geographic coordinate point, where 116.40969 represents longitude and 39.89945 represents latitude.
6. Map initialization
map.centerAndZoom(lnglat,12);After creating the map instance, we need to initialize it. The map.centerAndZoom method requires setting the coordinates of the center point and the map level. Maps must be initialized before other operations can be performed.