零基础上手WebGIS+智慧校园实例（长期更新#3）【html by js】

最新推荐文章于 2024-09-12 18:22:06 发布

Koishi_TvT

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量482

点赞数 12

文章标签： html javascript swift eclipse 学习前端开发语言

本文链接：https://blog.csdn.net/Asuna666w/article/details/142004160

版权

请点个赞+收藏+关注支持一下博主喵！！！

明天博主将展示咱学的css3+html5设计出来的终极无敌成果！！ (ૢ˃ꌂ˂⁎)

之后代码+资料全部发到github里，希望大家能关注一下咱的Github

继续上篇博客：：：：：：：：：：：：：：：：：：：：：：：：：：：：

19. WebGIS矢量图形的绘制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图参数</title>
    <!-- 一，引入资源 -->
    <script
        type="text/javascript">
        window._AMapSecurityconfig = {
            securityJsCode:'f00a9ad0aa34cb73b582ee0639112578',
    }
    </script>
    <script
        type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"
    ></script>
    <!-- 三，创建地图样式 -->
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 二，创建地图容器 -->
    <div id="container"></div>
    <!-- 四，加载地图 -->
    <script>
        // 声明一个变量    (这里的所有逗号都必须打
        var map = new AMap.Map('container', {
            center: [115.8, 28.7],  // 1.设置地图中心的经纬度
            zoom: 18, // 2.地图的缩放比例(3~20)
        })

        // 1. 折线Polyline（句末的分号可打也可不打

        // (1)配置折线路径 (里面的逗号必须大

        var path = [
            new AMap.LngLat(115.800225, 28.700167),
            new AMap.LngLat(115.800091, 28.69926),
            new AMap.LngLat(115.800546, 28.699099),
            new AMap.LngLat(115.800223, 28.698503),
        ]
        
        // (2)创建折线Polyline实例（里面的逗号必须打

        var polyline = new AMap.Polyline({
            path: path, // 路径为上面写的四个点路径命名为path
            strokeWeight: 2, // 线条宽度
            strokeColor: 'red', // 线条颜色
            lineJoin: 'round', // 折线拐点连接处样式
        })

        // (3)将折线添加到地图实例

        map.add(polyline)

        // (4)移除一条已创建的折线

        // map.remove(polyline)

        // (5)一次性移除多条已创建的折线

        // var polylines = [polyline1, polyline2, polyline3]
        // map.remove(polylines)

        // (6)显示/隐藏 一条已创建的Polyline: 格式:自己命名的一个Polyline.show()
        
        //polyline.show()   
        //polyline.remove()


        // 2. 多边形Polygon

        // 多边形轮廓线的节点坐标数组....

        var path1 = [[
            new AMap.LngLat(115.799622, 28.699412),
            new AMap.LngLat(115.799466, 28.698908),
            new AMap.LngLat(115.798376, 28.698956),
            new AMap.LngLat(115.798296, 28.699698),
        ], [
            new AMap.LngLat(115.798669, 28.69939),
            new AMap.LngLat(115.798662, 28.699238),
            new AMap.LngLat(115.799013, 28.699228),
            new AMap.LngLat(115.799032, 28.699384),
        ]]

        var polygon = new AMap.Polygon({
            path: path1,
            fillColor: '#fff',
            strokeWeight: 2,
            strokeColor: 'red',
        })

        map.add(polygon)

        // 将覆盖物调整到合适视野: 方法会根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别

        map.setFitView([polygon])

        // 给Polygon添加事件

        //鼠标移入事件
        polygon.on('mouseover', () => {
            polygon.setOptions({
                //修改多边形属性的方法
                fillOpacity: 0.7, //多边形填充透明度
                fillColor: '#7bccc4',
            })
        })

        //鼠标移出事件
        polygon.on('mouseout', () => {
            polygon.setOptions({
                fillOpacity: 1,
                fillColor: '#fff',
            })
        })


        // 3. 圆形Circle
        
        // (1)设置圆心位置

        var center = new AMap.LngLat(115.798962, 28.70036)

        // (2)设置圆的半径大小
        
        var radius = 100

        // (3) 创建圆形Circle实例

        var circle = new AMap.Circle({
            center: center, //圆心
            radius: radius, //半径
            borderWeight: 3, //描边的宽度
            strokeColor: '#FF33FF', //轮廓线颜色
            strokeOpacity: 1, //轮廓线透明度
            strokeWeight: 6, //轮廓线宽度
            fillOpacity: 0.4, //圆形填充透明度
            strokeStyle: 'dashed', //轮廓线样式
            strokeDasharray: [10, 10], //勾勒形状轮廓的虚线和间隙的样式，30代表线段长度 10代表间隙长度
            fillColor: '#1791fc', //圆形填充颜色
            zIndex: 50, //圆形的叠加顺序
        })

        map.add(circle)

        map.setFitView([ circle ])


        // 4. 矩形Rectangle实例

        // (1)设置矩形范围，由西南和东北的经纬度坐标组成的范围: ps矩形经纬度坐标点必须是左下、右上的顺序。

        var southwest = new AMap.LngLat(115.800657, 28.700588) //西南角的经纬度坐标
        var northeast = new AMap.LngLat(115.8011, 28.699649) //东北角的经纬度坐标
        var bounds = new AMap.Bounds(southwest, northeast)//创建一个地物对象的经纬度矩形范围

        // (2)创建矩形Rectangle实例

        var rectangle = new AMap.Rectangle({
            bounds: bounds, //矩形的范围
            strokeColor: 'red',//轮廓线颜色
            strokeWeight: 6, //轮廓线宽度
            strokeOpacity: 0.5, //轮廓线透明度
            strokeStyle: 'dashed', //轮廓线样式，dashed 虚线，还支持 solid 实线
            strokeDasharray: [30, 10], //勾勒形状轮廓的虚线和间隙的样式，30代表线段长度 10代表间隙长度
            fillColor: 'blue', //矩形填充颜色
            fillOpacity: 0.5, //矩形填充透明度
            cursor: 'pointer', //指定鼠标悬停时的鼠标样式
            zIndex: 50, //矩形在地图上的层级
        })

        map.add(rectangle)

        map.setFitView([rectangle])

        // (3)给Rectangle添加事件

        //鼠标移入事件
        rectangle.on('mouseover', () => {
            rectangle.setOptions({ //修改矩形属性的方法
                fillOpacity: 0.7,
                fillColor: '#7bccc4',
            })
        })

        //鼠标移出事件
        rectangle.on('mouseout', () => {
            rectangle.setOptions({
                fillOpacity: 0.5,
                fillColor: 'blue',
            })
        })

        // 编辑器示例:  eg.引入矩形编辑器插件, 其他的同理将Rectangle等效替换即可
        map.plugin(['AMap.RectangleEditor'], function () {
        //实例化矩形编辑器，传入地图实例和要进行编辑的矩形实例
        var rectangleEditor = new AMap.RectangleEditor(map, rectangle)
        //开启编辑模式, 关闭用close即可
        rectangleEditor.open()
        rectangleEditor.close()
        })
    </script>
</body>
</html>

效果如下：

就得到了几个好看的图形，并且咱们配置了功能：当鼠标光标停留在图形的范围里，图形内部会变为自己设置的颜色（通常设置的比较深），在范围外，图形就只保留自己设置的颜色（通常设置的比较透）

20. WebGIS计算距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图参数</title>
    <!-- 一，引入资源 -->
    <script
        type="text/javascript">
        window._AMapSecurityconfig = {
            securityJsCode:'f00a9ad0aa34cb73b582ee0639112578',
    }
    </script>
    <script
        type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=af0e06deee299b6b0930c68a4b98be0b"
    ></script>
    <!-- 三，创建地图样式 -->
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 二，创建地图容器 -->
    <div id="container"></div>
    <!-- 四，加载地图 -->
    <script>
        // 声明一个变量
        var map = new AMap.Map('container', {
            center: [114.3, 30.6],  // 1.设置地图中心的经纬度
            zoom: 12, // 2.地图的缩放比例(3~20)
        })
        // 1. 创建两个点(设置可以拖动)
        var m1 = new AMap.Marker({
            map: map, // 将m1这个点添加到地图中
            draggable: true, // 配置该点可以拖动
            position: new AMap.LngLat(114.255025, 30.621275),
        })
        var m2 = new AMap.Marker({
            map: map, // 将m2这个点添加到地图中
            draggable: true, // 配置该点可以拖动
            position: new AMap.LngLat(114.334332, 30.579608),
        })
        // 让地图根据覆盖物调整地图显示区域
        map.setFitView()
        // 2, 准备一条线
        var line = new AMap.Polyline({
            strokeColor: '#80d8ff', //描边的颜色
            isOutline: true, //包含轮廓
            outerlineColor: 'white', //轮廓颜色
        })
        line.setMap(map)
        // 3. 准备文本
        var text = new AMap.Text({
            text: '',
            style: {
                'background-color': '#29b6f6',
                'border-color': '#e1f5fe',
                'font-size': '16px',
            }
        })
        text.setMap(map)
        // 4. 计算
        function compute() {
            //得到m1和m2的经纬度
            var p1 = m1.getPosition()
            var p2 = m2.getPosition()

            // 希望text文本显示在这个经纬度的中间
            var textPos = p1.divideBy(2).add(p2.divideBy(2)) // (p1+p2)/2

            var distance = Math.round(p1.distance(p2))
            var path = [p1, p2]
            line.setPath(path) // 绘制线， 根据p1，p2起始点和终点的坐标

            text.setText('距离为: ' + distance + '米')
            text.setPosition(textPos)
        }
        compute()
        m1.on('dragging', compute)
        m2.on('dragging', compute)
    </script>
</body>
</html>

效果如下：

这两个坐标为我们在代码里主动“放置”的，然后计算他们的距离。。。

以下便是智慧校园-三个实例

1. 地图显示成功

<!DOCTYPE html>
<html lang="en">

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

<body>
    <!-- 创建地图容器 -->
    <div id="container"></div>
    <div class="info">点击地图标注热门地点</div>

    <script>
        //创建地图对象
        var map = new AMap.Map('container', {
            center: [115.827196, 28.72268],
            zoom: 16,
            viewMode: '3D',
            pitch: 45,
        })

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

        // 监听地图的点击事件
        map.on('click', function (e) { //e为点击的事件对象
            var marker = new AMap.Marker({
                position: e.lnglat,
            })

            map.add(marker)
        })
    </script>
</body>

</html>

其中我们使用引入包的方法来在外源设计css和js算法设置，这样使得其具有了类似于java类的功能，非常nice！！！！！！！！！！！！！！！！！！！！！！

css的设计*：

html,
body,
#container {
    width: 100%;
    height: 100%;
}

难点：：js的设计*：

// (封装的数据读写函数: 实现数据的持久化)
// 从localstorage中读取数据
function getData() {
    // 如果本地localstorage中不存在数据(所以用取反)
    if (!localStorage.getItem('geojson')) {
        localStorage.setItem('geojson', '[]') // 空数组
    }

    return JSON.parse(localStorage.getItem('geojson'))
}

// 将数据保存到localstorage中
function saveData(data) {
    localStorage.setItem('geojson', JSON.stringify(data))
}

它保证了数据的持久化，使得多个.html能和并于一个网页

2. 数据持久化成功

<!DOCTYPE html>
<html lang="en">

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

<body>
    <!-- 创建地图容器 -->
    <div id="container"></div>
    <div class="info">点击地图标注热门地点</div>

    <script>
        //创建地图对象
        var map = new AMap.Map('container', {
            center: [115.827196, 28.72268],
            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())

            }
        )

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

        // 如果存在数据， 那么才导入数据 (逻辑判断)
        if (JSON.stringify(getData()) != '[]') { 
            // 导入数据
            geojson.importData(getData())
        }

        map.add(geojson)

        //console.log(geojson) （两个console语句：可以康康并对比 点生成前后的geojson的内容

        // 监听地图的点击事件
        map.on('click', function (e) { //e为点击的事件对象
            var marker = new AMap.Marker({
                position: e.lnglat,
            })

            // 不再使用map.add(marker)
            // 而是通过geojson对象来管理覆盖物
            geojson.addOverlay(marker)

            //console.log(geojson) （两个console语句：可以康康并对比 点生成前后的geojson的内容

            // 保存数据(toGeoJSON函数的作用：将geojson对象转换成标准的GeoJSON格式对象)
            saveData(geojson.toGeoJSON())
        })
    </script>
</body>

</html>

3. 实现打卡显示

<!DOCTYPE html>
<html lang="en">

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

<body>
    <!-- 创建地图容器 -->
    <div id="container"></div>
    <div class="info">点击地图标注热门地点, 点击地点可以打卡</div>

    <script>
        //创建地图对象
        var map = new AMap.Map('container', {
            center: [117.96611, 28.43111],
            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())

            }
        )

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

        // 如果存在数据， 那么才导入数据 (逻辑判断)
        if (JSON.stringify(getData()) != '[]') {
            // 导入数据
            geojson.importData(getData())
            // 恢复旧数据的点击事件
            geojson.eachOverlay(function (item) {
                item.on('click', function (e) {
                    // 让点击的marker对象的click属性+1
                    var ext = item.getExtData()
                    // ext._geoJsonProperties.click = ext._geoJsonProperties.click + 1
                    // var click = ext._geoJsonProperties.click
                    var click = ++ext._geoJsonProperties.click
                    //console.log('点击了' + click + '次')

                    // 使用消息提示框(Infowindow)显示,  锚点(anchor)
                var infowindow = new AMap.InfoWindow({
                    anchor: 'top-center',
                    content: `<div>打卡了${click}次</div>`,
                })

                // 显示(打卡信息窗口)
                infowindow.open(map, item.getPosition()) 

                    saveData(geojson.toGeoJSON())
                })
            })
        }

        map.add(geojson)

        //console.log(geojson) （两个console语句：可以康康并对比 点生成前后的geojson的内容

        // 监听地图的点击事件
        map.on('click', function (e) { //e为点击的事件对象
            var marker = new AMap.Marker({
                position: e.lnglat,
                // 给marker对象添加自定义属性
                extData: {
                    _geoJsonProperties: {
                        gid: geojson.getOverlays().length + 1,
                        click: 0,
                    },
                },
            })

            // 使用覆盖物的点击事件
            marker.on('click', function (e) {
                //console.log(e.lnglat, '新的数据点击了')
                // 让点击的marker对象的click属性+1
                var ext = marker.getExtData()
                // ext._geoJsonProperties.click = ext._geoJsonProperties.click + 1
                // var click = ext._geoJsonProperties.click
                var click = ++ext._geoJsonProperties.click

                // 打印在控制台：console.log('点击了' + click + '次')

                // 使用消息提示框(Infowindow)显示,  锚点(anchor)
                var infowindow = new AMap.InfoWindow({
                    anchor: 'top-center',
                    content: `<div>打卡了${click}次</div>`,
                })

                // 显示(打卡信息窗口)
                infowindow.open(map, marker.getPosition())

                saveData(geojson.toGeoJSON())
            })

            // 不再使用map.add(marker)
            // 而是通过geojson对象来管理覆盖物
            geojson.addOverlay(marker)

            //console.log(geojson) （两个console语句：可以康康并对比 点生成前后的geojson的内容

            // 保存数据(toGeoJSON函数的作用：将geojson对象转换成标准的GeoJSON格式对象)
            saveData(geojson.toGeoJSON())
        })
    </script>
</body>

</html>

你就能标记点，点击点进行打卡，并且会记录于此地图中。

F12检查-应用程序：

这里就能看到我们设置的所有打卡点和打卡次数了('click')

Koishi_TvT

关注

12
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
零基础上手WebGIS+智慧校园实例（长期更新#3）【html by js】

明天博主将展示咱学的css3+html5设计出来的终极无敌成果！！(ૢ˃ꌂ˂⁎)之后代码+资料全部发到github里，希望大家能关注一下咱的Github继续上篇博客。
复制链接

扫一扫