Day Map Special topic Seven: Administrative area mark, thermodynamic diagram (take Guangxi as an example)

Days of the map of the article has long been not written. Mainly because the last project is over, basically do not use the day map. With the Baidu map may be larger.

The last project party a wants to get a similar hot work, hot map of things. In the world map API did not find a similar direct painting of the thermal force of the interface, had to use a number of alternative methods.

Days Map administrative areas, administrative divisions direct interface also did not find, with the border point of their own painting.

Pondering for a while. Write it down. There is a need to refer to.

For example, to draw the heat of Guangxi province, the idea is very simple: to the Guangxi province of each city to paint color. Depending on the heat, the color of each city is added with a different transparency.

First up Effect chart:

On the day map, the area is drawn with interface Tpolygon according to the coordinate point. Can adjust color, transparency, sideline or something.

And then there is how to get the boundary points of these administrative regions. Ashamed to say, I was in a very stupid way:

To the day map code example there: http://api.tianditu.com/api-new/examples.html, use their search interface to search a province, the city, and then you can use the browser tool to get the area of the boundary coordinates.

Core code:

		Draw boundaries from the world map demo.
		function Drawarea (json,opacity) {

			var area = Json.area; 
			var points = area.points; 
			If you have regional coordinate information, draw the polygon of this administrative region. 
			if (points && points.length!= 0) { 
				//face line style 
				var style = { 
					Strokecolor: "#0027eb", 
					FillColor: "Red", 
					strokeweight:1, 
					strokeopacity:0.000001, 
		        	fillopacity:opacity,//transparency, random generation. 
		        	Strokestyle: "Dashed"//Dashed line 
		        } 
		        for (var i = 0;i < points.length;i++) { 
					var region = points[i].region;//single face 
					var Pointarr = Region.split (","); C18/>var Pointsz = []; 
					for (var j = 0;j < pointarr.length-1;j++) { 
						var p = pointarr[j]; 
						var pArr = P.split (""); 
						var point = new Tlnglat (parr[0],parr[1]); 
						Pointsz.push (point);				 
					} 
					var poly = new Tpolygon (pointsz,style); 
					Map.addoverlay (poly);}} 
		

var Areaarr = [Nanningarea,liuzhouarea,gunlinarea,wuzhouarea,beihaiarea,fangchenggangarea,qinzhouarea,guigangarea , Yulinarea,baisearea,hezhouarea,hechiarea,laibinarea,chongzuoarea,guilinarea];


for (var i = 0,alen = Areaarr.length i < ALen; i++) {
	Drawarea (areaarr[i],getrandom)/100);


Generates a random positive integer between 1 and N.
function Getrandom (n) {return
	Math.floor (Math.random () *n+1)
}

Demonstrate:

Http://runningls.com/demos/tianditu/index.html?to=loadgx

Note: 1. The boundary value is enlarged to see that there are some places that do not coincide.     The remedial method is to limit the day map bloom level. 2. Do not set the random opacity too high, otherwise the visual effect is not good. The above figure is the maximum opacity 0.5 effect.

There are better suggestions welcome to the exchange of messages.

Reprinted annotated Source: http://blog.csdn.net/liusaint1992/article/details/50531015