webGIS 之 智慧校园案例

这篇具有很好参考价值的文章主要介绍了webGIS 之 智慧校园案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.引入资源创建地图

//index.html
<!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: 'code',
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"></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>
//css/index.css
html,
body,
#container {
    width: 100%;
    height: 100%;
}

2.使用控件

webgis的智慧校园,WebGIS,webgl

 // 使⽤控件
        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.标记功能

右上⻆就有了交互控件,且可以⽤⿏标左键单击添加标记。
webgis的智慧校园,WebGIS,webgl

      //使⽤⾼德的css样式来创建⼀个div控件
      <div class="info">点击地图标注热⻔地点</div>
       // 添加监听地图点击事件
        map.on('click',function(e){
            // 创建标记
            var marker = new AMap.Marker({
                position:e.lnglat,
           })
            // 添加标记图层
            map.add(marker)
       })

4.使⽤GeoJSON数据持久化

webgis的智慧校园,WebGIS,webgl

使⽤GeoJSON在本地存储中记录数据
首页我们需要创建一个store.js文件用来写读取和存入的函数

// 从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))
}

在index .html引入
<script src="./js/store.js"></script>

<!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: 'code',
        }
    </script>
    <script src="./js/store.js"></script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=key"></script>
</head>

<body>
    <!-- 创建地图容器 -->
    <div id="container"></div>
    <div class="info">点击地图标注热⻔地点</div>
    <script>
        //创建地图对象
        var map = new AMap.Map('container', {
            center: [114.402672, 30.518987],
            zoom: 16,
            viewMode: '3D',
            pitch: 45,
        })
        // 使⽤控件
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar','AMap.GeoJSON'], function () {
            map.addControl(new AMap.ToolBar())
            map.addControl(new AMap.Scale())
            map.addControl(new AMap.ControlBar())
        })
        //定义全局变量
        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())
        })
        
    </script>
</body>
</html>

5.实现打卡

webgis的智慧校园,WebGIS,webgl

实现思路:使用marker覆盖物的点击事件,导入数据的地方恢复旧数据的点击事件

<!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: 'code',
        }
    </script>
    <script src="./js/store.js"></script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=key"></script>
</head>

<body>
    <!-- 创建地图容器 -->
    <div id="container"></div>
    <div class="info">点击地图标注热⻔地点,点击地点可以打卡</div>
    <script>
        //创建地图对象
        var map = new AMap.Map('container', {
            center: [114.402672, 30.518987],
            zoom: 16,
            viewMode: '3D',
            pitch: 45,
        })
        // 使⽤控件
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.GeoJSON'], function () {
            map.addControl(new AMap.ToolBar())
            map.addControl(new AMap.Scale())
            map.addControl(new AMap.ControlBar())
        })
        // 创建一个 Icon
        var startIcon = new AMap.Icon({
            // 图标的取图地址
            image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        });
        //定义全局变量
        var geojson = new AMap.GeoJSON({
            geoJSON: null,
        })
        // 导⼊数据
        if (JSON.stringify(getData()) != '[]') {
            //有数据的时候才导⼊
            geojson.importData(getData())
            geojson.eachOverlay(function (item) {
                item.on('click', function (e) {
                    var ext = item.getExtData()
                    var click = ++ext._geoJsonProperties.click
                })
            })
            saveData(geojson.toGeoJSON())
        }
        map.add(geojson)
        // 监听地图点击事件
        map.on('click', function (e) {
            // 创建标记
            var marker = new AMap.Marker({
                position: e.lnglat,
                icon: startIcon,
                //固定写法
                extData: {
                    _geoJsonProperties: {
                        gid: geojson.getOverlays().length + 1,
                        click: 0,
                    },
                }
            })
            marker.on('click', function (e) {
                //固定写法
                var ext = marker.getExtData()
                var click = ++ext._geoJsonProperties.click
                saveData(geojson.toGeoJSON())
                // 使⽤消息提示框
                var infowindow = new AMap.InfoWindow({
                    anchor: 'top-center',//模板字符串
                    content: `<div>打卡了${click}次</div>`,
                })
                //打开信息框在标记的位置
                infowindow.open(map, marker.getPosition())
            })
            // 通过geojson对象管理覆盖物
            geojson.addOverlay(marker)
            //console.log(geojson)
            saveData(geojson.toGeoJSON())
            // 添加标记图层
            // map.add(marker)
        })

    </script>
</body>

</html>

6.推荐浏览路线

webgis的智慧校园,WebGIS,webgl文章来源地址https://www.toymoban.com/news/detail-859006.html

<!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: 'code',
        }
    </script>
    <script src="./js/store.js"></script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=key"></script>
</head>

<body>
    <!-- 创建地图容器 -->
    <div id="container"></div>
    <div class="info">点击地图标注热⻔地点,点击地点可以打卡</div>
    <div class="input-card" style="width:10rem;">
        <h4>推荐游览路线</h4>
        <div class="input-item">
            <button class="btn" onclick="startAnimation()">开始动画
            </button>
        </div>
    </div>
    <script>
        //创建地图对象
        var map = new AMap.Map('container', {
            center: [114.402672, 30.518987],
            zoom: 16,
            viewMode: '3D',
            pitch: 45,
        })
        // 使⽤控件
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.GeoJSON','AMap.MoveAnimation'], function () {
            map.addControl(new AMap.ToolBar())
            map.addControl(new AMap.Scale())
            map.addControl(new AMap.ControlBar())
            // map.addControl(new AMap.MoveAnimation())
        })
        //定义全局变量
        var geojson = new AMap.GeoJSON({
            geoJSON: null,
        })
        // 导⼊数据
        if (JSON.stringify(getData()) != '[]') {
            //有数据的时候才导⼊
            geojson.importData(getData())
            geojson.eachOverlay(function (item) {
                item.on('click', function (e) {
                    var ext = item.getExtData()
                    var click = ++ext._geoJsonProperties.click
                })
            })
            saveData(geojson.toGeoJSON())
        }
        map.add(geojson)
        // 监听地图点击事件
        map.on('click', function (e) {
            // 创建标记
            var marker = new AMap.Marker({
                position: e.lnglat,
                extData: {
                    _geoJsonProperties: {
                        gid: geojson.getOverlays().length + 1,
                        click: 0,
                    },
                }
            })
            marker.on('click', function (e) {
                var ext = marker.getExtData()
                var click = ++ext._geoJsonProperties.click
                saveData(geojson.toGeoJSON())
                // 使⽤消息提示框
                var infowindow = new AMap.InfoWindow({
                    anchor: 'top-center',//模板字符串
                    content: `<div>打卡了${click}次</div>`,
                })
                //打开信息框在标记的位置
                infowindow.open(map, marker.getPosition())
            })
            // 通过geojson对象管理覆盖物
            geojson.addOverlay(marker)
            //console.log(geojson)
            saveData(geojson.toGeoJSON())
            // 添加标记图层
            // map.add(marker)
        })
        function startAnimation() {
            AMap.plugin('AMap.Driving', function () {
                var driving = new AMap.Driving({
                    map: map,
                    policy: AMap.DrivingPolicy.LEAST_TIME,//驾⻋策略
                })
                //设置起点和终点
                var start = new AMap.LngLat(114.400984, 30.518653)
                var end = new AMap.LngLat(114.404755, 30.523851)
                // 创建途经点
                var opts = {
                    waypoints: [],
                }
                geojson.eachOverlay(function (item) {//拿到每⼀个点
                    opts.waypoints.push(item.getPosition())
                })
                driving.search(start, end, opts, function (status, result) {
                //result结果就会返回当前轨迹对象,其中包含了导航信息
                    var lineArr = []
                    result.routes[0].steps.forEach(function (item) {
                        lineArr.push(...item.path)
                    });
                    if (status == 'complete') {
                        var marker = new AMap.Marker({
                            map: map,
                            position: start,
                            icon: 'https://webapi.amap.com/images/car.png',
                            offset: new AMap.Pixel(-26 ,- 13),
                            autoRotation: true,
                            angle: -180,
                        })
                        var passedPolyline = new AMap.Polyline({
                            map: map,
                            strokeColor: '#AF5',//描边的绿⾊
                            strokeWeight: 6,//线宽
                        })
                        marker.on('moving', function (e) {
                            passedPolyline.setPath(e.passedPath)
                        })
                        map.setFitView()
                        marker.moveAlong(lineArr, {
                            duration: 500,
                            autoRotation: true,
                        })
                    } else {
                    }
                })
            })
        }

    </script>
</body>
</html>

到了这里,关于webGIS 之 智慧校园案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • webgis(四)

    关于如何添加自定义底图可以看其他大佬的文章: https://cloud.tencent.com/developer/article/2340544 https://blog.csdn.net/weixin_49546561/article/details/121699225 https://zhuanlan.zhihu.com/p/413366752 https://blog.csdn.net/weixin_45532870/article/details/132191366 或者直接去官方文档查阅: https://developers.arcgis.com/javascr

    2024年02月21日
    浏览(23)
  • WebGIS外包开发流程

    WebGIS开发流程需要综合考虑前端和后端开发、地理信息数据处理、用户需求和安全性等多个方面。成功的WebGIS应用程序需要不断地进行更新和维护,以适应变化的需求和技术。WebGIS开发是一个复杂的过程,通常包括以下主要步骤。北京木奇移动技术有限公司,专业的软件外包

    2024年02月09日
    浏览(34)
  • 前端常用的地图框架(webGIS)

    1. Leaflet Leaflet 是最著名的前端地图可视化库,它开源、体积小、结构清晰、简单易用。 2. Mapbox GL JS Mapbox GL JS 是目前最新潮的前端地图库,它的矢量压缩、动态样式和三维性能令人印象深刻。它本身是开源的,但一般依赖于Mapbox公司提供的底图服务。 3. ArcGIS API for JS ArcGIS

    2024年02月04日
    浏览(29)
  • WebGIS 信息系统-Element项目实战

    在项目的根目录中,首先按下 Shift+鼠标右键,在弹出的右键菜单中选择“在此处打开命令行窗口”;然后在命令行窗口中执行命令: 即可开始下载并安装 Element。成功安装 Element 后,打开 package.json 文件,可发现“dependencies”键所对应的值包含element-ui,如图1-11所示。 图1-1

    2024年02月13日
    浏览(32)
  • golang实现webgis后端开发

    目录 前言 二、实现步骤 1.postgis数据库和model的绑定 2.将pg库中的要素转换为geojson (1)几何定义 (2)将wkb解析为几何类型 (3)定义geojson类型 (4)数据转换 (5)数据返回  2.前端传入的geojson储存到数据库 3、其他功能实现 总结         停更了接近一个月都在研究一门新语言gola

    2024年02月08日
    浏览(49)
  • Element+Vue+OpenLayers webgis实战

    以 ,通过OpenLayers将遥感影像加载到浏览器中,如图1-25所示。 单击“Button”按钮可弹出一个对话框,该对话框的内容为“Hello world”,如图1-26所示。 图1-26所示对话框的实现代码如下: Element组件内部默认使用的是中文,若希望使用其他语言,则需要进行多语言设置,通过

    2024年02月17日
    浏览(45)
  • [Webgis][地图加载]OpenLayer加载多种形式地图

    描述在前 书接上回,作为打工人,学习还是要以项目为导向。由于领导想看卫星地图显示,这次我们记录下,如何使用OpenLayer 加载显示常见的几种二维地图,包括普通地图,卫星地图,和卫星路网混合地图。还是以高德地图为例,下面我们直接上代码,从实例入手学习。 代

    2024年02月01日
    浏览(41)
  • WebGIS瓦片地图添加水印(矢量瓦片、栅格瓦片)

       水印 能为收到版权信息产品归属提供有力的证据, 并能够监视被保护数据的传播, 真伪鉴别以及非法拷贝控制等.在现今流行的线上地图同样需要水印技术, 保护地图数据.本文将介绍如何实现瓦片地图水印添加, 包括栅格瓦片、矢量瓦片.   在探索过程中, 参考了《前端水

    2024年02月08日
    浏览(42)
  • 基于Leaflet的Webgis经纬网格生成实践

    目录 前言 一、Leaflet.Graticule 1、参数说明 二、集成使用 1、新建网页模板 2、初始化地图对象 3、运行效果 三、源码调用分析 1、参数注入  2、经纬网构建 总结          众所周知,在地球仪上或地图上,经线和纬线相互交织,就构成经纬网。利用它上面标注的经度和纬度,

    2024年02月04日
    浏览(38)
  • 基于Cesium,探索实景三维webgis的实现过程

    如题,基于Cesium,探索三维webgis的实现思路,个人总结,如有错误,欢迎指正 目录 目标概述: 成果预览: 数据和软件准备:  实现过程: 1、搭建三维场景页面 2、Cesium对三维要素的基本操作 3、加载三维建筑数据         3.1 准备3D tiles数据          3.1.1 方法一:其他三

    2024年02月05日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包