Mainly describes how to use Ol3 to draw points, lines and polygons, OL use the Ol.interaction.Draw method and the user to exchange and draw graphics. 1 Creating a process
(1) Create a new HTML file named Draw-feature;
(2) Add a reference as follows:
<link rel= "stylesheet" href= ". /css/ol.css ">
<link rel=" stylesheet "href=". /css/bootstrap.min.css ">
<link rel=" stylesheet "href=". /css/bootstrap-responsive.min.css ">
<link rel=" stylesheet "href=". /css/layout.css ">
<script type=" Text/javascript "src=". /ol3/ol-debug.js "></script>
<script type=" Text/javascript "src=". /goog/base.js "></script>
<script type=" Text/javascript "src=". /plugins/jquery2.1.1.js "></script>
<script type=" Text/javascript "src=". /example/example-behaviour.js "></script>
<div class= "NavBar navbar-inverse navbar-fixed-top" > <div class= "Navbar-inner" > <div class= "con Tainer "> <a class=" brand "href="./">ol3 example</a> </div> </div> </div> <div class=" CONTAINER-FL UID "> <div class=" row-fluid "> <div class=" span12 "> <div id=" map "class=" map "> </div> </div> </div> <div class= "Row-fluid" >(4) In the same folder where the page is located, add a JS file named Draw-features, which includes the initialization of the map, the initialization of the drawing, and the drawing interaction, as detailed in the comments in the code:
var draw;//defines a global variable that deletes the current drawing tool when the drawing mode changes function init () {//program initialization//new Basemap-Tile layer var raster=new ol.layer.Tile ({source:new Ol.source.MapQuest ({layer: ' Sat ')}); Data source for temporary layers var source=new ol.source.Vector (); Create a new temporary layer and set the temporary layer to render various features of the style var vector=new ol.layer.Vector ({source:source, 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, fi Ll:new Ol.style.Fill ({color: ' #ffcc33 ')})}); New map var map=new ol. Map ({Layers:[raster,vector], target: ' Map ', view:new ol. View ({center:[-11000000,4600000], zoom:4})}); var Typeselected=document.getelementbyid (' Drawtype '); Initializes the drawing tool function Addinteraction () {var value=typeselected.value; if (value!== ' None ') {draw=new Ol.interaCtion. Draw ({source:source,//sets the feature source, adds the drawn feature to the staging layer after the drawing finishes type: (value)//drawn type}); Map.addinteraction (Draw); }}//Typeselected.onchange= function (e) {map.removeinteraction (draw) after re-initializing the drawing tool after changing the drawing method; Addinteraction (); }; }(4) Add a reference to the Draw-feature.js file on the page:
<script type= "Text/javascript" src= "Goog/base.js" ></script>(5) After the page load call JS in the init () method for map and drawing initialization, <body onload= "init ()" > results
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
