使用天地图实现行政区域划分实现方式有两种:
- 使用国家天地图提供的SDK
- Openlayers
- Leaflet
实现效果:
利用国家天地图实现区域划分
首先需要注册成为开发者获取所需的开发秘钥才可进行开发。
官网地址:国家天地图用户注册
注册成功后获得开发者keys即可进行对应的开发。
接下来是获取你所需行政区划的坐标点才可进行划分。在没有获取数据的楼主是采用一下方式:
在开发案例中,通过搜索所需的行政区域,在页面返还的json字符串中有该行政区划的坐标点以及它的相关信息。(该功能只支持到区级的行政区划。)
<script>
var map;
var zoom = 10;
//地图初始化
function onLoad() {
map = new T.Map('mapDiv', {
projection: 'EPSG:4326'
});
map.centerAndZoom(new T.LngLat(120.137243,30.8779251), zoom);
//定义区域划分的json数据数组
var huzhouArea = [deqingarea,anjiarea,wuxingarea,nanxunarea,changxingarea];
//随机给区块的热力值 根据热力值显示不同的颜色
var huzhouNumber = [95,20,50,70,40];
for (var i = 0,sdLen = huzhouArea.length; i < sdLen; i++) {
//调用方法画出相应地区热力图
drawArea(huzhouArea[i],huzhouNumber[i]/150);
};
}
//根据提供的数据设置线和面的样式 在地图中添加json数据的坐标点
function drawArea(json,opacity){
var area = json.area;
var points = area.points;
//如果有区域坐标信息,画出此行政区的多边形。
if(points && points.length != 0){
//面的线的样式
var style = {
color: "purple",
weight: 1.5,
opacity: 1,
strokeStyle : "dashed", //虚线
fillColor : "red",
fillOpacity : opacity //透明度
};
for(var i = 0;i < points.length;i++){
var region = points[i].region;//单个面
var pointArr = region.split(",");
var pointsz = [];
for(var j = 0;j < pointArr.length - 1;j++){
var p = pointArr[j];
var pArr = p.split(" ");
var point = new T.LngLat(pArr[0],pArr[1]);
pointsz.push(point);
}
var poly = new T.Polygon(pointsz,style);
map.addOverLay(poly);
}
}
}
使用Openlayers
当然行政区划和热力图也可以通过Leaflet和Openlayers的SDK来实现。两种都大同小异,以下用Openlayers为例。
var projection = ol.proj.get("EPSG:4326");
var projectionExtent = projection.getExtent();
var res = [
1.40625,
0.703125,
0.3515625,
0.17578125,
0.087890625,
0.0439453125,
0.02197265625,
0.010986328125,
0.0054931640625,
0.00274658203125,
0.001373291015625,
0.0006866455078125,
0.00034332275390625,
0.000171661376953125,
0.0000858306884765625,
0.00004291534423828125,
0.000021457672119140625,
0.000010728836059570312,
0.000005364418029785156,
0.000002682209014892578,
0.000001341104507446289
];
var view = new ol.View({
center: [120.257243,30.8399251],
projection: projection,
zoom: 11,
maxZoom: 20,
minZoom: 1
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "中国矢量1-4级",
url: "http://t{0-6}.tianditu.com/vec_c/wmts?tk=85b88ce10c15f390ee75bf571688b3b7",
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: res.slice(0, 15),
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
})
}),
minResolution: 0.00004291534423828125,
maxResolution: 1.40625
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "中国矢量注记1-4级",
url: "http://t{0-6}.tianditu.com/cva_c/wmts?tk=85b88ce10c15f390ee75bf571688b3b7",
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: res.slice(0, 15),
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
})
}),
minResolution: 0.00004291534423828125,
maxResolution: 1.40625
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "浙江矢量7-20级",
url: "http://srv{0-6}.zjditu.cn/ZJEMAP_2D/wmts",
layer: "TDT_ZJEMAP",
style: "default",
matrixSet: "TileMatrixSet0",
format: "image/png",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: res.slice(7, 21),
matrixIds: [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
})
}),
minResolution: 0.000001341104507446289,
maxResolution: 0.02197265625
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "浙江矢量注记7-20级",
url: "http://srv{0-6}.zjditu.cn/ZJEMAPANNO_2D/wmts",
layer: "ZJEMAPANNO",
style: "default",
matrixSet: "TileMatrixSet0",
format: "image/png",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: res.slice(7, 21),
matrixIds: [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
})
}),
minResolution: 0.000001341104507446289,
maxResolution: 0.02197265625
})
],
target: "map",
view:view
});
//矢量样式
var createStyle = function (feature){
return new ol.style.Style({
stroke: new ol.style.Stroke({
width:0.7,
color:'purple',
}),
fill: new ol.style.Fill({
color:'rgba(186,85,211,0.01)'
})
});
}
//定义json数据数组
var communityData = [area1,area2,area3,area4];
//根据数据格式遍历出坐标点
var features = communityData[0].features;
for(i=0;i<=features.length;i++){
features.map(item=>{console.log('item',item.geometry.coordinates);});
features.map(item => {
let opt = item.geometry.coordinates;
//矢量要素
var feature =new ol.Feature({
geometry:new ol.geom.Polygon(opt)
});
feature.setStyle(createStyle(feature));
//矢量要素数据源
var source = new ol.source.Vector();
source.addFeature(feature);
var vectorPolygons = new ol.layer.Vector({
source: source
});
//坐标点添加到地图上
map.addLayer(vectorPolygons);
});
}