webgis原理剖析系列-以openlayers为例 -01 第一张地图

最新推荐文章于 2023-12-03 22:03:03 发布

A873054267

最新推荐文章于 2023-12-03 22:03:03 发布

阅读量405

点赞数

分类专栏： openlayers

本文链接：https://blog.csdn.net/A873054267/article/details/89007050

版权

openlayers 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

地图库讲起来好像也没有那么难，就是一系列图片加载、矢量的绘制。但是实际在遇到某些问题时，比如火星坐标系，比如任意一个地图服务怎么加载，都是一脸懵，所以从底层来自己做一做，更能理解清楚原理。

第一章尽量简单，就是加载底图的第一级别，也就是通常的18级别。

实现原理:

通过ajax向服务器请求对应的图片，显示在我们声明的div中。

由于js也不是太熟悉，所以用了很笨拙的方法，设置div的backgroundimgae来完成，但是OL在实现的时候是用的canvas来绘制的。日后再来改进，先走出第一步。为方便学习，本文直接请求了第一级，实际上，我们应该通过center，zoom的等级来计算需要请求的图片编号，然后再来拼接url。这个放在下一次再学习，因为会涉及到切片地图的原理什么的。本文虽然用了ajax，但是使用的数据却不是请求的，这也是待解决的问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
        #map {
            width: 100%;
            height: 800px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>

index.js的内容，

var Ajax={
    get: function(url, fn) {
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {
            // readyState == 4说明请求已完成
            if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
                // 从服务器获得数据
                fn.call(this, xhr.response);
            }
        };
        xhr.send();
    },
    // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function (url, data, fn) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
                fn.call(this, xhr.responseText);
            }
        };
        xhr.send(data);
    }
}
function adptDiv(data) {
    var binaryData = [];
    binaryData.push(data);
    var div=document.getElementById("map")
    div.style.backgroundImage=  "url(https://c.tile.openstreetmap.org/0/0/0.png)"
}
function Map(divid){
    Ajax.get("https://c.tile.openstreetmap.org/0/0/0.png",adptDiv)

}
var map=new Map("map")

A873054267

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webgis原理剖析系列-以openlayers为例 -01 第一张地图

地图库讲起来好像也没有那么难，就是一系列图片加载、矢量的绘制。但是实际在遇到某些问题时，比如火星坐标系，比如任意一个地图服务怎么加载，都是一脸懵，所以从底层来自己做一做，更能理解清楚原理。第一章尽量简单，就是加载底图的第一级别，也就是通常的18级别。实现原理:通过ajax向服务器请求对应的图片，显示在我们声明的div中。由于js也不是太熟悉，所以用了很笨拙的方法，设置div的bac...
复制链接

扫一扫