webgis开发包括webgis前端开发以及webgis后端开发，本人首先接触的是webgis的前端开发，在学习前端开发时采用了openlayer前端框架。
前言
利用openlayer引入天地图发布的服务，天地图发布的数据源按照坐标分可以分为EPSG:4326与EPSG:3857，openlay默认的地图坐标系为3857。
一、代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初始化地图</title>
<link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
<script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
<style type="text/css">
/* 地图容器mapCon样式 */
#mapCon {
width: 100%;
height: 100%;
position: absolute;
}
</style>
</head>
<body>
<div id="mapCon">
</div>
<script type="text/javascript">
//实例化Map对象加载地图
var map = new ol.Map({
//地图容器div的ID
target: 'mapCon',
layers: [
//加载瓦片图层数据
new ol.layer.Tile({
className:'blueLayer',
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + "c3e13f43d5f380c070aaff0b2920fae8",
wrapX: false
})
}),
new ol.layer.Tile({
title: "天地图矢量注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + "c3e13f43d5f380c070aaff0b2920fae8",
})
})
],
//地图视图设置
view: new ol.View({
// 告诉地图该坐标系为投影坐标系，web墨卡托投影
projection: 'EPSG:3857',
// 设置投影坐标系下的中心点的位置
center: ol.proj.fromLonLat([116.38, 39.93]),
//地图初始显示级别,在打开地图的时候显示的层级
zoom: 12
})
});
</script>
</body>
</html>
总结
通过代码实现了前端地图的展示，从代码中可以看出一个map对象至少由target、layers、view三种属性，layers为一个数组对象，即一个map对象里面能包含多个图层。
扫一扫
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
