思路
1539323990(1).png
1539324131(1).png
确定区域
在这里使用高德js api获取行政区划数据
生成网格
使用前端turf组件进行网格构建
地图遍历
因为矢量瓦片需要完全加载完成后，才能下载，所以各位看官根据各自的网络情况设置时间。
数据上传
后台构建，由于数据可能较多，因此需要将数据分成数次提交
//四维图新地图
var map = new minemap.Map({
container: 'map',
style: '//minedata.cn/service/solu/style/id/9225',
center: [120.1579, 30.2287],
zoom: 11,
// pitch: 20,
maxZoom:17
});
//利用高德API和turf生成网格
function drawBounds(areaName,level) {
console.log(map.getSource("squareGridSource"));
if(map.getSource("squareGridSource")!=undefined&&map.getLayer("squareGridLayer")!=undefined){
map.removeLayer("squareGridLayer");
map.removeSource("squareGridSource");
map.removeLayer("squareGridTextLayer");
map.removeLayer("squarePolygonLayer");
map.removeSource("squarePolygonSource");
}
var opts = {
subdistrict: 0, //获取边界不需要返回下级行政区
extensions: 'all', //返回行政区边界坐标组等具体信息
level: 'district' //查询行政级别为 市
};
var district = new AMap.DistrictSearch(opts);
//行政区查询
district.setLevel(level)
district.search(areaName, function(status, result) {
console.log(result)
polygons = [];
var bounds = result.districtList[0].boundaries;
var points=[];
for(var i=0;i<bounds[0].length;i++){
var point=[bounds[0][i].lng,bounds[0][i].lat];
points.push(point)
}
//行政区划
var polygon = turf.polygon([points]);
gridBox = turf.bbox(polygon);
var cellSide = 3;
var options = {units: 'kilometers'};
//网格构建
var squareGrid = turf.squareGrid(gridBox, cellSide, options);
console.log(squareGrid);
turf.flattenEach(squareGrid, function (currentFeature, featureIndex, multiFeatureIndex) {
currentFeature.properties.featureIndex=featureIndex;
currentFeature.properties.isVisiable=true;
});
//图层添加
map.addSource("squareGridSource", {
"type": "geojson",
"data": squareGrid
});
map.addLayer({
"id": "squareGridLayer",
'type': 'fill',
"source": "squareGridSource",
"filter": [
"==",
"isVisiable",
true
],
'layout': {
},
'paint': {
'fill-color': '#088',
'fill-opacity': 0.5,
}
});
map.addSource("squarePolygonSource", {
"type": "geojson",
"data": polygon
});
map.addLayer({
"id": "squarePolygonLayer",
'type': 'fill',
"source": "squarePolygonSource",
'layout': {
},
'paint': {
'fill-color': '#088',
'fill-opacity': 0.9,
}
});
/**
*网格index显示
*/
map.addLayer({
"id": "squareGridTextLayer",
"type": "symbol",
"source": "squareGridSource",
"layout": {
"text-field": "{featureIndex}",
"text-anchor": "center"
},
"paint": {
"icon-color": "#0000ff"
}
});
});
}
//创建网格
function createGrids(){
var areaName=$("#district").val()
var level=document.getElementById('level').value
drawBounds(areaName,level)
}
//开始爬取
function startCrawler(){
if(map.getSource("squareGridSource")!=undefined){
var gridGeojson=map.getSource("squareGridSource")._data;
var features=gridGeojson.features;
var i=0;
var timer = setInterval(function(){
var currentFeature=features[i];
if(currentFeature.properties.isVisiable){
var bbox = turf.bbox(currentFeature);
map.fitBounds([[bbox[0], bbox[1]],[bbox[2], bbox[3]]]);
}
i++;
if(i==features.length){
clearInterval(timer)
}
},30000)
}else{
alert("请先创建网格")
}
}
//地图移动后，数据上传
map.on('moveend', function (e) {
var timer1 = setInterval(function(){
var trafficLayerIds=[];
trafficLayerIds=['cd9377debb6e45aebbb099b7359ead95','4e986c8429b140a5a584ba954f9d4732'];
//查询地图数据
// var features = map.queryRenderedFeatures();
var features = map.queryRenderedFeatures({layers: trafficLayerIds});
console.log(features)
var count=Math.ceil(features.length/20)
console.log(count)
for(var i=0;i<count;i++){
var tempFeatures=[];
for(var j=i*20;j<i*20+20;j++){
if(features[j]!=undefined||features[j]!=null){
tempFeatures.push(features[j]);
}
}
subData(tempFeatures);
sleep(2000);
}
clearInterval(timer1)
},20000)
})
//上传函数
function subData(features){
var url="http://localhost:8000/getJson";
$.ajax({
url: url,
data:{geomDatas:JSON.stringify(features).toString()},
type: 'POST',
success: function (data) {
console.log(data)
}
})
}
//休眠
function sleep(obj,iMinSecond) {
if (window.eventList == null) window.eventList = new Array();
var ind = -1;
for (var i = 0; i < window.eventList.length; i++) {
console.log(i)
if (window.eventList[i] == null) {
window.eventList[i] = obj;
ind = i;
break;
}
}
}
#后端代码 Python实现
def getJson(request):
todo_list = {"id": "1", "content": "数据已接收，正在处理中..."}
if request.POST:
if 'geomDatas' in request.POST:
print(todo_list);
geomDatas=request.POST['geomDatas'];
total_json = json.loads(geomDatas);
print(total_json)
for vo in total_json:
print(vo)
geometry=vo.get("geometry");
properties=vo.get("properties");
layer_id=vo.get("layer").get("id");
source=vo.get("layer").get("source");
addOneRecord(layer_id,json.dumps(properties,ensure_ascii=False),json.dumps(geometry),source);
else:
todo_list = {"id": "1", "content": "数据已接收，正在处理中..."}
response = JsonResponse(todo_list, safe=False)
return response
def addOneRecord(layer_id,properties,geometry,source):
sql = "INSERT INTO minemap_data (layer_id, properties, geometry,source) VALUES ('"+layer_id+"', '"+properties+"', '"+geometry+"','"+source+"');";
print(sql)
conn = psycopg2.connect(database=dataBase, user=user, password=password, host=host, port=port);
cur = conn.cursor();
try:
cur.execute(sql);
conn.commit();
except Exception as e:
print(e);
finally:
conn.commit();
cur.close();
conn.close();
cur.close();
conn.close();#
--数据库建表语句
CREATE TABLE "public"."minemap_data" (
"layer_id" varchar(50) COLLATE "default" NOT NULL,
"properties" text COLLATE "default" NOT NULL,
"geometry" text COLLATE "default" NOT NULL,
"source" varchar(30) COLLATE "default",
CONSTRAINT "minemap_data_pkey" PRIMARY KEY ("layer_id", "properties", "geometry")
)
WITH (OIDS=FALSE)
;
ALTER TABLE "public"."minemap_data" OWNER TO "postgres";
网友评论