思路
1539323990(1).png
1539324131(1).png
確定區(qū)域
在這里使用高德js api獲取行政區(qū)劃數(shù)據(jù)
生成網(wǎng)格
使用前端turf組件進(jìn)行網(wǎng)格構(gòu)建
地圖遍歷
因?yàn)槭噶客咂枰耆虞d完成后，才能下載，所以各位看官根據(jù)各自的網(wǎng)絡(luò)情況設(shè)置時(shí)間。
數(shù)據(jù)上傳
后臺(tái)構(gòu)建，由于數(shù)據(jù)可能較多，因此需要將數(shù)據(jù)分成數(shù)次提交
//四維圖新地圖
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生成網(wǎng)格
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, //獲取邊界不需要返回下級(jí)行政區(qū)
extensions: 'all', //返回行政區(qū)邊界坐標(biāo)組等具體信息
level: 'district' //查詢(xún)行政級(jí)別為 市
};
var district = new AMap.DistrictSearch(opts);
//行政區(qū)查詢(xún)
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)
}
//行政區(qū)劃
var polygon = turf.polygon([points]);
gridBox = turf.bbox(polygon);
var cellSide = 3;
var options = {units: 'kilometers'};
//網(wǎng)格構(gòu)建
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,
}
});
/**
*網(wǎng)格index顯示
*/
map.addLayer({
"id": "squareGridTextLayer",
"type": "symbol",
"source": "squareGridSource",
"layout": {
"text-field": "{featureIndex}",
"text-anchor": "center"
},
"paint": {
"icon-color": "#0000ff"
}
});
});
}
//創(chuàng)建網(wǎng)格
function createGrids(){
var areaName=$("#district").val()
var level=document.getElementById('level').value
drawBounds(areaName,level)
}
//開(kāi)始爬取
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("請(qǐng)先創(chuàng)建網(wǎng)格")
}
}
//地圖移動(dòng)后，數(shù)據(jù)上傳
map.on('moveend', function (e) {
var timer1 = setInterval(function(){
var trafficLayerIds=[];
trafficLayerIds=['cd9377debb6e45aebbb099b7359ead95','4e986c8429b140a5a584ba954f9d4732'];
//查詢(xún)地圖數(shù)據(jù)
// 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)
})
//上傳函數(shù)
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實(shí)現(xiàn)
def getJson(request):
todo_list = {"id": "1", "content": "數(shù)據(jù)已接收，正在處理中..."}
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": "數(shù)據(jù)已接收，正在處理中..."}
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();#
--數(shù)據(jù)庫(kù)建表語(yǔ)句
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";
