最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
This section will show you how to use CSS to lay out pictures. Example Fillet picture: Example Oval picture: We use Example Example Responsive pictures automatically adapt to screens of all sizes. In the example, you can view the effect by resizing the browser: If you need to zoom the picture freely and the size of the picture is not larger than its original maximum, you can use the following code: Example Tip: Web responsive design can refer to the CSS responsive design tutorial for more information. How to locate the picture text: Example Lower left corner Upper left corner Upper right corner Lower right corner In the middle Example CSS Note: this attribute is not supported by Internet Explorer or Safari 5.1 (and earlier). Example Change the color of all pictures to black and white (100% grayscale): Tip: visit the CSS filter reference manual for more information. Example This example demonstrates how to render a picture together with CSS and JavaScript. First, we use CSS to create the Then, we use JavaScript to display the modal window, and when we click on the picture, the picture will appear in the pop-up window: Example 8.16.1. Rounded corner picture ¶
img{
border-radius:8px;
}
img{
border-radius:50%;
}
8.16.2. Thumbnail image ¶
border property to create a thumbnail.img{
border:1px solid #ddd;
border-radius:4px;
padding:5px;
}
<img src="paris.jpg" alt="Paris">
a{
display:inline-block;
border:1px solid #ddd;
border-radius:4px;
padding:5px;
transition:0.3s;
}
a:hover{
box-shadow:0 0 2px 1px rgba
(0, 140, 186, 0.5);
}
<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
a>
8.16.3. Responsive picture ¶
img{
max-width:100%;
height:auto;
}
8.16.4. Picture text ¶
8.16.5. Card picture ¶
div.polaroid{
width:80%;
background-color:white;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0,
0, 0.19);
}
img{width:100%}
div.container{
text-align:center;
padding:10px 20px;
}
8.16.6. Picture filter ¶
filter attributes are used to add visual effects to elements (for example, blur and saturation). img{
-webkit-filter:grayscale(100%); /\* Chrome, Safari, Opera \*/
filter:grayscale(100%);
}
8.16.7. Responsive photo album ¶
.responsive{
padding:0 6px;
float:left;
width:24.99999%;
}
@media only screen and (max-width: 700px){
.responsive{
width:49.99999%;
margin:6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive{
width:100%;
}
}
8.16.8. Picture Modal (mode) ¶
modal window (dialog box), which is hidden by default. // Get Modal Window
var modal = document.getElementById('myModal');
// Get the image modal box and use the alt attribute as the text description in the image pop-up
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}