GIS工具maptalks开发手册用JSON载入地图——json格式绘制多个面之全量工具版，包括

货源人·学电商5个月前 (01-10)开店经验

GIS工具maptalks开发手册用JSON载入地图——json格式绘制多个面之全量工具版，包括-shape绘制、disable关闭、clear清空和图层之添加、移除、显示、隐藏

效果-json渲染图层-全量工具代码

<!DOCTYPEhtml><html><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>JSON序列化-用JSON载入地图</title><styletype="text/css">html,body{margin:0px;height:100%;width:100%;}.container{width:1400px;height:500px;margin:50px;}#json{position:fixed;background-color:rgba(13,13,13,0.5);padding:10px10px10px10px;font:13pxboldsans-serif;color:#fff;left:0px;top:0px;width:100%;height:85px;overflow:hidden}</style><linkrel="stylesheet"href="https://unpkg.com/maptalks/dist/maptalks.css"><scripttype="text/javascript"src="./jsonMapData.js"></script><scripttype="text/javascript"src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script><body><divid="map"class="container"></div><!--<divid="json"></div>--><script>varmapJSON={"version":"1.0","options":{"center":{//"x":114.40184088740602,//"y":37.002608169667695"x":114.406728,"y":37.005423},"dragRotate":true,//是否开启鼠标拖动旋转（右键或者ctrl+左键）"scaleControl":true,//比例尺控件"zoom":16},"baseLayer":{"type":"TileLayer","id":"base","options":{"urlTemplate":"http://{s}.tile.osm.org/{z}/{x}/{y}.png","subdomains":["a","b","c"]}},"layers":jsonMapData,};varmap=maptalks.Map.fromJSON('map',mapJSON);varlayer=map.getLayer('v');vardrawTool=newmaptalks.DrawTool({mode:'Point'}).addTo(map).disable();drawTool.on('drawend',function(param){//console.log(param.geometry);console.log('面的坐标',param.geometry._coordinates);layer.addGeometry(param.geometry);});varitems=['Point','LineString','Polygon'].map(function(value){return{item:value,click:function(){drawTool.setMode(value).enable();}};});vartoolbar=newmaptalks.control.Toolbar({items:[{item:'Shape/绘制',children:items},{item:'Disable关闭',click:function(){drawTool.disable();}},{item:'Clear清空',click:function(){layer.clear();}},{item:'添加图层',click:function(){this.map.addLayer(this.layer);}},{item:'移除图层',click:function(){this.map.removeLayer(this.layer);}},{item:'显示图层',click:function(){layer.show();}},{item:'隐藏图层',click:function(){layer.hide();}},{item:'↑',click:up},{item:'↓',click:down},{item:'←',click:left},{item:'→',click:right},{item:'旋转',click:(e)=>{console.log('参数',e);//map2.setBearing(e.target.getBearing());//map.setBearing(map.bearing-=50)map.setBearing(map.getBearing()-=50)}}]}).addTo(map);varaddZoomTool=newmaptalks.control.Zoom({//工具位置position:'top-left',//是否是以线段条方式展示slider:false,//是否显示缩放级别文本框zoomLevel:true}).addTo(map);showMap();functionshowMap(){console.log('地图信息',map._zoomLevel);if(map._zoomLevel!==16){//仅在14级显示图层map.removeLayer(layer);}}map.on('zoomend',function(zoomVal){console.log('zoom值',zoomVal);if(zoomVal.to===16){//仅在14级显示图层map.addLayer(layer);//添加图层//this.map.addLayer(this.vectorLayer);//添加图层}else{map.removeLayer(layer);//删除图层////this.map.removeLayer(this.vectorLayer);//删除图层}});map.on('rotate',(e)=>{console.log('旋转',e);//map.setBearing(map.getBearing()-=50)//map.setBearing(e.target.getBearing());//map.addLayer(layer);//添加图层});//functionadd(){//map.addLayer(layer);//}//functionremove(){//map.removeLayer(layer);//}//this.map.addLayer(this.layer);//this.map.removeLayer(this.layer);functionup(){map.panBy([0,-200]);//设置偏移量[x,y]}functiondown(){map.panBy([0,200]);}functionleft(){map.panBy([-200,0]);}functionright(){map.panBy([200,0]);}//document.getElementById('json').innerHTML=JSON.stringify(mapJSON);</script></body></html>

在MapTalks中，我们可以使用JSON格式来载入和绘制多个面。以下是一个全量工具版的指南：

1. Shape绘制

首先，你需要有一个JSON对象，它包含了你要绘制的面的信息。以下是一个例子：

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[116.38,39.9],[116.48,39.9],[116.48,39.92],[116.38,39.92],[116.38,39.9]]]},"properties":{"name":"Area1"}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[116.4,39.95],[116.5,39.95],[116.5,39.97],[116.4,39.97],[116.4,39.95]]]},"properties":{"name":"Area2"}}]}

然后，你可以使用MapTalks的`GeoJSON.toGeometry()`方法将这个JSON对象转换为几何对象，然后添加到地图上：

varmap=newmaptalks.Map('map',{center:[116.4,39.9],zoom:10,baseLayer:newmaptalks.TileLayer('base',{urlTemplate:'https://{s}.xxx.com/dark_all/{z}/{x}/{y}.png',subdomains:['a','b','c']})});varjson={...};//yourJSONobjectvargeometry=maptalks.GeoJSON.toGeometry(json);varlayer=newmaptalks.VectorLayer('v').addGeometry(geometry);map.addLayer(layer);

2. Disable关闭

要关闭一个图层，你可以调用其`disable()`方法：