ỨNG DỤNG MỚI

Bài này chúng ta sẽ tìm hiểu cách sử dụng popup trong OpenLayer sử dụng  overlay.  Các bạn có thể tìm hiểu thêm về các API trong bài theo link sau:  ol.Map  , ol.Overlay , ol.View Đầu tiên chúng ta thêm các style cho popup như sau: <style>   .map, .righ-panel {   height : 500px ;   width : 40% ;   float : left ;   }   .map {   border : 1px solid #000 ;   }   .ol-popup {   position : absolute ;   background-color : white ;   -webkit-filter: drop-shadow( 0 1px 4px rgba( 0 , 0 , 0 , 0.2 ));   filter: drop-shadow( 0 1px 4px rgba( 0 , 0 , 0 , 0.2 ));   padding : 15px ;   border-radius: 10px ;   border : 1px solid #cccccc ;   bottom : 12px ;   left : -50px ;   min-width : 180px ;   }   .ol-popup:after, .ol-popup:before {   top : 100% ;   border : solid transparent ;   content : " " ;   height : 0 ;   width : 0 ;   position : absolute ;   pointer-events: none ;   }   .ol-popup:after {   border-top-color : whit

Ở bài trước chúng ta đã lấy được đối tượng dạng JSON bằng các request. Bài này chúng ta sẽ hiển thị Highlight đối tượng đó . Đối tượng chúng ta request được ở bài trước được lưu theo chuẩn GeoJSON, là một chuẩn mở dựa trên JSON để chia sẻ qua mạng một cách nhanh chóng và gọn nhẹ nhất. Các bạn có thể đọc thêm về chuẩn này tại đây:  http://geojson.org/geojson-spec.html Để Highlight đối tượng thực chất chúng ta sẽ add thêm 1 feature lên bản đồ của chúng ta để có thể tùy chỉnh style cho đối tượng. Chúng ta sẽ sử dụng loại đối tượng của OpenLayer là  ol.layer. Vector. Chúng ta thêm style mới cho đối tượng Highlight và layer vector như sau: var styles = { 'MultiPolygon' : new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'yellow' , width: 1 }) }) }; var styleFunction = function (feature) { return styles[feature.getGeometry().getType()]; }; var vectorLayer = new ol.layer.Vector({ style: styleFunction }); map.addLayer(vectorLayer);  

Ở bài này chúng ta sẽ tìm hiểu cách lấy thông tin của đối tượng trên bản đồ bằng cách kick chuột vào đối tượng. Đầu tiên chúng ta thêm một thẻ div để hiển thị thông tin lên trang như sau: < div id = "info" ></ div > Sau đó thêm sự kiện click vào bản đồ như sau: map.on( 'singleclick' , function (evt) { document.getElementById( 'info' ).innerHTML = "Loading... please wait..." ; var view = map.getView(); var viewResolution = view.getResolution(); var source = ThuaDat.getSource(); var url = source.getGetFeatureInfoUrl( evt.coordinate, viewResolution, view.getProjection(), { 'INFO_FORMAT' : 'text/html' , 'FEATURE_COUNT' : 50}); if (url) { document.getElementById( 'info' ).innerHTML = '<iframe seamless src="' + url + '"></iframe>' ; } }); Sau khi click vào bản đồ thì đối tượng tìm thấy sẽ hiển thị như ở dưới. Với cách này thì chúng ta sẽ hiển