前端入门-HTML

最新推荐文章于 2022-04-15 15:15:09 发布

测绘真的强

最新推荐文章于 2022-04-15 15:15:09 发布

阅读量207

点赞数

分类专栏： HTML webgis openlayers

本文链接：https://blog.csdn.net/qq_34158448/article/details/80785847

版权

webgis 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

openlayers

2 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

作为一名测绘专业的学生，我将带头冲锋，将互联网技术与测绘行业结合在一起。在这里我主要将WEBGIS作为重点，结合HTML+CSS+JAVASCRIPT、ARCGIS与ARCGIS SERVER和ORACLE等技术进行各尝试性开发，首先是简单的结合，然后是更深层次的应用。

先给一个小列子吧！基于OpenLayers的地图展示。

为了方便阅读，我把代码粘出来。

HTML代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<title>地图展示</title>
	<link rel="stylesheet" type="text/css" href="ol.css">
	<script type="text/javascript" src="ol.js"></script>
	<link rel="stylesheet" type="text/css" href="test1.css">
	<script type="text/javascript" src="test.js"></script>
</head>
<body οnlοad="init();">
	<div class="title">基于OpenLayers的地图展示</div>
	<div id="map"></div>
</body>
</html>

JS代码：

function init(){
	var map = new ol.Map({
		target: 'map',
		layers: [
			new ol.layer.Tile({
				source: new ol.source.OSM()
			})
		],
		view: new ol.View({
			center: [0,0],
			zoom: 2
		}),
	});
}

CSS代码：

*{
	margin: 0;
	padding: 0;
}
.title{
	width: 100%;
	height: 75px;
	background-color: #5573ab;
	font-size: 26px;
	font-weight: bold;
	color: white;
	line-height: 75px;
	text-align: center;
}
#map{
	width: 100%;
	height: 100%;
	position: absolute;
}

这对于一个搞测量的苦劳力也是有点难，扛脚架咱不怕，上高山咱不怕，这代码...所以我要说的就是这个了。将测绘的知识与计算机专业的知识相结合，因为测绘本身就是一个学科交叉性很强的学科，所以我要学的还很多。

现在，我从前端HTML语言学起，同时学专业知识，所以我的微博知识点会有点多。

常用标签

标签有单、双标签之分，单标签：img、hr、br等，双标签：div、h1、ul、ol等。

主要使用div,h,a,img,p,span,ul,ol这几个标签，主要说一下a标签和img标签。

anchor锚，超链接标签，两种用法：1、<a href="#name"></a>.... <a href="地址" id="name"></a> 实现上下文跳转。2、<a href="name.md">下载</a>实现点击下载文件的功能，target属性可以改变网页的状态_self当前页面，_blank新页面。

img图片标签，用于经常更换的图片，background-image用于不经常更换的图片。四个属性：width控制宽度，height控制高度，src图片的路径，alt图片的说明。

测绘真的强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门-HTML

作为一名测绘专业的学生，我将带头冲锋，将互联网技术与测绘行业结合在一起。在这里我主要将WEBGIS作为重点，结合HTML+CSS+JAVASCRIPT、ARCGIS与ARCGIS SERVER和ORACLE等技术进行各尝试性开发，首先是简单的结合，然后是更深层次的应用。先给一个小列子吧！基于OpenLayers的地图展示。为了方便阅读，我把代码粘出来...
复制链接

扫一扫