国家天地图API 创建面覆盖物

创建已知坐标面

html代码：

<div style="position: absolute; float: left; margin-left: 5%; margin-top: 1%; z-index: 500;"><input type="button" οnclick="vector()" value="矢　量" /><input type="button" οnclick="satellite()" value="影　像" /><input type="button" οnclick="hybrid()" value="混　合" /></div><div id="mapDiv" style="position: absolute; width: 99%; height: 99%"></div>

javascript代码:

<script src="JScript/jquery1.7.2.min.js" type="text/javascript"></script><script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script><script type="text/javascript">var map, zoom = 18, infoWin, polygon, centerPoint, maxPoint;var maxPointLat, minPointLat, maxPointLng, minPointLng;function onLoad() {

 //关键的点集合var points = [];points.push(new TLngLat(104.06027, 30.65958));points.push(new TLngLat(104.06113, 30.66043));points.push(new TLngLat(104.06137, 30.65954));points.push(new TLngLat(104.06042, 30.65887));//获取多边形的最中心点的坐标 new TLngLat(lng, lat)maxPointLat = points[0].getLat();minPointLat = points[0].getLat();for (var i = 0; i < points.length; i++) {if (maxPointLat <= points[i].getLat()) {maxPointLat = points[i].getLat();maxPoint = points[i];}else if (minPointLat >= points[i].getLat()) {minPointLat = points[i].getLat();}}maxPointLng = points[0].getLng();minPointLng = points[0].getLng();for (var i = 0; i < points.length; i++) {if (maxPointLng <= points[i].getLng()) {maxPointLng = points[i].getLng();}else if (minPointLng >= points[i].getLng()) {minPointLng = points[i].getLng();}}var lat = minPointLat + (maxPointLat - minPointLat) / 2;var lng = minPointLng + (maxPointLng - minPointLng) / 2;map = new TMap("mapDiv");map.centerAndZoom(new TLngLat(lng, lat), zoom);map.enableHandleMouseScroll();polygon = new TPolygon(points, { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5, fillOpacity: 0.5 });map.addOverLay(polygon);TEvent.addListener(polygon, "click", onClick);ShowInfoWindow();}function onClick() {infoWin.closeInfoWindow();ShowInfoWindow();}

 //单机显示相关信息 类似于ArcGIS Server的InfoWindowfunction ShowInfoWindow() {var html = [];html.push('<div id="div" style="width: 300px; height: 150px; ">');html.push('<table style="  border-collapse: separate; border-spacing: 10px;font-size:14px;margin-top:-10px;">');html.push('<tr><td><center style=" font-weight:bold;text-align:left;">地址:</center></td><td style="text-align:left;">四川省成都市天府广场</td></tr>');html.push('<tr><td><center style=" font-weight:bold;text-align:left;">类型:</center></td><td>承包地</td></tr>');html.push('<tr><td><center style=" font-weight:bold;text-align:left;">面积:</center></td><td>880亩</td></tr>');html.push('<tr><td><center style=" font-weight:bold;text-align:left;">价格:</center></td><td>120000元</td></tr>');html.push('<tr><td><center style=" font-weight:bold;text-align:left;">产权人:</center></td><td>成都市政府</td></tr>');html.push('<tr><td><center style=" font-weight:bold;text-align:left;">联系电话:</center></td><td>12306</td></tr>');html.push('</table>');html.push('</div>');infoWin = new TInfoWindow(maxPoint, new TPixel(9, 27));infoWin.setOffset(new TPixel(0, 0));infoWin.setLabel(html.join(' '));map.addOverLay(infoWin);var top = $("#div").offset().top;if (top < 0) {map.panBy(new TSize(0, -50 + top));}}

 //下面三个方法是对不同底图的调用function satellite() {map.setMapType(TMAP_SATELLITE_MAP);}function vector() {map.setMapType(TMAP_NORMAL_MAP);}function hybrid() {map.setMapType(TMAP_HYBRID_MAP);}</script>

后端只需要将数据传过来进行循环来添加到points数组中

效果图如下:

至于这句代码，详情请看国家天地图API 创建点覆盖物最后面

var top = $("#div").offset().top;if (top < 0) {map.panBy(new TSize(0, -50 + top));}

国家天地图API 创建面覆盖物相关推荐

国家天地图API 创建点覆盖物
html 代码 <body οnlοad="onLoad()"><div style="position: absolute; float: left; ...
国家天地图API 循环添加点参数传递问题
在天地图API中,进行循环添加点,添加Infowindow这个对大家都很容易,只是在传递Infowindow的参数时会存在一些问题. var lnglatArr = data.split(',');/ ...
获取天地图API并调用不同的地图API接口
文章目录概要 1.如何获取地图API 2.如何使用天地图API 2.1 注意请求示例中的代码概要本篇文章主要是想将我在学习webGIS过程只能遇到的一些问题分享给需要的朋友,喜欢的可以点赞给点鼓 ...
Vue项目使用天地图的方法（Vue引入天地图，创建地图实例）
最近项目需要用到天地图,要引入到Vue项目中,鉴于官网没有相关的说明文档,在这里我记录一下我所使用的引入方法,可能不是很好,希望有更好的方法大佬能教一下我. 第一步,在Vue项目文件夹public下的 ...
百度地图js版api绘制几何图形覆盖物并保存数据库
百度地图js版api绘制几何图形覆盖物并保存数据库你好!相信你看到这边文章的时候,我的方案,已经满足了你的需求: 1,在html5上调用web版百度地图api,绘制多边形,我项目的是绘制小区. 2, ...
api 创建zookeeper客户端_zookeeper分布式锁原理及实现
前言本文介绍下 zookeeper方式实现分布式锁原理简介 zookeeper实现分布式锁的原理就是多个节点同时在一个指定的节点下面创建临时会话顺序节点,谁创建的节点序号最小,谁就获得了锁,并且 ...
使用Native API 创建进程
使用 Native API 创建进程最近几个星期一直在研究这个题目.因为关于方面的资料比较多(可以看下面的参考文章),所以开始时以为很快就结束了.谁知道真正动起手来才发现有很多要考虑的地方,不过还好 ...
根据API创建BOM(Itpub)
--根据API创建BOM -- /******************************************************************************* *创建 ...
dingo php,用laravel dingo/api创建简单的api
这篇文章主要介绍了关于用laravel dingo/api创建简单的api,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 1,修改.env配置文件添加API_STANDARDS_TRE ...

国家天地图API 创建面覆盖物

国家天地图API 创建面覆盖物相关推荐

最新文章

热门文章

国家天地图API 创建面 覆盖物

国家天地图API 创建面 覆盖物相关推荐

最新文章

热门文章

国家天地图API 创建面覆盖物

国家天地图API 创建面覆盖物相关推荐