天地图没有直接提供加载GeoJson数据或者文件的api,但是我们可以借助绘制多边形的方式实现

1 实现效果

绘制如下的矢量多边形效果；

2 实现技术

(1) 首先用ajax请求geojson文件，从文件解析并获取到坐标数据

下面这个方法就是解析geojson返回的featurecollection中的坐标方式；其中可能有多段线稍微处理一下即可


/*** 从featureCollection获取所有linestring* @param {*} featureCollection * @returns  返回线段数组*/
function  getLinesFromGeojson(featureCollection){let lines=[];let geometries=featureCollection.geometriesfor(let i=0;i<geometries.length;i++){let geometry=geometries[i]let type=geometry.type;if(type==="LineString"){let line=geometry.coordinateslines.push(line)}if(type==="MultiLineString"){let subLines=geometry.coordinateslines=lines.concat(subLines) }}return lines
}

(2) 创建两个多边形，一个正常绘制；另一个背景偏移蒙版；可以表现出一定的立体效果；效果可以自己调样式

/*** 创建polygon* @param {*} points 多边形坐标 二维数组* @param {*} option * @returns  返回polygon*/
function createPolygon(coors,option){let points=[];coors.forEach((lonlat)=>{points.push(new T.LngLat(lonlat[0], lonlat[1]));})return new T.Polygon(points,{color: option.lineColor||"#47D4DE", weight:  option.lineWidth||1, opacity:  option.lineOpacity||1, fillColor: option.fillColor||"black", fillOpacity: option.fillOpacity||1});
}

3 主要代码

代码是vue工程编写；可根据情况适当更改

// 初始化地图initMap(){var zoom = 8;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=你自己的key";this.map = new T.Map("mapContainer", {layers: [this.createBaseLayer(imageURL)],minZoom: 5, maxZoom: 18});window.map=this.map;this.map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);this.map.enableScrollWheelZoom();},// 创建底图createBaseLayer(url){let layer = new T.TileLayer(url, {minZoom: 1, maxZoom: 18});return layer},// 异步加载Geojson数据async initPolygon(geojsonUrl,styleOption){let res= await axios.get(geojsonUrl);let featureCollection=res.data;let lines=tdtUtil.getLinesFromGeojson(featureCollection)lines.forEach((coors)=>{let polygon=tdtUtil.createPolygon(coors,styleOption);this.map.addOverLay(polygon);})   },// 初始化偏移矢量多边形async initOffsetPolygon(geojsonUrl,styleOption){let res= await axios.get(geojsonUrl);let featureCollection=res.data;let lines=tdtUtil.getLinesFromGeojson(featureCollection)lines.forEach((coors)=>{let polygon=tdtUtil.createOffsetPolygon(coors,styleOption);this.map.addOverLay(polygon);})   }

初始调用

mounted(){// 初始化地图this.initMap();// 初始化区边界this.initPolygon("./static/district_county_bound.json",{fillOpacity:0.001});// 初始化市边界this.initPolygon("./static/district_city_bound.json",{lineWidth:3,fillOpacity:0.001});// 市背景蒙版this.initOffsetPolygon("./static/district_city_bound.json",{lineWidth:0.6,fillOpacity:0.5,});}

4 api工具类

常用方法整理在一起使用直接调用，也比较方便；后续有需求会继续完善；所以单独上传；见天地图工具类封装

【天地图】使用天地图api绘制GeoJson数据相关推荐

利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup
1.引言由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...
python怎么安装bokeh_Python如何使用bokeh包和geojson数据绘制地图
最近要绘制伦敦区地图,查阅了很多资料后最终选择使用bokeh包以及伦敦区的geojson数据绘制. bokeh是基于python的绘图工具,可以绘制各种类型的图表,支持geojson数据的读取及绘制地 ...
echarts地图学习（使用geoJson数据绘制地图）
参考文档使用echarts完成中国省市区县镇地图展示 echarts地图(中国地图展示各省数据) echarts实现中国地图区域分布图 vue + echarts 利用echarts中的map地图中 ...
echart绘制海南地图时增加南海诸岛显示（现成geojson数据）
使用场景:产品经理要求展示海南地图时,需要显示南海诸岛: 问题:南海诸岛在中国地图上的显示,是echart在mapName='china'时,默认fix进去.但是海南省不会默认fix进去解决方案:将 ...
WebGL，Cesium以及GeoJSON数据的简单介绍
目录一.WebGL 二.Cesium (1)Cesium:一个用于显示三维地球和地图的开源js库. (2)Cesium的基本功能: (3)cesium的依赖性与技术标准 (4)Cesium与周边产品 ...
Cesium添加geojson数据及WMS在线图层服务
地图初始化及geojson数据 html部分 <div id="GlobeView"></div>css #GlobeView{position: abso ...
QGIS离线GeoJSON数据，使用Cesium加载并根据楼层高度拉伸（weixin公众号【图说GIS】）
前言往往好多事情是需求推动的,正好一个网友在群里问到"怎么让Cesium加载GeoJSON的白膜并贴在地形上?",联系到他,要了他的数据,完成了代码并测试通过.正好出差,而且一个 ...
最新中国地图GeoJson数据（含十段线）
阿里联合高德的数据,最新中国地图的GeoJson数据 https://datav.aliyun.com/portal/school/atlas/area_selector 我自己拿到数据后又调整了一些 ...
2023年4月实时获取地图边界数据方法，省市区县街道多级联动【附实时geoJson数据下载】
首先,来看下效果图在线体验地址:https://geojson.hxkj.vip,并提供实时geoJson数据文件下载可下载的数据包含省级geojson行政边界数据.市级geojson行政边界数据 ...

【天地图】使用天地图api绘制GeoJson数据

1 实现效果

2 实现技术

3 主要代码

4 api工具类

【天地图】使用天地图api绘制GeoJson数据相关推荐

最新文章

热门文章