preface
Finished the article even a troll, there is no big guy to point out ah.
Why did we choose OpenLayers?
We start is based on the existing business QGIS maintenance data and then import the data to the ground, start this way for us to start a business is a great idea, data collecting data to the data on-line ground appears to be no problem, but the product extension to the increased in some business, when the data is no longer a static data information, When abnormal dynamic alarm and other business development and online feedback can intuitive and efficient to solve the problem, then using OpenLayers data maintenance module and the development of visual test platform, choice of factors are mainly the following points Its own hd tiles shows, the performance of a large amount of data need not forced to rely on external resources at the same time.
The meaning of location information scenes and visualizations
-
First of all, it is worth recognizing that location acquisition needs to be within the legal range. Common scenarios of location information system include handheld mobile operation application, pet electronic fence, real-time timing positioning system, Internet of vehicles, Internet of things and other aspects.
Common scenarios
- On the basis of point data, our common businesses include: static resource annotation (such as data of schools, parks, hospitals, etc.), real-time location display (such as location of takeout riders), timing position update (synchronization of low power module), motion trajectory analysis (fitness swimming…). .
-
On the basis of line segment polygon data, our common business is: path mapping (with the old military class computer mode of friendly again, in any case, the existing map mapping cannot or is not allowed to explore the line).
█████████████Copy the code -
Common businesses on polygon-based data include: data fencing (if you have a fence and you train your dog, you won’t run away from home without a leash, is there any wangduoyu investment in this project?) , the setting area is monitored.
-
A fool – witted introduction to position visualization for reinforcement
When we look at the coordinates of the location information, we cannot accurately resolve the address. If we can get the address through the reverse analysis of the location, we can view and operate in the most straightforward way through the data visualization scheme, which is also the most comfortable scheme for normal people.
Location information:
Original: 116.403119,39.915156 (Where am I?)
Forbidden City, Beijing, China
Visual analysis (figure Baidu coordinate picking system) :
Talk aboutOpenLayers
What is OpenLayers?
OpenLayers is an open source JS library, it allows to add layers of all kinds of data such as point, line, segment, surface and other elements data, allows to customize the loading of external online maps such as Baidu Autonavi can also load from the published map map, internal has implemented a lot of tools and calculation methods such as measuring related layers zoom in and out scale and so on. Visit OpenLayers website for more information
Simplified hierarchical relationship
From the figure above, we can understand it as follows (there are a lot of method attributes in OL and do not enumerate the diagram one by one to understand the hierarchical relationship) :
Simplified version of the hierarchy explanation
>> Map ol.map Can instantiate only one Map object in the same container >> A Map object can have multiple base maps (Ol Lyaer) >>> We can have multiple Vector layers >>>> One Vector Layer corresponds to one data Layer (Source) >>>>>> Each Feature can be drawn in several different ways. You can also set coordinate system styles etc. >>>> You can create a global Style Style for the data layer >>>> you can set the coordinate system for the data layer >> Map has only one viewable areaCopy the codeGet started quickly with OpenLayers
Source:
<! DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>From entry to abandonment</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" integrity="sha512-D2c/nmSVlwoZk29SLwJK8GkLyCyPuNbZ/vZQL/lNzw+o+yXzsbnJt7lK/iCfdBmgyLRDi0qx27gpE8Zb1C6I7g==" crossorigin="anonymous"/>
</head>
<body>
<div id="map"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js" integrity="sha512-O7kHS9ooekX8EveiC94z9xSvD/4xt10Qigl6uEKvspYykdux3Ci5QNu5fwi4ca0ZkZI/oCgx5ja8RklWUEqzxQ==" crossorigin="anonymous"></script>
<script type="text/javascript">
const map = new ol.Map({ // Map is the start of the main entry
target: 'map'.// Load into div with ID map
layers: [// There can be multiple layers that can be used for satellite map switching, etc
new ol.layer.Tile({
// Load the Google image layer XYZ is a tile ol.source supports multiple formats
source: new ol.source.XYZ({
// Google image address
url:'http://mt0.google.cn/maps/vt?lyrs=s@773&gl=cn&n=ostn&x={x}&y={y}&z={z}'})})],view: new ol.View({// Set the viewable area
center: [116.403119.39.915156].// The center of the visible area
projection: 'EPSG:4326'.// Projection coordinates
zoom: 15 // Initial display level})});</script>
</html>
Copy the codeEffect:
Example: Simple implementation of a property distribution (don’t even wake me up)
<! DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>From entry to abandonment</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" integrity="sha512-D2c/nmSVlwoZk29SLwJK8GkLyCyPuNbZ/vZQL/lNzw+o+yXzsbnJt7lK/iCfdBmgyLRDi0qx27gpE8Zb1C6I7g==" crossorigin="anonymous"/>
</head>
<body>
<div id="map"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js" integrity="sha512-O7kHS9ooekX8EveiC94z9xSvD/4xt10Qigl6uEKvspYykdux3Ci5QNu5fwi4ca0ZkZI/oCgx5ja8RklWUEqzxQ==" crossorigin="anonymous"></script>
<script>
const EPSG = "EPSG:4326";
var center = [116.403119.39.915156];
const map = new ol.Map({ // Map is the start of the main entry
target: 'map'.// Load into div with ID map
layers: [// There can be multiple layers that can be used for satellite map switching, etc
new ol.layer.Tile({
// Load the Google image layer XYZ is a tile ol.source supports multiple formats
source: new ol.source.XYZ({
// Google image address
url:'http://mt0.google.cn/maps/vt?lyrs=s@773&gl=cn&n=ostn&x={x}&y={y}&z={z}'})})],view: new ol.View({// Set the viewable area
center: center, // The center of the visible area
projection: 'EPSG:4326'.// Projection coordinates
zoom: 15 // Initial display level})});let vectorSource = new ol.source.Vector({});
let json = '[{" name ":" A "house," says lon ":" 116.4031 ", "lat" : "39.915156"}, {" name ":" B "house," says lon ":" 116.4032 ", "lat" : "39.915156"}, {" name ":" C "house," says lon ":" 116.4033 ", "lat" : "39.915156"}, {" name ":" D "house," says lon ":" 116.4034 ", "lat" : "39.915156"}, {" nam ":" E "house," says lon ":" 116.4035 ", "lat" : "3 9.915156 "}, {" name ":" F "house," says lon ":" 116.4036 ", "lat" : "39.915156"}, {" name ":" G "house," says lon ":" 116.4037 ", "lat" : "39.915156"}] ';
let homes = eval(json);
// House Style Style
var style = new ol.style.Style({
image: new ol.style.Icon({// Set the image
src: 'https://icons16x16.com/static/rn_012104_085803-1ac6f677ff8586d25255626644f6fb80.gif' // The URL of the icon})});for(var i in homes){
// Set the point element
let feature = new ol.Feature({
geometry: new ol.geom.Point([homes[i].lon,homes[i].lat]), // Set the latitude and longitude points
});
feature.setStyle(style);
vectorSource.addFeature(feature);
}
let vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
</script>
</html>
Copy the codeEffect:
conclusion
In the understanding of the overall structure of the time to learn is not so complex, the official examples and API documents are well written, but do not pay attention to not careful will have a lot of small pits, the summary is to write easy to write is not easy, diligence is the only path to the top.
🏆 technology project phase iii | data visualization of those things…