Using cripthtml5canvas to drag a map of China in a province

This article describes how cripthtml5canvas can be used to drag provinces to map China, for more information about how to use javascript html5 canvas to implement a map of China in provinces that can be dragged, see the following article.

This article provides an example of how to implement a map of China in the provinces where html5 canvas can be dragged for your reference. The details are as follows:

1. Data Acquisition
The province boundary coordinates are required to draw a map. In theory, you can use Baidu API to obtain data and draw the map each time. To increase the efficiency, you must first obtain all coordinates and store them in the database.
Create a province data array

The Code is as follows:

Var allZoneData = [{'name': 'liaoning province ', 'been': 'yes', 'id': '01'}, {'name': 'Jilin province ', 'been': 'yes', 'id': '02'},…];

Round-Robin the array, request Baidu API to obtain the coordinate data based on the province name, and relax the data to php in ajax mode.

Var myGeo = new BMap. geocoder (); (function () {for (var I = 0; I <allZoneData. length; I ++) {getAllZone (allZoneData [I]. name, allZoneData [I]. been, allZoneData [I]. id) ;}}) (); // name indicates the province name, been indicates whether it has been, and id indicates the unique identifier, cir is the province circle number (a province may contain two closed circles) function getAllZone (name, been, id) {var data, temp; var bdary = new BMap. boundary (); bdary. get (name, function (rs) {var count = rs. boundaries. length; for (var j = 0; j <count; J ++) {var ply = new BMap. polygon (rs. boundaries [j], {strokeWeight: 2, strokeColor: "# ff0000"}); data = ply. getPath (); $. ajax ({url: "addData. php ", type:" POST ", data: {'data': data, 'name': name, 'cir ': j, 'been': been, 'id ': id}, success: function (txt) {console. log (txt) ;}, error: function () {alert ('An error occurred while adding data! ');}});}});}

After php obtains the data, it parses the data and stores the data in the pre-built database.

2. Map painting (base map painting on the mapCanvas layer)
Round the province array, request the province boundary coordinates in ajax mode, and then plot

Var drawMap = function (context, data, l, t) {// context is the layer where the painting is located, l and t are relative positions, and data is the boundary object array if (data. been = 'yes') {context. fillStyle = "green";} else {context. fillStyle = "gray";} context. globalAlpha = 0.8; context. beginPath (); cleft = (data. coordinate [0]. lng-temp_left) * bigger + l; // temp_left and temp_top are map offset positions. ctop = (temp_top-data. coordinate [0]. lat) * bigger + t; // bigger is the magnification of context. moveTo (cleft, ctop); for (var j = 1; j <data. coordinate. length; j ++) {cleft = (data. coordinate [j]. lng-temp_left) * bigger + l; ctop = (temp_top-data. coordinate [j]. lat) * bigger + t; context. lineTo (cleft, ctop);} context. closePath (); context. stroke (); context. fill ();}

3. Draw a mobile line (draw the lines and provinces on the moveMapCanvas layer)
When you drag a province on the map, several lines connecting the moving province and the original province appear.

Var drawLinkLine = function (data, l, t) {// here l and t represent the relative position of movement for (var k = 0; k <data. coordinate. length; k ++) {if (k % 60 = 0) {moveMapContext. beginPath (); // set the line width to lineLength = Math based on the moving distance. sqrt (l * l + t * t)/100; lineLength = lineLength> = 4.5? 4.5: lineLength; moveMapContext. lineWidth = 5-lineLength; moveMapContext. strokeStyle = "rgba (0,120, 60, 0.4)"; cleft = (data. coordinate [k]. lng-temp_left) * bigger; ctop = (temp_top-data. coordinate [k]. lat) * bigger; moveMapContext. moveTo (cleft, ctop); cleft = (data. coordinate [k]. lng-temp_left) * bigger + l; ctop = (temp_top-data. coordinate [k]. lat) * bigger + t; moveMapContext. lineTo (cleft, ctop); moveMapContext. closePath (); moveMapontext. stroke ();}}}

4. Events
Click the event: when you click on the map, you need to determine the Click location, convert the location information to the latitude and longitude, and then obtain the province name through Baidu API Based on the latitude and longitude.

$ ('# EventCanvas '). mousedown (function (ev) {// obtain the coordinates var mouseX, mouseY, And if (ev. layerX | ev. layerX = 0) {mouseX = ev. layerX; mouseY = ev. layerY;} else if (ev. offsetX | ev. offsetX = 0) {mouseX = ev. offsetX; mouseY = ev. offsetY;} // Save the original coordinate value tempX = mouseX; tempY = mouseY; // convert the coordinate to the longitude and latitude mouseX = mouseX/bigger + temp_left; mouseY = temp_top-mouseY/bigger; if (opts. dragAll) {draging = true;} else {moveMapContext. clearRect (0, 0, 1100,630); // obtain the geographic location and the boundary coordinates based on the longitude and latitude, and draw the line myGeo. getLocation (new BMap. point (mouseX, mouseY), function (result) {tempName = ''; draging = true; name = result. addressComponents. province; tempName = name; pubFuns. drawMoveLayerLine (0, 0 );});}});

Move mouse event: obtain data based on the province name you click, and re-paint the province on the mobile layer in real time.

$ ('# EventCanvas '). mousemove (function (ev) {var mouseX, mouseY; if (ev. layerX | ev. layerX = 0) {mouseX = ev. layerX; mouseY = ev. layerY;} else if (ev. offsetX | ev. offsetX = 0) {mouseX = ev. offsetX; mouseY = ev. offsetY;} if (draging) {if (opts. dragAll) {// drag the entire map. There is a problem. The map is too slow to draw mapContext. clearRect (0, 0, 1100,630); for (var I = 0; I <allZoneData. length; I ++) {for (var j = 0; j <allData [allZoneData [I]. name]. length; j ++) {// allData is the variable placed in the memory when the data is read for the first time. It contains all data pubFuns. drawMap (mapContext, allData [allZoneData [I]. name] [j], mouseX-tempX, mouseY-tempY) ;}} else {moveMapContext. clearRect (0, 0, 1100,630); pubFuns. drawMoveLayerLine (mouseX-tempX, mouseY-tempY );}}});

Move the mouse up event: Set dragging to false and clear to move the layer.

$('#eventCanvas').mouseup(function(e){  if(opts.dragAll){   }else{   moveMapContext.clearRect(0, 0, 1100, 630);  }  draging = false; });

Summary: functions and principles are simple, but you are familiar with some canvas attributes and methods. The canvas layer can be overlapped so that different content can be drawn on different layers for easy maintenance and management.

The above is all the content of this article, hoping to help you learn.

For more articles about how to use javascript html5 canvas to implement a map of China in a province that can be dragged, please follow the PHP Chinese network!