openlayers地图基本框架与天地图加载

教程目录

一、引言

换工作中间耽误了好长时间没有更过blog了,现在终于有时间搞开源webgis了,先从openlayer下手,后面打算在研究geoserver、postgis、geotool等技术和OGC中WMS、WFS、WCS等标准。openlayers地图基本框架与天地图加载

二、openlayer中map基本框架

首先map包括以上的属性:

layer是最主要的,它决定了是加载的是什么类型的图层,是矢量的栅格的还是图片;

view是视图,决定了坐标系,当前视图的范围,这也是为什么叫view的原因;

controls是控件,跟arcgis中的控件类似,比例尺、鹰眼、缩放等;

target是与dom中哪个元素相关联去显示地图;

三、加载天地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol-debug.js"></script>

</head>
<body>
<div id="map" style="width: 100%"></div>
<script>

    //view
    var view=new ol.View({
            // 设置成都为地图中心
            center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),
            zoom: 4
        });
    //var osm=new ol.layer.Tile({source: new ol.source.OSM()});
    // map
    var map = new ol.Map({
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w"),

        ],
        view:view,
        target: 'map'
    });

    function getTdtLayer(lyr) {
        var urls=[];
        for(var i=0;i<8;i++)
        {
            urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}")
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                urls:urls
            })
        });
        return layer;
    }
</script>
</body>
</html>

这个例子主要是添加天地图web墨卡托的底图和标注切片两个图层,当然也可以把oms图层的注释去掉将osm图层添加到layers中。地图用的全部是网络地图,js正确导入后可以直接运行。

tip:openlayer默认的坐标系是3857,web墨卡托投影坐标系,所以在view中设置的是经纬度,要从4326转换到3857坐标系,不然的话view会在非洲那边==

四、总结

  • openlayer中map基本框架
  • openlayer加载天地图

转载自:https://blog.csdn.net/xcymorningsun/article/details/82382796

You may also like...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

CAPTCHAis initialing...