WebGIS第九课：智慧校园项目（1）

最新推荐文章于 2024-05-14 13:32:59 发布

Intimes

最新推荐文章于 2024-05-14 13:32:59 发布

阅读量1.4k

点赞数 4

文章标签： GeoJSON 地图持久化标记功能 localStorage 数据管理

本文链接：https://blog.csdn.net/zjjsd195/article/details/124514340

版权

数据持久化，我们之前做的都是临时数据，为了很好的存储地理数据，我们使用GeoJSON格式。

# 1 引入资源创建地图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧校园</title>
    <!-- 引入资源 -->
    <!-- css样式 -->
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入js资源 -->
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'111111',
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=111111"></script> 
</head>
<body>
    <!-- 创建地图容器 -->
    <div id="container"></div> 
    <script>
        //创建地图对象
        var map = new AMap.Map('container',{
            center:[114.402672, 30.518987],
            zoom:16,
            viewMode:'3D',
            pitch:45,
        })
    </script>  
</body>
</html>

# 2 使用控件

代码如下：

        // 使用控件
        AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.ControlBar'],function(){
            map.addControl(new AMap.ToolBar())
            map.addControl(new AMap.Scale())
            map.addControl(new AMap.ControlBar())
        })

这都是复习了，前面都操作过。

# 3 标记功能

这里使用高德的css样式来创建一个div控件：

    <div class="info">点击地图标注热门地点</div>

之后再添加地图点击监听事件：

        // 监听地图点击事件
        map.on('click',function(e){
            // 创建标记
            var marker = new AMap.Marker({
                position:e.lnglat,

            })
            // 添加标记图层
            map.add(marker)
        })

效果如下：

右上角就有了交互控件，且可以用鼠标左键单击添加标记。这里交互功能还没有实现，只是先放上控件。

# 4 数据持久化

使用GeoJSON在本地存储中记录数据。代码如下：

// 从local storage中读取数据
function getData(){
    //判断本地local storage中不存在数据
    if(!localStorage.getItem('geojson')){
        localStorage.setItem('geojson','[]')
    }
    return JSON.parse( localStorage.getItem('geojson') )
}


// 从local storage中写数据
function saveData(data){
    localStorage.setItem('geojson',JSON.stringify(data))
}

实现了读入数据和写数据的功能，定义全局变量：

// 定义全局变量
        var geojson = new AMap.GeoJSON({
            geoJSON: null,
        })

        // 导入数据
        if(JSON.stringify(getData()) != '[]'){
            //有数据的时候才导入
            geojson.importData(getData())
        }
        
        map.add(geojson)

        // 监听地图点击事件
        map.on('click',function(e){
            // 创建标记
            var marker = new AMap.Marker({
                position:e.lnglat,
            })

            // 通过geojson对象管理覆盖物
            geojson.addOverlay(marker)
            //console.log(geojson)
            saveData(geojson.toGeoJSON())
            // 添加标记图层
            // map.add(marker)

        })

在没有数据时，geojson为null，之后点击添加数据，保存，之后就会实现数据的保存。

效果图：

PS 这里有两个坑，第1是会报错，不能用geojson，这时需要在引入时也添加geojson和plugin，

第2是会说Cannot read properties of null ，查了很久，发现是getData函数写错了。

另外还有存不进数的问题，是setData自变量忘了写，查了几个小时错误，累啊。

Intimes

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
1
评论
WebGIS第九课：智慧校园项目（1）

数据持久化，我们之前做的都是临时数据，为了很好的存储地理数据，我们使用GeoJSON格式。# 1 引入资源创建地图代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
复制链接

扫一扫