What is? OpenLayers?

OpenLayers Is a special for Web GIS Client development provides JavaScript Class library package , It is used to access map data published in standard format . from OpenLayers2.2 After the version ,OpenLayers We've used Prototype.js Components Integrated into itself , And constantly Prototype.js Improve object-oriented development on the basis of ,Rico Not much use , It's just OpenLayers.Popup.AnchoredBubble Class DIV.

My eyes of Openlayer:

Speaking of openlayer I have to say that some of them map,map yes OpenLayers Core components , If the development openlayer3 The process is more like painting , that map It's a magic table , It's to carry all kinds of paper (layer), What if you want to use a map as the background for painting ? This is the time ol.layer.Tile Come out , Want to load the block map in the grid , It is nothing but , What if you want to load customer data ?ol.layer.Vector To help you , OK, the background image has , I've also added , I suddenly found that I was not satisfied with the background and my painting , Want to add , How to modify , to map With special effects ,ol.interaction.xxxx, If you want to draw a dot, you can add ol,interaction.Draw, If you want to modify it, add ol.interaction.Modify, Of course, you can render the map before adding special effects ,ol.FeatureOverlayer, Because things drawn in the default style may not be clear . Of course, it's far from simple , Each class has its own method . Just say map Well , At least what I use most is its on() Follow once() Method , The former listens to a particular type of event , The latter listens to a specific type of event , among on() Follow un() It's paired . Not much else , You can refer to the official manual .

Some common examples

First of all, from the Map From the official reference manual of

ol.Map

The map is the core component of OpenLayers. For a map to render, a view, one or more layers, and a target container are needed.

From above Map See the definition of , We can know map yes OpenLayers Core components . Yes map Rendering , We need at least one view( View ), One layers( layer ) And a container of targets .

By definition, we create a

The simplest map.

<html>
<head>
<meta charset="utf-8">
<title>GIS Development samples -V1.0</title>
<meta content="Copyright (c) Leetao" name="copyright">
<link rel="stylesheet" href="/jslib/openlayer-3.3.0/css/ol.css" type="text/css">
<script src="/jslib/openlayer-3.3.0/build/ol-debug.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
view: new ol.View({
center: [0, 0], // Initial center of view
zoom: 1 // The initial resolution used to zoom the view
}),
layers: [
new ol.layer.Tile({ //Tile Pre render layer
source: new ol.source.MapQuest({layer: 'osm'})
})
],
target: 'map'
});
</script>
</body>
</html>

The result is shown in Fig. :

End of simple map creation , Then let's draw patterns on the map
Simple drawing
The code is as follows :
<html>
<head>
<meta charset="utf-8">
<title>GIS Development samples -V1.0</title>
<meta content="Copyright (c) Leetao" name="copyright">
<link rel="stylesheet" href="/jslib/openlayer-3.3.0/css/ol.css" type="text/css">
<script src="/jslib/openlayer-3.3.0/build/ol-debug.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="map"></div>
<form class="form-inline">
<label>Geometry type &nbsp;</label>
<select id="type">
<option value="None">None</option>
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</form>
<script>
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source
});
var map = new ol.Map({
view: new ol.View({
center: [0, 0],
zoom: 2
}),
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'})
})
// vector //(2)
],
target: 'map'
});
//featureOverlay
var featureOverlay = new ol.FeatureOverlay({
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
}),
}
);
featureOverlay.setMap(map);
var typeSelect = document.getElementById('type');
var draw;
function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
draw = new ol.interaction.Draw({
features: featureOverlay.getFeatures(), // (1)
source: source,
type: /** @type {ol.geom.GeometryType} */ (value)
});
map.addInteraction(draw);
}
}
typeSelect.onchange = function(e) {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
</script>
</body>
</html>

give the result as follows :

The above code allows you to Tile Draw a dot on it , Lines and Geometry , Of course, if you put (1) The comments , And try to draw on it , You will find that the drawing becomes transparent ,
If you put (2) The comment has been cancelled , In the (1) It's annotated , You'll find that , At this time, the drawing can be seen
When the drawing is finished, it's time to modify the drawing
Simple drawing and modifying drawings
You just need to add a ol.interaction.Modify It can be modified
The code is as follows :

<html>
<head>
<meta charset="utf-8">
<title>GIS Development samples -V2.0</title>
<meta content="Copyright (c) Leetao" name="copyright">
<link rel="stylesheet" href="/jslib/openlayer-3.3.0/css/ol.css" type="text/css">
<script src="/jslib/openlayer-3.3.0/build/ol-debug.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="map"></div>
<form class="form-inline">
<label>Geometry type &nbsp;</label>
<select id="type">
<option value="None">None</option>
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</form>
<script>
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source
});
var map = new ol.Map({
view: new ol.View({
center: [0, 0],
zoom: 2
}),
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'})
})
],
target: 'map'
});
//featureOverlay
var featureOverlay = new ol.FeatureOverlay({
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
}),
}
);
featureOverlay.setMap(map);
var modify = new ol.interaction.Modify({
features: featureOverlay.getFeatures(),
deleteCondition: function(event) {
return ol.events.condition.shiftKeyOnly(event) &&
ol.events.condition.singleClick(event);
}
});
map.addInteraction(modify);
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later
function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
draw = new ol.interaction.Draw({
features: featureOverlay.getFeatures(),
source: source,
type: /** @type {ol.geom.GeometryType} */ (value)
});
map.addInteraction(draw);
}
}
typeSelect.onchange = function(e) {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
</script>
</body>
</html>
Of course, you can add or modify special effects , use map.removeInteraction(), You can disable modification or drawing after a specific event is triggered
It's all single-layer on top , If you want to add customer data , Refer to example 1 , Annotate (2) Remove it .
Now we try to load data from the background , And modify the data from the background for the second time
Modify the data from the background
Mainly adopted ol.interaction.Select() Method
The core code is as follows :
var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({
layer: 'sat'
})
});
var vector = new ol.layer.Vector({
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: 'data/geojson/countries.geojson'
})
});
var select = new ol.interaction.Select();
var modify = new ol.interaction.Modify({
features: select.getFeatures()
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, modify]),
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
among ol.interaction.Select It's used to deal with the selected Vector Data. .
Finally, the translation of the official manual is attached ( The blogger translated it himself , There may be a mistake , For reference only )
If there are errors in the article , Please correct me. .

About Openlayer3 The rookie knows more related articles

  1. PHP use QueryList Grab web content

    http://www.cnblogs.com/wb145230/p/4716403.html Before crawling web data are used Java Jsoup, I heard it was used a few days ago PHP It's more convenient to grasp , Let's make a brief study today , Mainly used Qu ...

  2. Rookie Science Struts2——Results

    In the face of Struts2 Of Action After learning , Yes Struts2 Of Result To study . Mainly for Struts2 file Guides Medium Results Branch to learn , Here's the picture : 1.Result Types(Resul ...

  3. [C#][ Algorithm ] Learning algorithms with rookie thinking -- Toilet sort 、 Bubble sort and quick sort

    Learning algorithms with rookie thinking -- Toilet sort . Bubble sort and quick sort [ Blogger ] Anti bony boy [ source ]http://www.cnblogs.com/liqingwen/p/4994261.html  Catalog Toilet sort ( cause ...

  4. Rookie, fly fast JavaScript object 、 Prototype 、 Inherit ( 3、 ... and )

    One thing to declare before the text is , Rookie blog series is all based on ES5 Of , Don't consider ES6 Even later . Inherit Because I am not a computer student , So I just know a lot of things , I don't know why . Like this inheritance , Just started learning JavaScript ...

  5. IT Rookie's Survival Guide ( Two ) Novice Village Mission

    This article is dedicated to those who just entered IT The little birds of the industry , This article can't teach you how to " assume CEO, Marry Bai Fumei ", It's a TV story . reality IT There are many crises in the industry , Competitive incentives . Here's how to survive . Existence . Existence - Courtesy ( No ) xi ( Her love ...

  6. IT Rookie's Survival Guide ( One ) Those people are suitable for IT industry

    This article is dedicated to those who just entered IT The little birds of the industry , This article can't teach you how to " assume CEO, Marry Bai Fumei ", It's a TV story . reality IT There are many crises in the industry , Competitive incentives . Here's how to survive . Existence . Existence - Just do ...

  7. Rigid contact Linux, The necessary knowledge for a rookie ( One )

    As a senior student , And I'm still a computer student. I haven't touched it linux It's a shame . I worked as a software tester this holiday , You have to be familiar with linux The operation of , So for me, a rookie, I would like to talk about some important little knowledge . First of all .cd finger ...

  8. Rookie Science Android Programming —— Simple calculator 《 One 》

    Rookie's fooling around , Master Mo Jin I'm a rookie , Recently learning Android Programming , I watched some video tutorials on the Internet , So I thought that the calculator on my mobile phone should be very simple , Why don't you try to make one yourself ? So I took the liberty to drive . Simple calculator , Of course, there are very few functions ...

  9. GitHub Rookie diary 1——20160531

    ok , In fact, I've known for a long time that there are github This thing , However, there is an inexplicable force that has been preventing me from going to this “ Unknown territory ” Set foot in (which is called lazy). then , A brief introduction ... All in all , It started in silence github ...

Random recommendation

  1. 360 Browser download excel Problem solving

    Have you ever met the one I met today . If you use simple links . perhaps get Forms submitted in different ways , To download excel, that 360 There will be a problem with the browser . The problem is : It didn't use me java Generated excel Form download , It's going to take my list ...

  2. HDU2929 Bigger is Better[DP Printing scheme !]

    Bigger is Better Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  3. obtain MAC Several ways of address

    .NET Backstage using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  4. Excle Hide and expand Columns

    When excle When there are many document categories, we want to see the corresponding relationship between the first column and a certain column. We can choose to hide the middle column . Select the column to hide , And then right-click --> Can be hidden When it needs to unfold , Choose : The front and back columns of the hidden column , And then when the mouse is at the head of the column ( ...

  5. A. Sorting Railway Cars

    A. Sorting Railway Cars time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  6. MVC Website deployment FAQ summary

    One :TGIShare The project is a MVC5 Our website program , Deployed at IIS On , The use of Windows Verification mode , And set up a schedule task in this machine, and call a certain address to execute the command regularly . The questions are summarized as follows : 1.Window Server 200 ...

  7. phpexcel error You tried to set a sheet active by the out of bounds index: 1 terms of settlement

    $objPHPExcel->createSheet($k);

  8. Flink Learning notes - new generation Flink Calculation engine

    explain : This paper is about <Flink Big data projects > Learning notes , I want to learn through video system Flink This is the most popular big data computing framework , Recommended courses of study : Flink Big data projects :http://t.cn/EJtKh ...

  9. c In language bool Type variable ?

    C There is no language bool( Boolean ) Type of ,C++ It's inside , That is to say , stay C++ It uses bool There's no problem with type . bool Type has only two values :true =1 .false=0. however ,C99 In the standard , It also defines ...

  10. java String turn Long The difference between the two methods

    Long.ValueOf("String") return Long Packaging type Packaging type : Byte,Integer,Short,Long,Boolean,Character,Float,Dou ...