Foreword
Yesterday wrote a long blog post I did not save, want to continue to write in today actually gone, mad people, ah this case you have not seen, so re-write today, I switched to the writing HTML format laugh. Ado, we now enter the theme last week, I carefully studied the WebGis display problems openlayers-based colleagues to achieve a slight click event on the map, of course, this week we will be subdivided into points and lines click on the event, if readers are interested can study his area click event, saying that the idea of three-dimensional white is our junior high school, or readers can also find me in private exchanges.
Logical Thought
(Point) in dealing with these click event, I suddenly thought of a very common idea is that I'll get the coordinates of the screen by clicking and then convert into latitude and longitude coordinates on the screen corresponding to the map, and then go inside the database to get the latitude and longitude one by one match, and finally found the data from this point I will give this information to the output point, if I had not found this point to say that I did not click on this point. But it is noteworthy point is that we have a map on the screen is very small, there is a click of error, click the error is what we click on a point on the map we feel the naked eye is clicked point, but the fact that point we click coordinates and the coordinates of the point on the map that there are some errors, so I click on the event in order to achieve a point on the eye, I'm looking for a database when given a default error range of our naked eye, that is I'm not really in the data to investigate this point, but the database query point in the distance to my shop, as long as the distance is less than the specified error value me, I will default to these two points are the same point, this is my point of realization of ideas; so the question is if I click on the map when there were two points away with me at this point in my error range, the answer is sure, then there the reader will ask this how to do it. Do not worry I have a solution. In the case of more than two to take us to the minimum distance that a recently our default choice from the point of
(Line) finished with Nature is a line, and in dealing with the line I thought the beginning was to take the point of view to compare, if it is a unified point of view on that we click on a point on this line above, if not a unified point of view on not in this line, then I implemented this approach, of course, this is also the presence of errors, I can specify a good line after the error, but the performance is not good, there is no effective method in the distance, as if the words we use angle angle based on the size of the different levels of error, that error angle itself, coupled with our naked eye so that the equivalent error amplified error, so in the end I gave up in the project point of view of method, then I change an idea, I can find a straight line from point to, ah, so I would question the success of the conversion problems from the point of view became above it, and we will use high school point to the straight line distance formula, but two points determine the equation of the line, we will also use the last sorted out is the following code to point to the distance the ball straight, got away The process will return to our point above, we simply specify the error range on it.
(Summary) theory it is so much, it is estimated some students have begun to worry, and how has no code ah, personally feel! Give a man a fish than giving the fish. So I was nagging for a long time on it, as long as you understand my ideas, the following code just to have junior high school level will be able to understand the.
/ Continued /
code implementation
1, we registered on the map map click event, the only difference is that we are here to distinguish between self-dotted line
map.events.register ( "the Click", map, function (E) {
// write the click event
}
2, thereby obtaining the screen coordinates of the geographical coordinates of the steering
var lonlat = map.getLonLatFromPixel (e.xy);
. 3, and the existing data by geographic coordinates to match query, where said existing data in said database already exists a point and the data lines, writing I js simulate what databases (data is the data in the data)
IF (data.length>. 1) {
var getDis = min (data [0] .x, data [0] .y, data [. 1] .x, Data [. 1] .y, lonlat.lon, lonlat.lat);
var index = 0;
for (var I = 0; I <data.length; I ++) {
IF (I <data.length -1) {
var FX = Data [I] .x;
var FY = Data [I] .y;
var Data TX = [I +. 1] .x;
var Data TY = [I +. 1] .y;
}
var = getDis DIS (FX, FY, TX, TY, lonlat.lon, lonlat.lat);
IF (DIS <min) {
min = DIS;
index = I;
}
}
var WC = judgediswc (map.getZoom ());
if (wc> = min) {
//在误差范围内，可以认为是同一线
var lineName = data[index].site_name+">"+data[index+1].site_name;
//alert(lineName);
$("#qds").val(lineName);
}else{
searRailLine(lonlat.lon, lonlat.lat);
}
}else{
searRailLine(lonlat.lon, lonlat.lat);
}4, getDis and judgediswc there searRailLine these methods mentioned here are to write their own, and their role is to calculate the distance to the point of a straight line, straight line from the point to compare and error to find the real line database method. These three methods were explained below
4-1, obtained from the point to the line, this is what we used in middle and high school often point to the straight line distance formula, push yourself a little to be able to understand it, this is not what technology content, only do not take the wrong coordinates of the location, it can, the return of dis is the distance we need. The algorithm I have a good package in the data, the question will come in the end I'll post.
getDis function (FX, FY, TX, TY, LON, LAT) {
var * DIS = 637,800.138 (
the Math.abs (
(
(TY - FY) * LON
) + (
(FX -
TX)
LAT
) + TX FY - TY * FX
)
) / (
Math.pow (
(TY
- FY) * (TY - FY) + (FX -
TX) * (FX -
TX),
0.5
)
);
return DIS;
}
4-2, the size of the error (due to different map zoom level, our errors are also different, in front of this theory I have explained, this is not to say) that returns us to the naked eye can accept a maximum error value
function judgediswc (Level) {
var DIS = 0;
var angle = 0;
IF (Level == 15) {
DIS = 12 is;
angle = 42 is;
} the else IF (Level == 14) {
DIS = 16;
angle = 94 ;
} the else IF (Level 13 is ==) {
DIS = 52 is;
angle = 149;
} the else IF (Level 12 is ==) {
DIS = 69;
angle = 403;
} the else IF (Level ==. 11) {
DIS = 178 ;
angle = 479;
} the else IF (Level == 10) {
DIS = 294;
angle = 1093;
} the else IF (Level ==. 9) {
DIS = 682;
angle = 1449;
} the else IF (Level ==. 8) {
DIS = 1488;
angle = 4143;
} the else IF (Level ==. 7) {
= 3521 DIS;
angle = 4617;
} the else IF (Level ==. 6) {
DIS = 6636;
angle = 5265;
} the else IF (Level ==. 5) {
DIS = 7051;
angle = 30217;
} the else IF (Level = . 4 =) {
DIS = 25 763;
angle = 68 126;
} the else IF (Level ==. 3) {
DIS = 60 342;
angle = 120000;
} the else IF (Level == 2) {
DIS = 88 189;
angle = 220000;
} the else IF (Level == 1) {
DIS = 110 189;
angle = 1000000;
}
return angle;
}
4-3, the following method we are really looking to the database, the above method has no practical use, just to cover up for quick readers method (note that I ajax's mass participation is very important)
function searRailLine (LON, LAT) {
var SUS = function (json, Status) {
// Alert ();
var lineName = json.map [0] .station_name + " station" + ">" + json.map [ 0] .next_name + " station";
. $ ( "# QDs") Val (lineName);
siteJson = json.map;
};
AjaxUtil.ajaxCon (path + "/echartMap/selectLineNameStr.json", {LON: LON, LAT: LAT, angle: judgediswc (map.getZoom ())},
SUS);
}
. 5, three specific architecture implementation I do not write, I believe to see the children here are aware of certain three-tier architecture. I directly attached to sql statement (x, y, z are the latitude, longitude, map display level) method returns the minimum distance from the point to the line (there may be many months are in line with the straight line we take the smallest one)
6, some readers may ask, say good point and line on the road, you point it, do not worry ah, I first finished the difficult simple point do I put the sql statement posted returns the value of the distance in the background how you want to do on how to do, then look at your own. Right
Effect of the map
1, highlighted the way the data is simulated js in, click on the highlighted part will simulate my query data in a script
2, click on the highlighted route (Beijing - "Beijing South -" Fengtai) out of the corresponding line information
3. Click on the highlighted area will go to non-query data in the database, the data is true, if you click on a detailed online information will pop up lines
4, if we click on the above points would have been appropriate information point, do not stick out, the highlight of my stay in line a bug is online extension line is considered on-line, in fact, should not be considered online, this is urgent because of the time I did not write at the time, the interested reader to add their own, a reminder of both ends of the middle position to determine the point of it is online, this feature click on the highlighted line of non-sql statement I realized , you can refer to.
to sum up
Openlayers also studied for two weeks, learned a lot these two weeks. Learn certain things from the bottom to learn, you can learn the real thing. Several basic functions openlayers I have achieved (dotted line map display + click event + anchor + + positioning line centered dot +-hand display), and a number of other real-time location with the location changes and changes in the function not to achieve, because it is two weeks, so it was, take a lot of detours between, so Bowen issued WebGis new hope to learn a little help students
# Join team
Micro-channel public number
