天地图 |
您所在的位置：网站首页 › 百度地图怎么显示边界线 › 天地图 |
|
1、天地图官网 天地图API 2、常用参考文档 （1）地图API 天地图API (tianditu.gov.cn) （2）JavaScript API 4.0 类参考（常用） 天地图API (tianditu.gov.cn) （3）JavaScript API 4.0代码示例（常用） 天地图API (tianditu.gov.cn) （4）web API 代码示例 代码示例-Web API (tianditu.gov.cn) （5）vue使用天地图 https://soullyoko.github.io/vue-tianditu 3、快速入门 在使用之前，先去申请应用Key：天地图开发管理平台 (tianditu.gov.cn) 代码示例： 天地图 var map; var zoom = 6; function onLoad() { //创建地图实例 map = new T.Map('mapDiv',{ //初始化地图 minZoom: 1,//也可以通过方法设置，具体可查看JavaScript API 4.0 类参考 maxZoom: 18 }); map.centerAndZoom(new T.LngLat(104, 30), zoom);//初始化地图对象，设置中心点和地图级别 // map.setMinZoom(1); // map.setMaxZoom(10); }4、常用方法介绍 （1）获取行政区划信息——points返回为空，只能使用其他方式获取行政区划边界坐标（参考（3）绘制边界线） let district = new T.AdministrativeDivision(); //创建一个获取行政区划的实例 let config = { needSubInfo: true, //是否需要下一级信息 needAll: false, //是否需要所有子节点。 needPolygon: true,//是否需要行政区划范围。 needPre: true,//是否需要上一级所有信息。 searchType: 1,//查询类型。0表示根据code查询，1表示根据名称查询。 searchWord: '四川省'//查询行政区划的名称。 }; district.search(config, function (result) { // console.log(result) if (result.getStatus() == 100) { let data = result.getData(); // console.log(data) // 查找成都的经纬度 let cd = data[0].child.find(item => item.name == '成都市') let lnt = cd.lnt;//经度 let lat = cd.lat;//维度 } else { console.log(result.msg) } })（2）创建地图并标记当前位置 var map = new T.Map('myDiv', { minZoom: 1, maxZoom: 18 }); map.centerAndZoom(new T.LngLat(longitude, latitude), 6); // 标记当前位置 var customIcon = new T.Icon({ iconUrl: 'imgs/now.png', // 替换为自定义图标的 URL iconSize: new T.Point(40, 40), // 替换为图标的实际大小 iconAnchor: new T.Point(20, 40) // 替换为图标的锚点位置 }); var marker = new T.Marker(new T.LngLat(longitude, latitude), { icon: customIcon }); map.addOverLay(marker);（3）绘制边界线 获取行政区划信息：DataV.GeoAtlas地理小工具系列 (aliyun.com) // 获取行政区划边界信息 axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json').then(res => { var countries = res.data.features // console.log(countries) var sc = countries.find(item => item.properties.name == '四川省') // console.log(sc) var bounds = sc.geometry.coordinates[0][0] // console.log(bounds) drawLine(bounds) }) function drawLine(lines) {// 绘制边界线 let style = { color: '#81a5b9', weight: 3, opacity: 1, lineStyle: 'solid', // 实线;dashed虚线 fillColor: 'transprent', fillOpacity: 0 // 透明度 } let points = [] lines.forEach(line => { // lines是边界经纬度组成的数组 var point = new T.LngLat(line[0], line[1]) points.push(point) }) // console.log(points) var poly = new T.Polygon(points, style) map.addOverLay(poly) },（4）在地图上绘制点位（点聚合） function showPoints(markers) { var that = this if (this.markerClusterer) { // 删除之前的标记点 this.markerClusterer.clearMarkers() } // 聚合maskers var markersData = []; for (var i = 0; i < markers.length; i++) { if (!markers[i].longitude || !markers[i].latitude) continue; var icon = new T.Icon({ iconUrl: markers[i].img, iconSize: new T.Point(markers[i].width, markers[i].height), iconAnchor: new T.Point(20, 40) // 替换为图标的锚点位置 }); var marker = new T.Marker(new T.LngLat(markers[i].longitude, markers[i].latitude), { icon: icon }); // 给每个标记点添加信息窗口 var opts = { autoPan: true, closeOnClick: true, offset: new T.Point(0, -40) } var infoWindow = new T.InfoWindow('你好', opts); /** * 利用闭包的方式在每次循环迭代中捕获并传递独立的 infoWindow 对象给相应的标记点， * 确保每个标记点点击时都能正确显示对应的信息窗口内容 */ (function (marker, infoWindow) { marker.addEventListener("click", function () { that.focusTarget = false that.lngLat = marker.getLngLat() map.openInfoWindow(infoWindow, marker.getLngLat()); var myLink = document.getElementById("detail"); myLink.addEventListener("click", function (event) { event.preventDefault(); // 阻止默认链接跳转行为 //其他代码 }); }); })(marker, infoWindow) // map.addOverLay(marker);//逐个绘制标注 markersData.push(marker);//不想聚合，就把关于聚合的代码删掉就行 } // console.log(markersData) //生成一个marker数组，然后调用markerClusterer类 var config = { markers: markersData }; this.markerClusterer = new T.MarkerClusterer(map, config); this.markerClusterer.setMaxZoom(18)//确保当缩放到最大级别时，聚合点能完全展示 this.markerClusterer.setStyles([ { url: 'imgs/cluster0.png', // 聚合的图标 size: [40, 40], //聚合的图标大小 offset: new T.Point(0, 0), //显示图片的偏移量 textColor: '#fff', //显示数字的颜色 textSize: 10,//显示文字的大小 range: [0, 10000] } ]) }（5）地图平移——改变中心点坐标，移动到其他位置 var lngLat=new T.LngLat(104.3, 30.5) var center=new T.LngLat(104, 30) function check(lngLat,center) { if (lngLat && !this.focusTarget) { this.focusTarget = true map.panTo(lngLat); } else { this.focusTarget = false map.panTo(center); } }（6）三维地图 三维服务 - 天地图 帮助文档 (tianditu.gov.cn) （7）加载单个图层 天地图－地图API－范例－地图加载单图层 body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:100%}input,b,p{margin-left:5px;font-size:14px} var map; var zoom = 8; var lay; var onlyMapLay; function onLoad() { var imageURL = "http://t0.tianditu.gov.cn/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=c5ca847283daf01692fcfdad54e7654e"; // 创建自定义图层对象 lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 }); var config = { layers: [lay] }; //初始化地图对象 map = new T.Map("mapDiv", config); //设置显示地图的中心点和级别 map.centerAndZoom(new T.LngLat(104, 30), zoom); //允许鼠标滚轮缩放地图 map.enableScrollWheelZoom(); }（8）去掉天地图自带的版权控件 .tdt-control-copyright.tdt-control>div:not(.tdt-control-copyright) { display: none; }（9）逆地理编码——根据经纬度获取地址 function getLocation() {//根据坐标获取地名 var geocode = new T.Geocoder(); var lngLat = new T.LngLat(104.3, 30.5) geocode.getLocation(lngLat, function (res) { console.log(res) if (res.getStatus() == 0) { let address = res.getAddress() alert(address) } else { alert('获取点位地址失败') } }); }（10）地理编码——根据地址获取经纬度 function getPoint(location) {//根据地名返回经纬度 var geocode = new T.Geocoder(); geocode.getPoint(location, function (result) { // console.log(result) if (result.getStatus() == 0) { let point = result.getLocationPoint() // console.log(point) alert(point.lat + ',' + point.lng) } else { alert(result.getMsg()); } }); } getPoint("成都市") |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |