CN108573008A - Massive point methods of exhibiting and device in a kind of electronic map - Google Patents

Massive point methods of exhibiting and device in a kind of electronic map Download PDF

Info

Publication number
CN108573008A
CN108573008A CN201710453167.7A CN201710453167A CN108573008A CN 108573008 A CN108573008 A CN 108573008A CN 201710453167 A CN201710453167 A CN 201710453167A CN 108573008 A CN108573008 A CN 108573008A
Authority
CN
China
Prior art keywords
point
interest
target
document
coordinate
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201710453167.7A
Other languages
Chinese (zh)
Other versions
CN108573008B (en
Inventor
李传庆
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Kingsoft Cloud Network Technology Co Ltd
Beijing Kingsoft Cloud Technology Co Ltd
Original Assignee
Beijing Kingsoft Cloud Network Technology Co Ltd
Beijing Kingsoft Cloud Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Kingsoft Cloud Network Technology Co Ltd, Beijing Kingsoft Cloud Technology Co Ltd filed Critical Beijing Kingsoft Cloud Network Technology Co Ltd
Priority to CN201710453167.7A priority Critical patent/CN108573008B/en
Publication of CN108573008A publication Critical patent/CN108573008A/en
Application granted granted Critical
Publication of CN108573008B publication Critical patent/CN108573008B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Abstract

An embodiment of the present invention provides the massive point methods of exhibiting and device in a kind of electronic map.This method includes:Receive the point data of each point of interest in target massive point, wherein point data include at least latitude and longitude information;According to the latitude and longitude information of each point of interest in target massive point, the destination document coordinate in target webpage document of each point of interest belonging to electronic map is obtained;The first size and the first document coordinate of the Canvas elements being pre-created are adjusted, so that the map cases of Canvas elements and electronic map overlap;Using Canvas elements, according to the destination document coordinate of each point of interest, each point of interest in target massive point is drawn in the affiliated figure layer of Canvas elements, to be shown as showing target massive point in electronic map.By the technical solution, all points of interest of interest in massive point can be shown, and improve the performance of browser.

Description

Massive point methods of exhibiting and device in a kind of electronic map
Technical field
The present invention relates to Internet technical fields, more particularly to the massive point methods of exhibiting and dress in a kind of electronic map It sets.
Background technology
Currently, WebGIS (network geographic information system) is widely used, and has almost been dabbled including communications and transportation, area Domain planning, military skill detects, all spectra including trade financing, electric power water conservancy etc.;And its application mode is also varied, including Geo-location, route planning, position enquiring, outdoor scene displaying, real-time traffic etc..
In certain application scenarios, such as shared bicycle background monitoring system needs to monitor the shared bicycle of magnanimity in real time, So, point of interest made of all shared bicycles are abstract just need to be shown in electronic map;For another example certain LBS (Location Based Service, location based service) system, it needs to show that regional all base stations are abstract in electronic map Made of point of interest.In consideration of it, in these similar application scenarios, generally require to show on the electronic map it is hundreds and thousands of, The even point of interest of ranks up to ten thousand;Therein, it can be seen that according to application scenarios difference, it is institute to need the point of interest shown corresponding The physical object of at least one type of concern, rather than refer to any physical object that can be abstracted as a little.It is traditional based on DIV+CSS (DIVision, the position of cascading style table unit and level, Cascading Style Sheets, cascading style Table) or the technologies such as SVG (Scalable Vector Graphics, scalable vector graphics) show interest point in electronic map Mode, using one-to-one rendering:One HTML of an i.e. point of interest rendering (HyperText Markup Language, Hypertext markup language) node, when point of interest scale reaches certain magnitude, this realization method can be because of number of nodes mistake It is more, and so that phenomena such as interim card, delay, even collapse occurs in browser, the serious performance for reducing browser.
For the above situation, in the prior art, generally handled by the method for polymerization.Specifically, according to both Fixed strategy, after electronic map zooms to certain rank, the point of interest in preset range can aggregate into a point, and when amplification When electronic map, this congruent point can then be further decomposed into several specific points of interest or sub- congruent point.
But it should in this way, after the very close point of interest of geographic distance in massive point aggregates into a point, even if will Electronic map is amplified to maximum level, these points of interest may be still aggregated to together, can not resolve into single point of interest so that User can not be concerned about specific single point of interest;For example, in the application scenarios of shared bicycle background monitoring system, often One bicycle all corresponds to a point of interest in electronic map, more when having if being shown using existing polymerization It is the point of a polymerization shown in the electronic map of monitoring system when bicycle is parked together, and can not be by these Each very close bicycle of distance all corresponds to point of interest and all shows;But in practical application, bicycle background monitoring system is shared The exactly corresponding point of interest of each bicycle of system concern.In this case, in order to show that all bicycles of interest are i.e. all Point of interest can only use existing one-to-one rendering mode, and one-to-one rendering mode undoubtedly can seriously reduce browser Performance.
As it can be seen that in the prior art or can not show all points of interest of interest in massive point, and to show all Point of interest will seriously reduce the performance of browser, even result in browser collapse.
Invention content
The massive point methods of exhibiting and device of the embodiment of the present invention being designed to provide in a kind of electronic map, with displaying All points of interest of interest in massive point, and improve the performance of browser.Specific technical solution is as follows:
In a first aspect, an embodiment of the present invention provides the massive point methods of exhibiting in a kind of electronic map, the method packet It includes:
Receive the point data of each point of interest in target massive point;Wherein, the point data include at least longitude and latitude Information;
According to the latitude and longitude information of each point of interest in the target massive point, each point of interest is obtained in electronic map institute Destination document coordinate in the target webpage document of category;
The first size and the first document coordinate for adjusting the Canvas elements being pre-created, so that the Canvas elements It is overlapped with the map cases of the electronic map;Wherein, the affiliated figure layer of Canvas elements is schemed belonging to the electronic map On layer, and the Canvas elements are transparent;
Using the Canvas elements, according to the destination document coordinate of each point of interest, in the Canvas elements Each point of interest in the target massive point is drawn in affiliated figure layer, to be shown as in the electronic map described in displaying Target massive point.
Optionally, the step of first size and the first document coordinate for adjusting the Canvas elements being pre-created, packet It includes:
Obtain the second size and the second document coordinate of the map cases of the electronic map;
It sets the size attribute value for the Canvas elements being pre-created to second size, and adjusts the Canvas The coordinate property value of element, so that the first document coordinate of the Canvas elements is identical as the second document coordinate.
Optionally, after monitoring the electronic map transformation event, the method further includes:
According to the latitude and longitude information of each point of interest in the target massive point, each point of interest is obtained in the target network Current document coordinate in page document;
Using the Canvas elements, according to the current document coordinate of each point of interest, in the Canvas elements Each point of interest in the target massive point is repainted in affiliated figure layer.
Optionally, the transformation event is translation event, drag events or scaling event;
When the transformation event is translation event or drag events, described in the affiliated figure layer of Canvas elements Before the step of repainting each point of interest in the target massive point, further include:
Obtain the third document coordinate of the map cases;
The the first document coordinate for adjusting the Canvas elements is the third document coordinate.
Optionally, the latitude and longitude information according to each point of interest in the target massive point, obtains each point of interest The step of destination document coordinate in target webpage document belonging to electronic map, including:
By the latitude and longitude information of each point of interest in the target massive point, it is converted into map window coordinate;
The 4th document obtained in target webpage document of the map cases of electronic map belonging to the electronic map is sat Mark;
By the map window coordinate of each point of interest respectively with the 4th document coordinate and, be determined as each point of interest Destination document coordinate in the target webpage document.
Optionally, after in the reception target massive point the step of point data of each point of interest, the method Further include:
Judge whether the latitude and longitude information of each point of interest in the target massive point meets preset data form;
If so, executing the latitude and longitude information according to each point of interest in the target massive point again, obtain each emerging Interest puts the step of destination document coordinate in the target webpage document belonging to electronic map;
If it is not, first converting the data format of the latitude and longitude information of each point of interest in the target massive point, met The latitude and longitude information of the preset data form;The longitude and latitude according to each point of interest in the target massive point is executed again Information, the step of obtaining the destination document coordinate in target webpage document of each point of interest belonging to electronic map.
Optionally, the massive point methods of exhibiting in a kind of electronic map provided in an embodiment of the present invention further includes:
Target DIV element is created in the target webpage document, and the Canvas elements are added to the target DIV In element;When the third size of the target DIV element and the 5th document changes in coordinates, with the third size and after variation Five document coordinates update the first size and the first document coordinate of the Canvas elements respectively;And by the target DIV element Affiliated figure layer is inserted on the affiliated figure layer of the electronic map;
It is described adjust be pre-created Canvas elements first size and the first document coordinate the step of include:
Adjust the third size and the 5th document coordinate of the target DIV element.
Optionally, the target DIV element and the equal carry of Canvas elements are in the corresponding map of the electronic map On object.
Optionally, the massive point methods of exhibiting in a kind of electronic map provided in an embodiment of the present invention further includes:
When monitoring location triggered instruction, the point data of the corresponding target point of interest of storage trigger position;Wherein, institute Rheme sets triggering command and shows that the trigger position is located at comprising the specified region including target point of interest;
When monitoring object run instruction, the point data of the stored target point of interest are extracted, and to described The point data of target point of interest execute the object run and instruct corresponding operation.
Second aspect, an embodiment of the present invention provides the massive points in a kind of electronic map to show device, described device packet It includes:
Receiving module, the point data for receiving each point of interest in target massive point;Wherein, the point data are extremely Include latitude and longitude information less;
First obtains module, for the latitude and longitude information according to each point of interest in the target massive point, obtains each Destination document coordinate in target webpage document of the point of interest belonging to electronic map;
The first adjustment module, the first size for adjusting the Canvas elements being pre-created and the first document coordinate, with So that the map cases of the Canvas elements and the electronic map overlap;Wherein, the affiliated figure layer of Canvas elements exists On the affiliated figure layer of electronic map, and the Canvas elements are transparent;
First drafting module, for utilizing the Canvas elements, according to the destination document coordinate of each point of interest, Each point of interest in drawing the target massive point in the affiliated figure layer of Canvas elements, to be shown as in the electricity The target massive point is shown in sub- map.
Optionally, the first adjustment module includes:
Map cases acquisition of information submodule, the second size and second of the map cases for obtaining the electronic map Document coordinate;
Submodule is adjusted, the size attribute value of the Canvas elements for will be pre-created is set as second size; And the coordinate property value of the Canvas elements is adjusted, so that the first document coordinate and described second of the Canvas elements Document coordinate is identical.
Optionally, the massive point in a kind of electronic map provided in an embodiment of the present invention shows device, further includes:
Second obtains module, for after monitoring the electronic map transformation event, according in the target massive point The latitude and longitude information of each point of interest obtains current document coordinate of each point of interest in the target webpage document;
Second drafting module, for utilizing the Canvas elements, according to the current document coordinate of each point of interest, Each point of interest in repainting the target massive point in the affiliated figure layer of Canvas elements.
Optionally, the transformation event is translation event, drag events or scaling event;
When the transformation event is translation event or drag events, further include:
Acquisition module, it is described for being repainted in the affiliated figure layer of Canvas elements in second drafting module Before the step of each point of interest in target massive point, the third document coordinate of the map cases is obtained;
Second adjustment module, the first document coordinate for adjusting the Canvas elements are the third document coordinate.
Optionally, the first acquisition module includes:
Transform subblock, for by the latitude and longitude information of each point of interest in the target massive point, being converted into map window Mouth coordinate;
Acquisition submodule, for obtaining target webpage document of the map cases of electronic map belonging to the electronic map In the 4th document coordinate;
Determination sub-module, for by the map window coordinate of each point of interest respectively with the 4th document coordinate and, It is determined as destination document coordinate of each point of interest in the target webpage document.
Optionally, the massive point in a kind of electronic map provided in an embodiment of the present invention shows device, further includes:
Judgment module is used for the step of the receiving module receives the point data of each point of interest in target massive point Later, judge whether the latitude and longitude information of each point of interest in the target massive point meets preset data form;It is pre- meeting If when data format, triggering described first obtains module;When not meeting preset data form, conversion module is triggered;
The conversion module, the data lattice for first converting the latitude and longitude information of each point of interest in the target massive point Formula obtains the latitude and longitude information for meeting the preset data form, then triggers described first and obtain module.
Optionally, the massive point in a kind of electronic map provided in an embodiment of the present invention shows device, further includes:
Third adjusts module, for creating target DIV element in the target webpage document, by the Canvas elements It is added in the target DIV element;When the third size of the target DIV element and the 5th document changes in coordinates, to become Third size and the 5th document coordinate after change update the first size and the first document coordinate of the Canvas elements respectively;And The affiliated figure layer of target DIV element is inserted on the affiliated figure layer of the electronic map;
The first adjustment module, is specifically used for:
Adjust the third size and the 5th document coordinate of the target DIV element.
Optionally, the target DIV element and the equal carry of Canvas elements are in the corresponding map of the electronic map On object.
Optionally, the massive point in a kind of electronic map provided in an embodiment of the present invention shows device, further includes:
Memory module, for when monitoring location triggered instruction, storing the point of the corresponding target point of interest of trigger position Position data;Wherein, the location triggered instruction shows that the trigger position is located at comprising the specified region including target point of interest;
Extraction module, for when monitoring object run instruction, extracting the point of the stored target point of interest Data, and the object run is executed to the point data of the target point of interest and instructs corresponding operation.
In massive point methods of exhibiting in a kind of electronic map provided in an embodiment of the present invention, target massive point is received first In each point of interest point data, including through dimensional information etc.;Then, according to the longitude and latitude of each point of interest in target massive point Information is spent, the destination document coordinate in target webpage document of each point of interest belonging to electronic map is obtained;It adjusts again in advance The first size of the Canvas elements of establishment and the first document coordinate, so that the map of Canvas elements and the electronic map holds Think highly of conjunction;Finally, using Canvas elements, according to the destination document coordinate of each point of interest, in the affiliated figure layer of Canvas elements The upper each point of interest drawn in the target massive point, to be shown as showing target massive point in the electronic map.Its In, the affiliated figure layer of Canvas elements is on the affiliated figure layer of the electronic map, and Canvas elements are transparent.
It can be seen that in the massive point methods of exhibiting in electronic map provided in an embodiment of the present invention, by being interested in Point all concentrates on a Canvas element, i.e., no matter shows how many point of interest, only needs a Canvas node element, greatly Amount reduces the usage quantity of node;Therefore, using the massive point methods of exhibiting in electronic map provided in an embodiment of the present invention, Point of interest all in target massive point can either be shown, will not occur seriously reducing browser since number of nodes is excessive The phenomenon that performance, in the case where meeting all points of interest of displaying, also very well improves browsing compared with prior art The performance of device.Further, since the size and document coordinate of Canvas elements are consistent with map cases, and figure belonging to Canvas elements Layer is on the affiliated figure layer of electronic map, it is ensured that Canvas elements completely cover on electronic map, therefore, are utilizing It is true in the point and electronic map of each point of interest shown when Canvas elements newly-increased HTML5 show massive point Point is visually consistent.
Description of the drawings
In order to more clearly explain the embodiment of the invention or the technical proposal in the existing technology, to embodiment or will show below There is attached drawing needed in technology description to be briefly described, it should be apparent that, the accompanying drawings in the following description is only this Some embodiments of invention for those of ordinary skill in the art without creative efforts, can be with Obtain other attached drawings according to these attached drawings.
Fig. 1 is a kind of flow diagram of the massive point methods of exhibiting in electronic map provided in an embodiment of the present invention;
Fig. 2 is another flow diagram of the massive point methods of exhibiting in electronic map provided in an embodiment of the present invention;
Fig. 3 is a kind of structural schematic diagram of the massive point displaying device in electronic map provided in an embodiment of the present invention;
Fig. 4 is another structural schematic diagram of the massive point displaying device in electronic map provided in an embodiment of the present invention.
Specific implementation mode
Following will be combined with the drawings in the embodiments of the present invention, and technical solution in the embodiment of the present invention carries out clear, complete Site preparation describes, it is clear that described embodiments are only a part of the embodiments of the present invention, instead of all the embodiments.It is based on Embodiment in the present invention, it is obtained by those of ordinary skill in the art without making creative efforts every other Embodiment shall fall within the protection scope of the present invention.
For all points of interest of interest in displaying massive point, and the performance of browser is improved, the embodiment of the present invention provides Massive point methods of exhibiting and device in a kind of electronic map.
The massive point methods of exhibiting in a kind of electronic map provided in an embodiment of the present invention will be introduced first below.
As shown in Figure 1, an embodiment of the present invention provides the massive point methods of exhibiting in a kind of electronic map, including walk as follows Suddenly:
S101 receives the point data of each point of interest in target massive point.
It should be noted that point of interest is a term in GIS-Geographic Information System, referring to all can be abstracted as a little Physical object, such as retail shop, mailbox, bus station, school etc.;And in embodiments of the present invention, it is to be understood that target sea Point of interest in amount point is corresponding to be the physical object of one or more types of interest, rather than referring to any can be abstracted For the physical object of point.For example, in shared bicycle background monitoring system, the physical object of concern is all shared lists Vehicle, therefore, the point of interest in target massive point are point of interest made of shared bicycle is abstract, rather than school, park or religion Point of interest made of the physical object of the types such as hall is abstract.
Wherein, depending on the corresponding physical object type of point of interest in target massive point is by user demand, for example, it is shared single The types such as vehicle, steel tower and/or hotel.
Specifically, it can be connect by the JavaScript interface to receiving point position data of calling electronic map object Receive the point data of each point of interest in target massive point.And point data then include at least latitude and longitude information, wherein longitude and latitude For being collectively referred to as longitude and latitude;Certainly, it is to show that target massive point, point data can also include preferably in electronic map The personalized attribute information, such as the shape of point of interest, size, color and/or transparency etc. of point of interest, does not limit herein It is fixed.
It should be noted that there are many data formats, such as degree, degree-point or degree-point-second for longitude and latitude, if in subsequent step In be required for being handled based on certain specific data format, then need to carry out format conversion to the data that receive, if There is no specific demand to data format in subsequent step, which kind of data format can be carried out handling, then no longer need data The operation of format conversion.For example, in this implementation, the format that " degree " is all based in subsequent step is handled, then when connecing When the data format of the latitude and longitude information received is not " degree ", just need to carry out format conversion.Therefore, in the embodiment of the present invention In a kind of realization method, the point data of each point of interest in receiving target massive point the step of after, can also include:
Judge whether the latitude and longitude information of each point of interest in target massive point meets preset data form;
If so, executing S102 again;
If it is not, in first switch target massive point the latitude and longitude information of each point of interest data format, acquisition meets default The latitude and longitude information of data format;S102 is executed again.
It is understood that when point data include the personalized attribute information of point of interest, these attribute informations It can be pre-processed, after the data met the requirements, then execute subsequent step.Such as the interest point color information received For RGB color value:(255,182,193) indicate LightPink, and what is used in subsequent processes is hexadecimal color Code, then, it is necessary to RGB color value is converted into hexadecimal color code:#FFB6C1.
S102 obtains each point of interest in electronic map according to the latitude and longitude information of each point of interest in target massive point Destination document coordinate in affiliated target webpage document.
Wherein, document coordinate is the coordinate shift amount in the upper left corner relative to the target webpage document belonging to electronic map, I.e. in the coordinate using the upper left corner of target webpage document as origin (0,0), to the right and in the downward respectively coordinate system of positive direction.
In a kind of specific implementation of the embodiment of the present invention, the warp of each point of interest in the massive point according to target Latitude information, the step of obtaining the destination document coordinate in target webpage document of each point of interest belonging to electronic map, can To include:
By the latitude and longitude information of each point of interest in target massive point, it is converted into map window coordinate;
Obtain the 4th document coordinate in target webpage document of the map cases of electronic map belonging to electronic map;
By the map window coordinate of each point of interest respectively with the 4th document coordinate and, be determined as each point of interest in mesh Mark the destination document coordinate in web document.
Wherein, map window coordinate is the coordinate shift amount relative to the map cases upper left corner, i.e., with map cases The upper left corner be origin (0,0), to the right and downwards be respectively positive direction coordinate system in coordinate;And map cases are target network Include the element of electronic map, generally DIV element in page document, as container, electricity is shown in target webpage document Sub- map.
In addition, the 4th document coordinate is the document seat in target webpage document of the map cases belonging to electronic map Mark, destination document coordinate is document coordinate of each point of interest in target webpage document, and " the 4th ", " target " are only used for area Divide other document coordinates, does not have restriction effect.
It should be noted that can be corresponding by calling WebGIS (network geographic information system) to provide first The latitude and longitude information of each point of interest in target massive point is converted into map window coordinate, then needle by JavaScript interface To each point of interest, the document coordinate of map window coordinate and map cases and, as the point of interest target webpage text Destination document coordinate in shelves.For example, the latitude and longitude information of point of interest A is (106.72,26.57), is converted into map window Mouthful coordinate is (5,10), and the document coordinate of map cases is (20,35), then the document coordinate of point of interest A be (25, 45).Wherein, it is the prior art that how latitude and longitude information is converted into map window coordinate by corresponding JavaScript interface, Details are not described herein again.
S103 adjusts the first size and the first document coordinate of the Canvas elements being pre-created, so that Canvas is first The map cases of element and the electronic map overlap.
In practical application, a Canvas element can be created in advance in target webpage document, to draw target sea Each point of interest in amount point.Canvas elements are the elements increased newly in HTML 5, are designed for client vector graphics , it is equivalent to placed one piece of painting canvas on the page in one Canvas element of page setup, figure can be carried out wherein Description, after adding Canvas elements in the page, so that it may, can be with square freely to control it by Javascript Picture, lines, word and animation are added in shape region, can also draw or draw wherein animation.
Canvas elements itself are without graphic capability, and only image container, is that the api interface that one is drawn is presented to visitor The JavaScript at family end is so that script can be all plotted in the thing drawn is wanted on this block painting canvas.Specifically, passing through script Come method, the setting Canvas attributes of an element etc. for calling Canvas elements, to complete actual drafting task.
It is emphasized that the affiliated figure layer of Canvas elements on the affiliated figure layer of electronic map, that is, is covered in electronically On figure, and Canvas elements are transparent, ensure other than the point of interest of drafting, visually, will not cover on electronic map Other figures.Also, for so that each point of interest on Canvas elements in the massive point drawn with it is true on electronic map Real point position is consistent, and before drafting, need to first adjust the first size and the first document coordinate of Canvas elements, so that The map cases of Canvas elements and the electronic map are completely superposed.Wherein, " first size " and " the first document coordinate " difference Indicate the size and document coordinate of Canvas elements, " first " only to be distinguished with other sizes and document coordinate, does not have Restriction effect.
Specifically, the step of first size and the first document coordinate for adjusting the Canvas elements being pre-created, can To include:
Obtain the second size and the second document coordinate of the map cases of the electronic map;
Set the size attribute value for the Canvas elements being pre-created to the second size;And adjust the seat of Canvas elements Attribute value is marked, so that the first document coordinate of Canvas elements is identical as the second document coordinate.
Wherein, the second size and the second document coordinate are respectively that the size of the map cases of the electronic map and document are sat Mark, " second " only to be distinguished with other sizes and document coordinate, do not have restriction effect.
It should be noted that the size attribute of Canvas elements includes width and height, wherein width is indicated The width of Canvas elements, height indicate the height of Canvas elements, the of the map cases for getting the electronic map After two sizes, directly it can set the size attribute value of Canvas elements to the second size.For example, if the electronic map The sizes of map cases be:The size attribute value of Canvas elements can be directly respectively set to by wide 50px, high 50px {width:50px;height:50px;}.
It is understood that the coordinate attributes (left, top) of Canvas elements, indicate Canvas elements relative to father's member The coordinate shift amount in the plain upper left corner, wherein left indicates coordinate shift of the Canvas elements relative to father's element upper left corner to the right Amount, top indicate the Canvas elements coordinate shift amount downward relative to father's element upper left corner.Therefore, if the father of Canvas elements Element is target webpage document, by the definition of document coordinate it is found that the document that the value of (left, top) is Canvas elements is sat Mark;At this point, to make the first document coordinate of Canvas elements identical as the second document coordinate, it can be directly by Canvas elements Coordinate attributes (left, top) value be set as the electronic map map cases the second document coordinate.For example, if The document coordinate of the map cases of the electronic map is:100px, 150px, then, it can be directly by the seat of Canvas elements Mark attribute value is respectively set to { left:100px;top:150px;}.
It, can be by combining Canvas if father's element of Canvas elements is the other elements in target webpage document The document coordinate of father's element of element adjusts the coordinate of opposite father's element of Canvas elements, to reach adjustment Canvas elements Document coordinate purpose;It is understood that Canvas elements are with respect to the coordinate of father's element and the document coordinate of father's element With as therefore the document coordinate of Canvas elements specifically, can obtain the text of the map cases of the electronic map first The difference of the document coordinate of shelves coordinate and Canvas element father's elements, then the coordinate tune by Canvas elements relative to father's element Whole is the difference.For example, if the document coordinate of the map cases of the electronic map is:50px, 60px, Canvas elements Father's element is element A, and the document coordinate of A is:30px, 30px, it is possible to first obtain map cases document coordinate with The difference of the document coordinate of A:Then the coordinate property value of Canvas elements is respectively set to { left by 20px, 30px:20px; top:30px;.
Certainly, on how to adjust the first size and the first document coordinate of the Canvas elements being pre-created, so that The map cases of Canvas elements and the electronic map overlap, and can also use other modes in the prior art, not make herein It limits.
It is understood that DIV+CSS Technical comparings are ripe at this stage, can be controlled for greater flexibility using this technology The attribute of each element in DIV element, including size and document coordinate etc., and DIV+CSS technologies are more friendly to browser.Cause This, the massive point methods of exhibiting in a kind of electronic map provided in an embodiment of the present invention can also include:
Target DIV element is created in target webpage document, and Canvas elements are added in target DIV element;Work as mesh When marking the third size and the 5th document changes in coordinates of DIV element, with the third size and the 5th document coordinate difference after variation Update the first size and the first document coordinate of Canvas elements;And the affiliated figure layer of target DIV element is inserted into this electronically On figure layer belonging to figure.
Wherein, " third size ", " the 5th document coordinate " indicate the size and document coordinate of target DIV element respectively, " the Three ", " the 5th " does not have restriction effect only to be distinguished respectively with other sizes and document coordinate.
It should be noted that a target DIV element can be created in target webpage document, as massive point displaying Bottom skeleton, and Canvas elements are added in target DIV element so that target DIV element becomes the father of Canvas elements Element;Again when the third size of target DIV element and the 5th document changes in coordinates, with the third size and the 5th text after variation Shelves coordinate updates the first size and the first document coordinate of Canvas elements respectively, is allowed to the third ruler with target DIV element Very little and the 5th document changes in coordinates and change, and keep identical.
Specifically, the value of the size attribute (width, height) of Canvas elements can be respectively set to { width: 100%;height:100%;, indicate that the width of Canvas elements, height are respectively target DIV element width and height 100%;The value of coordinate attributes (left, top) is respectively set to { left:0;top:0;, indicate Canvas elements relative to mesh The coordinate for marking DIV element is (0,0), i.e. the document coordinate of Canvas elements is identical as the document coordinate of target DIV element;Such as This, when the third size of target DIV element and/or the 5th document coordinate change, the first size of Canvas elements and/ Or first document coordinate can also be updated therewith, and protected with the third size of target DIV element and/or the 5th document coordinate It holds identical.
In this way, by adjusting target DIV element, you can achieve the purpose that adjust Canvas elements.Correspondingly, the adjustment The step of first size and the first document coordinate of the Canvas elements being pre-created, may include:Adjust target DIV element Third size and the 5th document coordinate.
It is understood that Canvas elements are identical as the affiliated figure layer of DIV element, therefore, electronic map can be passed through The affiliated figure layer of target DIV element is inserted on the affiliated figure layer of the electronic map by figure layer Layer interfaces, so that The affiliated figure layer of Canvas elements is on the affiliated figure layer of the electronic map.
In addition, in a kind of specific implementation of the embodiment of the present invention, target DIV element and Canvas elements can be with Carry on the corresponding map object of the electronic map, in case need adjust target DIV element attribute, or use It is multiplexed when Canvas elements.Also, so directly the point data received in S101 can be tied on map object, that is, deposited It stores up in the corresponding caching of the electronic map, is stored without separately setting global variable, it is excessive to also avoid variable, is easy The phenomenon that error.
S104, using Canvas elements, according to the destination document coordinate of each point of interest, in the affiliated figure layer of Canvas elements The upper each point of interest drawn in target massive point, to be shown as showing target massive point in the electronic map.
It should be noted that in the size and document coordinate of adjustment Canvas elements so that Canvas elements and the electronics After map overlaps, Canvas elements can be utilized, according to the destination document coordinate of each point of interest, belonging to Canvas elements Each point of interest in target massive point is drawn in figure layer, to visually, be shown as showing target in the electronic map Massive point.Wherein, on how to utilize Canvas elements, and according to document coordinate, carry out point of interest is plotted as the prior art, Details are not described herein again.
In practical application, for each point of interest in target massive point, the electronics can also be realized according to specific requirements Interaction between map and user, specifically, the massive point methods of exhibiting in a kind of electronic map provided in an embodiment of the present invention, also May include:
When monitoring location triggered instruction, the point data of the corresponding target point of interest of storage trigger position;Wherein, position It sets triggering command and shows that trigger position is located at comprising the specified region including target point of interest;
When monitoring object run instruction, the point data of target point of interest are extracted, and to the point of target point of interest The corresponding operation of data performance objective operational order.
Wherein, when to show that the client of the electronic map is non-touch panel device, trigger position is generally one Point, specifically, trigger position can be overlapped with target point of interest, and be considered for practicability, and trigger position can also be to include Any position in specified region including target point of interest is not construed as limiting herein depending on actual demand;Work as client When end is touch panel device, trigger position be then generally positioned in comprising target point of interest including specified region in an area Domain.
It should be noted that when to show that the client of the electronic map is non-touch panel device, location triggered refers to Enabling to be:Position or position when mouse down, which are located at, when mouse moves includes the specified area including target point of interest It is triggered when domain;When to show that the client of the electronic map is touch panel device, location triggered instruction can be:Screen What the position of touch was triggered when being located at comprising specified region including target point of interest.Object run instruction can be click event Triggering.Certainly, location triggered instruction and object run instruction can also be triggered by other events, be not construed as limiting herein.
In a kind of specific implementation of the embodiment of the present invention, when showing that the client of the electronic map is non-touch When touching screen equipment, can give target DIV element or the electronic map binding mouse move (MOUSE_MOVE) event, periodically or Whether real-time judge mouse position, which is located at, includes the specified region including target point of interest;If it is, trigger position is touched Send instructions, it is to be understood that the point of interest is target point of interest, the point of the corresponding target point of interest of storage trigger position Data can specifically store point data into design variables;When again monitor the trigger position occur mouse list Event is hit, that is, when triggering object run instruction, extracts the point data of target point of interest, and to the point digit of target point of interest According to the corresponding operation of performance objective operational order.
Wherein it is possible to target DIV element or electronic map binding mouse down (MOUSE_DOWN) event and mouse (MOUSE_UP) event of release, and single-click operation is performed determining mouse by position that the two events occur or is dragged Operation is dragged, specifically, when the position of mouse down is identical as the position that mouse discharges, shows that mouse-click event has occurred, Then trigger object run instruction;Otherwise, show that mouse drag event has occurred.
And object run instructs corresponding operation, can be defined by user by the interface of reserved call back function. For example, user defines the call back function of a display point data, then supervising by the interface of reserved call back function When measuring object run instruction, the point data of target point of interest will be extracted, and send the call back function to, execute and show mesh Mark the operation of the point data of point of interest.Certainly, above-mentioned example is only a specific example, does not have restriction effect.
In another specific implementation of the embodiment of the present invention, when showing that the client of the electronic map is non-touch When touching screen equipment, target DIV element or electronic map binding mouse down event and mouse release event can also be given, mouse is worked as When marking the position pressed and being located at comprising specified region including target point of interest, trigger position triggering command stores trigger position The point data of corresponding target point of interest;When mouse discharges, judge whether that click event has occurred, if it is, triggering Object run instructs, and extracts the point data of target point of interest, and refer to the operation of the point data performance objective of target point of interest Enable corresponding operation.
In another specific implementation of the embodiment of the present invention, when to show the client of the electronic map be touch , can be when the position of screen touch be located at comprising specified region including target point of interest when screen equipment, trigger position triggering Instruction, the point data of the corresponding target point of interest of storage trigger position;And when screen is released, judge whether that list has occurred Event is hit, if it is, triggering object run instruction, extracts the point data of target point of interest, and to the point of target point of interest The corresponding operation of position data performance objective operational order.Wherein, the click event judgment method of touch panel device is the prior art, Details are not described herein again.
It should be noted that DOM (Document Object Model, DOM Document Object Model), it, which is defined, accesses HTML With the standard of XML document label, by DOM developer can be any add, delete and change the page certain a part.It is existing Have in the electronic map of technology, typically the elements such as Div, Span is utilized to create DOM node, CSS technologies is recycled to carry out pattern Processing recycles javascript to carry out event interaction.Wherein, Div elements are block elements, and a Div element corresponds to a DOM Node, Span elements are row element, one DOM node of a Span element.A DOM node may be implemented one in this way Point of interest can correspond to thousands of DOM node when the quantity of point of interest reaches thousands of ranks, in order to smoothly show Each point of interest, it is necessary to which this thousands of DOM node is rendered.For example, creating 5,000 using 5,000 Div elements A rectangular patterns may be implemented in a DOM node, each Div elements, can show 5,000 by rendering this 5,000 DOM nodes The point of interest of a rectangle.
And in the embodiment of the present invention, DOM node is created using Canvas elements, a Canvas element corresponds to a DOM Node can draw multiple points of interest on a Canvas element.For example, creating a DOM using a Canvas element Node can draw 5,000 rectangular patterns, it is only necessary to which rendering this DOM node can on this Canvas element Show the point of interest of this 5,000 rectangles.
In massive point methods of exhibiting in the electronic map that inventive embodiments shown in Fig. 1 provide, target magnanimity can be shown All points of interest in point, and all concentrate on a Canvas element, i.e., no matter how many point of interest shown, only needs one Canvas node elements largely reduce the usage quantity of node, therefore, using it is provided in an embodiment of the present invention electronically Massive point methods of exhibiting in figure, can either show point of interest all in target massive point, will not occur due to node The phenomenon that number excessively seriously reduces browser performance.Compared with prior art, the case where showing all points of interest is being met Under, also very well improve the performance of browser.Further, since the size and document coordinate and map cases of Canvas elements Unanimously, and the affiliated figure layer of Canvas elements is on the affiliated figure layer of electronic map, it is ensured that Canvas elements completely cover electricity On sub- map, therefore, when the Canvas elements increased newly using HTML5 show massive point, the point of each point of interest shown True point on position and electronic map is visually consistent.
Further, on the basis of inventive embodiments shown in Fig. 1, in a kind of electronic map provided in an embodiment of the present invention Massive point methods of exhibiting can also include after monitoring electronic map transformation event:
S105 obtains each point of interest in target webpage according to the latitude and longitude information of each point of interest in target massive point Current document coordinate in document.
It is understood that after the transformation event such as translation, dragging or scaling has occurred in the electronic map, target massive point In each point of interest respective change can also occur with respect to the map window coordinate of map cases so that corresponding document sit Mark changes, therefore, for make Canvas draw target massive point visually always with it is true in the electronic map Being consistent property of point, can be after monitoring electronic map transformation event, according to the warp of each point of interest in target massive point Latitude information obtains current document coordinate of each point of interest in target webpage document, to repaint mesh using Canvas Mark massive point.Wherein, it is had been introduced on how to obtain the S102 of the document coordinate of point of interest in the embodiment shown in fig. 1, this Place repeats no more.
It should be noted that electronic map transformation event can be translation event, drag events or scaling event.In this hair In a kind of specific implementation of bright embodiment, electronic map binding map translation (MOVE_END) event, map can be given (DRAG_END) event of dragging and/or map scale event, when translation, dragging or scaling event has occurred in the electronic map Afterwards, the document coordinate of each point of interest in target massive point is just reacquired.
Wherein, map scaling event can be subdivided into that scaling starts (ZOOM_START) event and scaling terminates (ZOOM_ again END) event, since scaling is a continuous action being exceedingly fast, scaling process can not be processed, and only needle To scaling beginning and end, the two nodes are handled;Visually to reach a good continuity, specifically, when When scaling starts, first Canvas elements can be hidden, at the end of scaling, obtain the text of each point of interest in target massive point Shelves coordinate, repaints target massive point, and show, to realize that scaling synchronizes.And when Canvas elements are included in target DIV When in element, target DIV element is hidden, you can achieve the purpose that hiding Canvas elements.
It is emphasized that when electronic map transformation event be translation event or drag events when, map cases and The size of Canvas elements will remain unchanged, and the document coordinate of Canvas elements then can correspondingly change, therefore, to make Canvas draw target massive point visually with true the being consistent property of point in the electronic map, Canvas member Before repainting each point of interest in target massive point in figure layer belonging to element, can also include:
Obtain the third document coordinate of map cases;
According to third document coordinate, the first document coordinate of Canvas elements is adjusted so that Canvas elements and map hold Think highly of conjunction.
Wherein, third document coordinate is the current document coordinate of the map cases of the electronic map;Before repainting, root According to the current document coordinate of map cases, the document coordinate of Canvas elements is adjusted so that Canvas elements and map cases weight It closes, to be bonded the purpose of map cases with realizing Canvas element dynamics, the target massive point for keeping Canvas to repaint Visually with the consistency of the true point in the electronic map.And it is sat about the document for specifically how adjusting Canvas elements It marks, is had been introduced in the S103 of inventive embodiments shown in Fig. 1, details are not described herein again.
It is emphasized that for further assure that target massive point that Canvas is repainted visually with the electronics The consistency of true point in map can also obtain the current size and document of map cases when repainting every time Coordinate, and the current size that the size for adjusting Canvas elements is map cases, lead to ground to avoid being scaled due to browser The phenomenon that size and document coordinate of figure container change.
S106, using Canvas elements, according to the current document coordinate of each point of interest, in the affiliated figure layer of Canvas elements On repaint each point of interest in target massive point.
It should be noted that in having reacquired target massive point after the current document coordinate of each point of interest, To utilize Canvas elements, each point of interest in target massive point is repainted in the affiliated figure layer of Canvas elements, to Visually, the consistency of true point on point of interest and the electronic map is dynamically kept.
On the basis of inventive embodiments shown in Fig. 1, inventive embodiments shown in Fig. 2 provide in another electronic map Massive point methods of exhibiting, in the embodiment depicted in figure 2, all points of interest all concentrate on a Canvas element, i.e., no matter open up How many point of interest shown, a Canvas node element is only needed, the usage quantity of node is largely reduced, therefore, shown in Fig. 2 Massive point methods of exhibiting in the electronic map that inventive embodiments provide, can either show interest all in target massive point Point the phenomenon that seriously reducing browser performance since number of nodes is excessive will not occurs, compared with prior art, meet In the case of showing all points of interest, the performance of browser is also very well improved.
In addition, in the prior art, when the document coordinate of target massive point changes with the transformation of electronic map, will lead It causes node batch to flow back, to largely consume browser performance, or even can browser be collapsed;And invention shown in Fig. 2 Massive point methods of exhibiting in a kind of electronic map that embodiment provides, due to only using a Canvas node element, There is no the worries of node batch reflux, further improve the performance of browser.
Corresponding to above method embodiment, the present invention provides the massive points in a kind of electronic map to show device, with Fig. 1 Shown method flow is corresponding, and referring to Fig. 3, described device includes:
Receiving module 301, the point data for receiving each point of interest in target massive point;Wherein, described digit According to including at least latitude and longitude information;
First obtains module 302, for the latitude and longitude information according to each point of interest in the target massive point, obtains every Destination document coordinate in target webpage document of one point of interest belonging to electronic map;
The first adjustment module 303, the first size for adjusting the Canvas elements being pre-created and the first document coordinate, So that the map cases of the Canvas elements and the electronic map overlap;Wherein, the affiliated figure layer of Canvas elements On the affiliated figure layer of the electronic map, and the Canvas elements are transparent;
First drafting module 304 is sat for utilizing the Canvas elements according to the destination document of each point of interest Mark, each point of interest in drawing the target massive point in the affiliated figure layer of Canvas elements, to be shown as in institute It states and shows the target massive point in electronic map.
As can be seen that the massive point in the electronic map that inventive embodiments provide shown in Fig. 3 is shown in device, due to all Point of interest all concentrates on a Canvas element, i.e., no matter how many point of interest is shown, only one Canvas node element of need is Can, the usage quantity of node, therefore the massive point in the electronic map of the offer of inventive embodiments shown in application drawing 3 are largely provided It shows device, point of interest all in target massive point can either be shown, will not be occurred since number of nodes is excessive and serious The phenomenon that reducing browser performance, compared with prior art, in the case where meeting all points of interest of displaying, also very well Improve the performance of browser.Further, since the size and document coordinate of Canvas elements are consistent with map cases, and Canvas The affiliated figure layer of element is on the affiliated figure layer of electronic map, it is ensured that and Canvas elements completely cover on electronic map, therefore, When the Canvas elements increased newly using HTML5 show massive point, in the point and electronic map of each point of interest shown True point be visually consistent.
Optionally, the first adjustment module 303 includes:
Map cases acquisition of information submodule (not shown), of map cases for obtaining the electronic map Two sizes and the second document coordinate;
Submodule (not shown) is adjusted, the size attribute value of the Canvas elements for will be pre-created is set as institute The second size is stated, and adjusts the coordinate property value of the Canvas elements, so that the first document of the Canvas elements is sat Mark is identical as the second document coordinate.
Optionally, the first acquisition module 302 includes:
Transform subblock (not shown) is used for the latitude and longitude information of each point of interest in the target massive point, It is converted into map window coordinate;
Acquisition submodule (not shown), for obtaining the map cases of electronic map belonging to the electronic map The 4th document coordinate in target webpage document;
Determination sub-module (not shown), for the map window coordinate of each point of interest is literary with the described 4th respectively The sum of shelves coordinate, is determined as destination document coordinate of each point of interest in the target webpage document.
Optionally, the massive point in a kind of electronic map provided in an embodiment of the present invention shows device, can also include:
Judgment module (not shown), for each point of interest in receiving target massive point in the receiving module 301 Point data the step of after, judge whether the latitude and longitude information of each point of interest in the target massive point meets present count According to format;When meeting preset data form, triggering described first obtains module 302;When not meeting preset data form, touch Send out conversion module (not shown);
The conversion module, the data lattice for first converting the latitude and longitude information of each point of interest in the target massive point Formula obtains the latitude and longitude information for meeting the preset data form, then triggers described first and obtain module.
Optionally, the massive point in a kind of electronic map provided in an embodiment of the present invention shows device, can also include:
Third adjusts module (not shown), for creating target DIV element in the target webpage document, by institute Canvas elements are stated to be added in the target DIV element;When the third size and the 5th document coordinate of the target DIV element When variation, with after variation third size and the 5th document coordinate update the first sizes and first of the Canvas elements respectively Document coordinate;And the affiliated figure layer of target DIV element is inserted on the affiliated figure layer of the electronic map;
The first adjustment module 303, specifically can be used for:
Adjust the third size and the 5th document coordinate of the target DIV element.
Optionally, the target DIV element and the Canvas elements can carry it is corresponding in the electronic map On map object.
Optionally, the massive point in a kind of electronic map provided in an embodiment of the present invention shows device, can also include:
Memory module (not shown), for when monitoring location triggered instruction, storing the corresponding mesh of trigger position Mark the point data of point of interest;Wherein, location triggered instruction shows that the trigger position is located at and exists comprising target point of interest Interior specified region;
Extraction module (not shown), for when monitoring object run instruction, extracting the stored target The point data of point of interest, and the object run is executed to the point data of the target point of interest and instructs corresponding operation.
Further, on the basis of inventive embodiments shown in Fig. 3, in a kind of electronic map provided in an embodiment of the present invention Massive point show device, it is corresponding with method flow shown in Fig. 2, referring to Fig. 4, can also include:
Second obtains module 305, for after monitoring the electronic map transformation event, according to the target massive point In each point of interest latitude and longitude information, obtain current document coordinate of each point of interest in the target webpage document;
Second drafting module 306 is sat for utilizing the Canvas elements according to the current document of each point of interest Mark, each point of interest in repainting the target massive point in the affiliated figure layer of Canvas elements.
On the basis of inventive embodiments shown in Fig. 3, the sea in a kind of electronic map that inventive embodiments shown in Fig. 4 provide Amount point displaying device, it can be seen that in the embodiment shown in fig. 4, all points of interest all concentrate on a Canvas element, i.e., No matter how many point of interest shown, only needs a Canvas node element, largely reduce the usage quantity of node, therefore, Massive point in the electronic map that inventive embodiments shown in Fig. 4 provide shows device, can either show institute in target massive point The phenomenon that seriously reducing browser performance since number of nodes is excessive will not occur in some points of interest, compared with prior art, In the case where meeting all points of interest of displaying, the performance of browser is also very well improved.
In addition, in the prior art, when the document coordinate of target massive point changes with the transformation of electronic map, will lead It causes node batch to flow back, to largely consume browser performance, or even can browser be collapsed;And invention shown in Fig. 4 Massive point in a kind of electronic map that embodiment provides shows device, due to only using a Canvas node element, There is no the worries of node batch reflux, further improve the performance of browser.
Optionally, the transformation event can be translation event, drag events or scaling event;
When the transformation event is translation event or drag events, can also include:
Acquisition module (not shown), for scheming belonging to the Canvas elements in second drafting module 306 Before the step of repainting each point of interest in the target massive point on layer, the third document of the map cases is obtained Coordinate;
Second adjustment module (not shown), the first document coordinate for adjusting the Canvas elements are described the Three document coordinates.
It should be noted that herein, relational terms such as first and second and the like are used merely to a reality Body or operation are distinguished with another entity or operation, are deposited without necessarily requiring or implying between these entities or operation In any actual relationship or order or sequence.Moreover, the terms "include", "comprise" or its any other variant are intended to Non-exclusive inclusion, so that the process, method, article or equipment including a series of elements is not only wanted including those Element, but also include other elements that are not explicitly listed, or further include for this process, method, article or equipment Intrinsic element.In the absence of more restrictions, the element limited by sentence "including a ...", it is not excluded that There is also other identical elements in process, method, article or equipment including the element.
Each embodiment in this specification is all made of relevant mode and describes, identical similar portion between each embodiment Point just to refer each other, and each embodiment focuses on the differences from other embodiments.Especially for system reality For applying example, since it is substantially similar to the method embodiment, so description is fairly simple, related place is referring to embodiment of the method Part explanation.
The foregoing is merely illustrative of the preferred embodiments of the present invention, is not intended to limit the scope of the present invention.It is all Any modification, equivalent replacement, improvement and so within the spirit and principles in the present invention, are all contained in protection scope of the present invention It is interior.

Claims (18)

1. the massive point methods of exhibiting in a kind of electronic map, which is characterized in that the method includes:
Receive the point data of each point of interest in target massive point;Wherein, the point data include at least latitude and longitude information;
According to the latitude and longitude information of each point of interest in the target massive point, each point of interest is obtained belonging to electronic map Destination document coordinate in target webpage document;
The first size and the first document coordinate for adjusting the Canvas elements being pre-created, so that the Canvas elements and institute The map cases for stating electronic map overlap;Wherein, the affiliated figure layer of Canvas elements the affiliated figure layer of the electronic map it On, and the Canvas elements are transparent;
Using the Canvas elements, according to the destination document coordinate of each point of interest, belonging to the Canvas elements Each point of interest in the target massive point is drawn in figure layer, to be shown as showing the target in the electronic map Massive point.
2. according to the method described in claim 1, it is characterized in that, first ruler for adjusting the Canvas elements being pre-created The step of very little and the first document coordinate, including:
Obtain the second size and the second document coordinate of the map cases of the electronic map;
Set the size attribute value for the Canvas elements being pre-created to second size;And adjust the Canvas elements Coordinate property value so that the first document coordinate of the Canvas elements is identical as the second document coordinate.
3. according to the method described in claim 1, it is characterized in that, after monitoring electronic map transformation event, the method Further include:
According to the latitude and longitude information of each point of interest in the target massive point, each point of interest is obtained in target webpage text Current document coordinate in shelves;
Using the Canvas elements, according to the current document coordinate of each point of interest, belonging to the Canvas elements Each point of interest in the target massive point is repainted in figure layer.
4. according to the method described in claim 3, it is characterized in that, electronic map transformation event is translation event, dragging Event or scaling event;
When the transformation event be translation event or drag events when, it is described in the affiliated figure layer of Canvas elements again Before the step of drawing each point of interest in the target massive point, further include:
Obtain the third document coordinate of the map cases;
The the first document coordinate for adjusting the Canvas elements is the third document coordinate.
5. according to the method described in claim 1, it is characterized in that, described according to each point of interest in the target massive point Latitude and longitude information, the step of obtaining the destination document coordinate in target webpage document of each point of interest belonging to electronic map, Including:
By the latitude and longitude information of each point of interest in the target massive point, it is converted into map window coordinate;
Obtain the 4th document coordinate in target webpage document of the map cases of electronic map belonging to the electronic map;
By the map window coordinate of each point of interest respectively with the 4th document coordinate and, be determined as each point of interest in institute State the destination document coordinate in target webpage document.
6. according to the method described in claim 1, it is characterized in that, in the point for receiving each point of interest in target massive point After the step of position data, the method further includes:
Judge whether the latitude and longitude information of each point of interest in the target massive point meets preset data form;
If so, executing the latitude and longitude information according to each point of interest in the target massive point again, each point of interest is obtained The step of destination document coordinate in target webpage document belonging to electronic map;
If it is not, first converting the data format of the latitude and longitude information of each point of interest in the target massive point, acquisition meets described The latitude and longitude information of preset data form;The longitude and latitude according to each point of interest in the target massive point is executed again to believe The step of ceasing, obtaining the destination document coordinate in target webpage document of each point of interest belonging to electronic map.
7. according to the method described in claim 1, it is characterized in that, the method further includes:
Target DIV element is created in the target webpage document, and the Canvas elements are added to the target DIV element In;When the third size of the target DIV element and the 5th document changes in coordinates, with the third size and the 5th text after variation Shelves coordinate updates the first size and the first document coordinate of the Canvas elements respectively;And it will be belonging to the target DIV element Figure layer is inserted on the affiliated figure layer of the electronic map;
It is described adjust be pre-created Canvas elements first size and the first document coordinate the step of include:
Adjust the third size and the 5th document coordinate of the target DIV element.
8. the method according to the description of claim 7 is characterized in that the target DIV element and the Canvas elements are hung It is loaded on the corresponding map object of the electronic map.
9. according to claim 1 to 8 any one of them method, which is characterized in that the method further includes:
When monitoring location triggered instruction, the point data of the corresponding target point of interest of storage trigger position;Wherein, institute's rheme It sets triggering command and shows that the trigger position is located at comprising the specified region including target point of interest;
When monitoring object run instruction, the point data of the stored target point of interest are extracted, it is emerging to the target The point data of interest point execute the object run and instruct corresponding operation.
10. a kind of massive point in electronic map shows device, which is characterized in that described device includes:
Receiving module, the point data for receiving each point of interest in target massive point;Wherein, the point data are at least wrapped Include latitude and longitude information;
First obtains module, for the latitude and longitude information according to each point of interest in the target massive point, obtains each interest Destination document coordinate in target webpage document of the point belonging to electronic map;
The first adjustment module, the first size for adjusting the Canvas elements being pre-created and the first document coordinate, so that The map cases of the Canvas elements and the electronic map overlap;Wherein, the affiliated figure layer of Canvas elements is described On the affiliated figure layer of electronic map, and the Canvas elements are transparent;
First drafting module, for utilizing the Canvas elements, according to the destination document coordinate of each point of interest, in institute State each point of interest drawn in the affiliated figure layer of Canvas elements in the target massive point, to be shown as it is described electronically The target massive point is shown in figure.
11. device according to claim 10, which is characterized in that the first adjustment module includes:
Map cases acquisition of information submodule, the second size and the second document of the map cases for obtaining the electronic map Coordinate;
Submodule is adjusted, the size attribute value of the Canvas elements for will be pre-created is set as second size, and adjusts The coordinate property value of the whole Canvas elements, so that the first document coordinate of the Canvas elements and second document Coordinate is identical.
12. device according to claim 10, which is characterized in that described device further includes:
Second obtains module, for after monitoring the electronic map transformation event, according to each in the target massive point The latitude and longitude information of point of interest obtains current document coordinate of each point of interest in the target webpage document;
Second drafting module, for utilizing the Canvas elements, according to the current document coordinate of each point of interest, in institute State each point of interest repainted in the affiliated figure layer of Canvas elements in the target massive point.
13. device according to claim 12, which is characterized in that the transformation event be translation event, drag events or Scaling event;
When the transformation event is translation event or drag events, described device further includes:
Acquisition module, for repainting the target in the affiliated figure layer of Canvas elements in second drafting module Before the step of each point of interest in massive point, the third document coordinate of the map cases is obtained;
Second adjustment module, the first document coordinate for adjusting the Canvas elements are the third document coordinate.
14. device according to claim 10, which is characterized in that described first, which obtains module, includes:
Transform subblock, for by the latitude and longitude information of each point of interest in the target massive point, being converted into map window seat Mark;
Acquisition submodule, for obtaining in target webpage document of the map cases of electronic map belonging to the electronic map 4th document coordinate;
Determination sub-module, for by the map window coordinate of each point of interest respectively with the 4th document coordinate and, determination For destination document coordinate of each point of interest in the target webpage document.
15. device according to claim 10, which is characterized in that described device further includes:
Judgment module, for the receiving module receive target massive point in each point of interest point data the step of it Afterwards, judge whether the latitude and longitude information of each point of interest in the target massive point meets preset data form;It is default meeting When data format, triggering described first obtains module;When not meeting preset data form, conversion module is triggered;
The conversion module, the data format for first converting the latitude and longitude information of each point of interest in the target massive point, The latitude and longitude information for meeting the preset data form is obtained, then triggers described first and obtains module.
16. device according to claim 10, which is characterized in that described device further includes:
Third adjusts module, and for creating target DIV element in the target webpage document, the Canvas elements are added Into the target DIV element;When the third size of the target DIV element and the 5th document changes in coordinates, after variation Third size and the 5th document coordinate update the first size and the first document coordinate of the Canvas elements respectively;And by institute The affiliated figure layer of target DIV element is stated to be inserted on the affiliated figure layer of the electronic map;
The first adjustment module, is specifically used for:
Adjust the third size and the 5th document coordinate of the target DIV element.
17. device according to claim 16, which is characterized in that the target DIV element and the Canvas elements are equal Carry is on the corresponding map object of the electronic map.
18. according to claim 10 to 17 any one of them device, which is characterized in that described device further includes:
Memory module, for when monitoring location triggered instruction, storing the point digit of the corresponding target point of interest of trigger position According to;Wherein, the location triggered instruction shows that the trigger position is located at comprising the specified region including target point of interest;
Extraction module, for when monitoring object run instruction, extracting the point data of the stored target point of interest, And the object run is executed to the point data of the target point of interest and instructs corresponding operation.
CN201710453167.7A 2017-06-15 2017-06-15 Method and device for displaying mass points in electronic map Active CN108573008B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710453167.7A CN108573008B (en) 2017-06-15 2017-06-15 Method and device for displaying mass points in electronic map

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710453167.7A CN108573008B (en) 2017-06-15 2017-06-15 Method and device for displaying mass points in electronic map

Publications (2)

Publication Number Publication Date
CN108573008A true CN108573008A (en) 2018-09-25
CN108573008B CN108573008B (en) 2022-03-04

Family

ID=63576106

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710453167.7A Active CN108573008B (en) 2017-06-15 2017-06-15 Method and device for displaying mass points in electronic map

Country Status (1)

Country Link
CN (1) CN108573008B (en)

Cited By (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109543130A (en) * 2018-11-06 2019-03-29 新华三大数据技术有限公司 The display methods and device of label under three-dimensional scenic
CN110008294A (en) * 2019-02-26 2019-07-12 紫光云数科技有限公司 A kind of color filling method in level map symbolism processing
CN110634171A (en) * 2019-02-01 2019-12-31 天津完美引力科技有限公司 Device and method for drawing map
CN110796725A (en) * 2019-08-28 2020-02-14 腾讯科技(深圳)有限公司 Data rendering method, device, terminal and storage medium
CN111859189A (en) * 2020-07-10 2020-10-30 湖南三一智能控制设备有限公司 Map display device, method, apparatus, and computer-readable storage medium
CN112231432A (en) * 2020-12-10 2021-01-15 北京晶众智慧交通科技股份有限公司 Rendering method and system of electronic map, storage medium and electronic equipment
CN112860834A (en) * 2021-02-05 2021-05-28 深圳力维智联技术有限公司 WeBGIS-based third-party map docking device and method
CN113127586A (en) * 2019-12-31 2021-07-16 中国移动通信集团上海有限公司 Information display method, device, equipment and computer storage medium
CN113268687A (en) * 2021-05-25 2021-08-17 北京达佳互联信息技术有限公司 Method and device for determining element rendering position and storage medium
CN113656736A (en) * 2021-08-19 2021-11-16 上海哔哩哔哩科技有限公司 Data processing method and device

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140201658A1 (en) * 2013-01-14 2014-07-17 Ulrich Roegelein Rendering maps with canvas elements
CN104050238A (en) * 2014-05-23 2014-09-17 北京中交兴路信息科技有限公司 Map labeling method and map labeling device
CN104077100A (en) * 2014-06-27 2014-10-01 广东威创视讯科技股份有限公司 Composite buffer area image display method and device
CN104461423A (en) * 2014-11-27 2015-03-25 广东威创视讯科技股份有限公司 Resource information distribution display method and device based on GIS
CN104978357A (en) * 2014-04-10 2015-10-14 阿里巴巴集团控股有限公司 Data visualized display method and data visualized display device
CN105094815A (en) * 2015-06-30 2015-11-25 北京奇虎科技有限公司 Method and device for map route compilation
KR20170014512A (en) * 2015-07-30 2017-02-08 현대엠엔소프트 주식회사 Device and method of vector-map grouping

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140201658A1 (en) * 2013-01-14 2014-07-17 Ulrich Roegelein Rendering maps with canvas elements
CN104978357A (en) * 2014-04-10 2015-10-14 阿里巴巴集团控股有限公司 Data visualized display method and data visualized display device
CN104050238A (en) * 2014-05-23 2014-09-17 北京中交兴路信息科技有限公司 Map labeling method and map labeling device
CN104077100A (en) * 2014-06-27 2014-10-01 广东威创视讯科技股份有限公司 Composite buffer area image display method and device
CN104461423A (en) * 2014-11-27 2015-03-25 广东威创视讯科技股份有限公司 Resource information distribution display method and device based on GIS
CN105094815A (en) * 2015-06-30 2015-11-25 北京奇虎科技有限公司 Method and device for map route compilation
KR20170014512A (en) * 2015-07-30 2017-02-08 현대엠엔소프트 주식회사 Device and method of vector-map grouping

Cited By (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109543130A (en) * 2018-11-06 2019-03-29 新华三大数据技术有限公司 The display methods and device of label under three-dimensional scenic
CN110634171A (en) * 2019-02-01 2019-12-31 天津完美引力科技有限公司 Device and method for drawing map
CN110634171B (en) * 2019-02-01 2024-02-27 北京完美知识科技有限公司 Device and method for drawing map
CN110008294A (en) * 2019-02-26 2019-07-12 紫光云数科技有限公司 A kind of color filling method in level map symbolism processing
WO2020173047A1 (en) * 2019-02-26 2020-09-03 紫光云数科技有限公司 Method for color filling in high-level map symbolization processing
CN110796725A (en) * 2019-08-28 2020-02-14 腾讯科技(深圳)有限公司 Data rendering method, device, terminal and storage medium
CN113127586A (en) * 2019-12-31 2021-07-16 中国移动通信集团上海有限公司 Information display method, device, equipment and computer storage medium
CN111859189A (en) * 2020-07-10 2020-10-30 湖南三一智能控制设备有限公司 Map display device, method, apparatus, and computer-readable storage medium
CN112231432A (en) * 2020-12-10 2021-01-15 北京晶众智慧交通科技股份有限公司 Rendering method and system of electronic map, storage medium and electronic equipment
CN112860834A (en) * 2021-02-05 2021-05-28 深圳力维智联技术有限公司 WeBGIS-based third-party map docking device and method
CN113268687A (en) * 2021-05-25 2021-08-17 北京达佳互联信息技术有限公司 Method and device for determining element rendering position and storage medium
CN113268687B (en) * 2021-05-25 2023-11-28 北京达佳互联信息技术有限公司 Method, device and storage medium for determining element rendering position
CN113656736A (en) * 2021-08-19 2021-11-16 上海哔哩哔哩科技有限公司 Data processing method and device

Also Published As

Publication number Publication date
CN108573008B (en) 2022-03-04

Similar Documents

Publication Publication Date Title
CN108573008A (en) Massive point methods of exhibiting and device in a kind of electronic map
CN105740315B (en) The method of one kind of multiple screen response type page layout adjustment
US20160283096A1 (en) Method of generating a link by utilizing a picture and system thereof
CN105094815B (en) Map route edit methods and device
CN105162120B (en) Web-GIS-based real-time geographical tidal current display method of large power grid
CN106095437B (en) The implementation method and device of the user interface layout type of RTL from right to left
CN106502659B (en) A kind of layout method and system of mobile device webpage single-page
CN101937312B (en) Method for marking electronic book and mobile terminal
DE202014010936U1 (en) Efficient retrieval of map tile data
DE112013002803T5 (en) A method, system and apparatus for providing a three-dimensional transition animation for changing a map view
DE202014010881U1 (en) Providing indoor equipment information on a digital map
CN110377285A (en) A kind of method, apparatus and computer equipment generating page skeleton screen
CN109542987B (en) Online map storage method based on Canvas
CN103970859A (en) Google user map text labeling method based on SVG
JP5299993B2 (en) Map display device and map display method
CN107655578A (en) A kind of temperature record methods of exhibiting, device and terminal
DE202014010894U1 (en) System for disambiguation of the object selection
CN107194549A (en) The visual presentation method that a kind of energy efficiency indexes are decomposed
CN103176993B (en) A kind of content presenting device and method
CN108255900A (en) Recommend news rendering method, equipment, browser and electronic equipment
CN103955955A (en) Electronic map information processing method and device
CN103559342B (en) The emulation mode of liquid crystal display in a kind of protective relaying device
JP4874363B2 (en) Web page display method using browser plug-in
CN104346771B (en) A kind of electronic map tiered management approach
CN113722031B (en) Dynamic display method, equipment, medium and product of electronic signature

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant