基于天地图热力图及区域划分

使用天地图实现行政区域划分实现方式有两种：

1. 使用国家天地图提供的SDK
2. Openlayers
3. 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);
		
		});
	}