引入天地图文件
<meta http-equiv="Content-Security-Policy" content="default-src *; img-src * /img/map/mapctrls.png data: ;style-src 'self' 'unsafe-inline' http://api./v4.0/css/tianditu4.0.css; script-src * 'unsafe-inline' 'unsafe-eval'"><meta http-equiv="P3P" content='CP="IDC DSP COR CURa ADMa OUR IND PHY ONL COM STA"'><link rel="icon" href="<%= BASE_URL %>logo.ico"><script src="config.js"></script><script type="text/javascript" src="http://api./api?v=4.0&tk=你的密钥"></script>
页面加载天地图
loadMap () {let location = this.defaultLocation // 设置地图中心点let lnglat = new T.LngLat(location.lng, location.lat) // 创建经纬度坐标let imageURL = 'http://t0./img_w/wmts?' +'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +'&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的密钥' // 影像图层let imageURL2 = 'http://t0./cia_w/wmts?' +'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +'&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的密钥' // 影像注记const lay = new T.TileLayer(imageURL, {opacity: this.opacity })const lay2 = new T.TileLayer(imageURL2, {opacity: this.opacity })const config = {layers: [lay,lay2], name: 'TMAP_SATELLITE_MAP' } // 卫星视图if (this.map === null) {this.map = new T.Map('mapContainer', config) // 创建地图实例this.map.centerAndZoom(lnglat, this.mapZoom) // 地图初始化this.map.disableScrollWheelZoom() // 禁止地图缩放this.map.disableDrag() // 禁止地图拖拽this.map.disableDoubleClickZoom() // 禁用双击变大// this.map.disableKeyboard() // 禁止键盘操作// this.map.disableInertia() // 禁用地图惯性拖拽} else {this.map.panTo(lnglat) // 地图定位}}
实现效果如下：
绘制新疆轮廓
drawLine () {let style = {color: 'blue',weight: 3,opacity: 1,lineStyle : 'dashed', // 虚线fillColor : 'transprent',fillOpacity : 0 // 透明度}let points = []lines.forEach(line => {// lines是边界经纬度组成的数组var point = new T.LngLat(line[0], line[1])points.push(point)})var poly = new T.Polygon(points, style)this.map.addOverLay(poly)}
实现效果
