git地理位置信息系统

最新推荐文章于 2024-01-09 03:49:45 发布
最新推荐文章于 2024-01-09 03:49:45 发布
阅读量421 收藏
点赞数
分类专栏： 技术笔记 文章标签： gis 全国地理信息系统 geoJson下载 可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014399368/article/details/117283559
版权
本文介绍了如何利用Bigemap GIS插件展示行政区域、迁移特性和Echarts数据表格。项目以广东省地图为例，集成谷歌、百度等地图资源，通过geoJson数据加载全国地图，并实现地图上的特效和Echart图表展示，提供了丰富的地图样式和专题地图选项，但开发文档不够友好。
摘要由CSDN通过智能技术生成

git地理位置信息系统

最近调研了一下gis系统的开发方式，发现bigmap这个插件相对来说还是挺好用的。这是官网的介绍：IGEMAP集合了谷歌地图、百度地图、高德地图、OpenStreet等50多种国内外优质的地图资源，主要包括卫星地图、电子地图、地形图等。同时我们也提供了全球矢量地图数据下载、设计。还包括海图、地质图、2.5D地图、地表覆盖以及人口、景观、植被等各种专题地图。

资源确实很丰富，样例也挺不错，缺陷就是开发文档写的相当不友好。。。

这次调研的需求还是很简单的，显示行政区域，显示迁移特显，支持echart数据表格的显示。本项目以广东省地图为示例，根据文末的geoJson下载地址可下载全国的geoJson数据。

效果图：

gis效果图

项目代码

<!DOCTYPE html>

<html>
<head>
    <meta charset='UTF-8'/>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <link href='./bigemap.css' rel='stylesheet'/>
    <script src='./bigemap.js'></script>
    <script src='./440000.json'></script>    //广东省数据
    <script src="./echarts.js"></script>
    <script src="./superMap.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        .pulse-icon {
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            background-color: #2f8;
            position: relative;
            //margin-left: -5px;
           box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
           // background-image: url('./cabin.png');
        }

        .pulse-icon:after {
            content: "";
            box-shadow: 0 0 6px 2px #2f8;
            animation: pulsate 1s ease-out;
            animation-iteration-count: infinite;
            animation-delay: 1.1s;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            height: 300%;
            width: 300%;
            animation: pulsate 2s infinite;
            position: absolute;
            margin: -100% 0 0 -100%;
        }

        @keyframes pulsate {
            0% {
                transform: scale(0.1, 0.1);
                opacity: 0;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                filter: alpha(opacity=0);
            }
            50% {
                opacity: 1;
                -ms-filter: none;
                filter: none;
            }
            100% {
                transform: scale(1.2, 1.2);
                opacity: 0;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                filter: alpha(opacity=0);
            }
        }

        .controlDiv{
            position: absolute;
            z-index: 99;
        }
    </style>
    <title>bigmap</title>
</head>
<body>
<div id='mapDiv'>
        <div class='controlDiv'>
            <button onclick='toggleName()'>切换地名</button>
        </div>
        <div id='map'></div>
         <div id="table">
          <el-tag style="color:red" >{{title}}</el-tag>
        </div>
</div>

<script>
    let showName = true;
   function toggleName(){
         showName = !showName;
         console.log(showName)
        document.querySelector('.bigemap-pane.bigemap-tooltip-pane').style.display = showName ? 'block' :'none';
       
   }
   setTimeout(()=>{
     document.querySelector('.bigemap-control-container').remove();
   })

    var cityObj = {
        '佛山市':{
            value:3
        },
        '广州市':{
            value:3,
            to:{
                '佛山市':{value:1},	//广州到佛山的迁移特效数据
                '梅州市':{value:22},	//广州到梅州的迁移特效数据
                '湛江市':{}	//广州到湛江的迁移特效数据
            }
        },
        '汕头市':{
            value:3
        },
        '湛江市':{

        },
        '清远市':{

        },
        '茂名市':{},
        '梅州市':{value:22},
    }
    var cityCenterPos = {};

    BM.Config.HTTP_URL = ''
      BM = window.BM;
     // BM.Config.HTTP_URL = "http://www.bigemap.com:9000";
     // 在ID为map的元素中实例化一个地图，并设置地图的ID号为 bigemap.googlemap-streets，ID号程序自动生成，无需手动配置，并设置地图的投影为百度地图 ，中心点，默认的级别和显示级别控件
      map = BM.map("map", "bigemap.googlemap-streets", {
        center: [23.125178,113.280637],	//中心点坐标
        zoom: 7,	//缩放级别
        /*minZoom:7,
        maxZoom:7,*/
        zoomControl: false,	//开启缩放控制
        //attributionControl:false,
        dragging:false,	//是否可拖动
        doubleClickZoom:false,	//双击缩放控制
        scrollWheelZoom:false,	//鼠标滚轮缩放控制
      });

      let curCity,desCityName,desCityObj;
      var data = jsonData;
        var all = [    //随机颜色填充地区
          "#853f04",
          "#d1923f",
          "#375830",
          "#4b2f3d",
          "#840228",
          "#c88400",
          "#27342b",
          "#402e4c",
          "#7a1723",
          "#c37e00",
          "#65c294",
          "#c77eb5",
          "#a03939",
          "#c37e00",
          "#73b9a2",
          "#ea66a6",
          "#8a2e3b",
          "#e0861a",
          "#72baa7",
          "#f173ac",
          "#8e453f",
          "#ffce7b",
          "#005344",
          "#fffffb",
          "#8f4b4a",
          "#fcaf17",
          "#d9d6c3",
          "#7bbfea",
          "#3e4145",
          "#8e3e1f",
          "#decb00",
          "#33a3dc",
          "#3c3645",
          "#f36c21",
          "#cbc547",
          "#228fbd",
          "#464547",
          "#b4532a",
          "#6e6b41",
          "#2468a2",
          "#130c0e",
          "#b7704f",
          "#596032",
          "#2570a1",
          "#281f1d",
          "#de773f",
          "#525f42",
          "#2585a6",
          "#2f271d",
          "#c99979",
          "#5f5d46",
          "#1b315e",
          "#1d1626",
        ];
        BM.geoJSON(data, {
          style: function () {
            return {
              color: "black",
              fillColor: all[Math.floor(Math.random() * all.length)],	//每个地区的填充颜色
              weight: 1,
              fillOpacity: 0.9,	//填充透明度
            };
          },
          onEachFeature: function (feature, layer) {
            feature.properties &&
              feature.properties.name &&
              layer.bindTooltip(feature.properties.name, {
                direction: "bottom",
                className: "my_tooltip",
                permanent: true,	//持久显示地名
              });

            curCity = feature.properties.name;
            if(cityCenterPos[curCity]){
                 cityCenterPos[curCity].position.push(feature.properties.centroid[0],feature.properties.centroid[1]);
            }else{
                cityCenterPos[curCity] = {
                    position:[feature.properties.centroid[0],feature.properties.centroid[1]]
                };
            }

              if(cityObj[curCity]){
                cityObj[curCity].position = [feature.properties.centroid[0],feature.properties.centroid[1]];
                if(cityObj[curCity].to){
                    for(let j in cityObj[curCity].to){
                        desCityObj = cityObj[curCity].to[j];

                        if(!cityCenterPos[j]){
                            cityCenterPos[j] = {
                                position:[],
                            };
                        }
                        desCityObj.position = cityCenterPos[j].position
                    }
                }
              }
          }
        }).addTo(map);


        //特效：发光点
        var myIcon = BM.divIcon({className: 'my-div-icon', html: '<div><span class="pulse-icon"></span></div>'});


        //echart
        var option = {
                legend: {
                    data: ['降雨量', '径流量'],
                    align: 'left'
                },
                toolbox: {
                    feature: {
                        magicType: {
                            type: ['stack', 'tiled']
                        },
                        saveAsImage: {
                            pixelRatio: 2
                        }
                    }
                },
                tooltip: {},
                xAxis: {
                    data: ['周一','周二','周三','周四','周五','周六','周日'],
                    silent: false,
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {},
                series: [{
                    name: '降雨量',
                    type: 'bar',
                    animationDelay: function (idx) {
                        return idx * 10;
                    }
                }, {
                    name: '径流量',
                    type: 'bar',
                    animationDelay: function (idx) {
                        return idx * 10 + 100;
                    }
                }],
                animationEasing: 'elasticOut',
                animationDelayUpdate: function (idx) {
                    return idx * 5;
                }
            };
        var div = BM.DomUtil.create('div');
        var chart = echarts.init(div, '', {
            width: 400,
            height: 180
        });
        chart.setOption(option);
       
        for(let i in cityObj){
                BM.marker([cityObj[i].position[1],cityObj[i].position[0]], {icon: myIcon})
                    .bindPopup(function () {
                    var city = i;
                    var data1 = [];
                    var data2 = [];
                    for (var i = 0; i < 7; i++) {
                        var data = Math.random().toFixed(2);
                        data1.push(data);
                        data2.push(data * (Math.random() + 1.5));
                    }
                    chart.setOption({
                        title: {
                            text: city,
                            subtext: '测试数据',
                        },
                        grid:{
                            height:80
                        },
                        series: [
                            {
                                name: 'cpu使用率',
                                data: data1
                            },
                            {
                                name:'内存使用率',
                                data: data2
                            }
                        ]
                    });

                  //  chart.getDom().children[0].style.height = '160px';
                    return chart.getDom();
                },{maxWidth:600,autoPan:false,keepInView:true,className:'pops-chart',direction:'auto'})
                .addTo(map);
        }
		
    //迁徙特效部分

    var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

    var convertDatas = function (data) {    //cityObj
        var res = [],
            item;
        for(let i in data){
            item = data[i];
           if(item.to){
                for(let j in item.to){
                    var fromCoord = i;
                    var toCoord = j;
                    res.push({
                        fromName: fromCoord,
                        toName: toCoord,
                        coords: [item.position, item.to[j].position]
                    });
                }
                
           }
        }
         return res;
    };


    var color = ['#a6c84c', '#ffa022', '#46bee9'];
    var series = [];
        series.push({   //虚线
               // name: ' Top10',
                type: 'lines',
                coordinateSystem: 'leaflet',
                zlevel: 1,
                effect: {
                    show: true,
                    period: 2,
                    trailLength: 0.7,
                    color: '#fff',
                    symbolSize: 3
                },
                lineStyle: {
                    normal: {
                        color: color[2],
                        width: 1,
                        curveness: 0.2
                    }
                },
               data: convertDatas(cityObj)
               // data: convertData(item[1])
            },
            {   //小箭头
               // name:' Top10',
                type: 'lines',
                coordinateSystem: 'leaflet',
                zlevel: 2,
                symbol: ['none', 'none'],
                symbolSize: 15,
                effect: {
                    show: true,
                    period: 2,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 5
                },
                lineStyle: {
                    normal: {
                        color: color[1],
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: convertDatas(cityObj)
            });

    option = {
        title: {
            text: '降雨量模型',
            subtext: '测试数据',
            textStyle:{
                color:'#f1f1f1',
                fontSize:25
            },
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        series: series
    };
    BM.supermap.echartsLayer(option).addTo(map);



</script>
<style >
    body{
        height: 100vh;
        background-size:100% 100%; 
        background-image: linear-gradient(gray,blue);
    }
    #map {
      height: 100vh;
      background-image: linear-gradient(gray,blue);
      background-image: url('./true.jpg');
      background-size:100% 100%; 
      transform-origin: center bottom;
    }
    .tittext {
      position: absolute;
      top: 10px;
      left: 50px;
      z-index: 10;
    }
    .my_tooltip{
        padding:0px;
        margin-left:6px;
        margin-top:0px;
        background-color: transparent;
        color: white;
        border: 0;
    }
    .bigemap-tooltip-bottom::before{
      border:0;
    }
</style>
</body>
</html>

项目预览地址：https://jianfeng418.github.io/gis/index.tml

本项目github地址：https://github.com/jianfeng418/gis

全国geojson数据下载地址：http://datav.aliyun.com/tools/atlas/

 

 

Jeff1804
关注
专栏目录
Delphi GIS地理位置信息系统2012版
04-09
Delphi GIS地理位置信息系统2012版
地理位置应用系统
专注-享学课堂
03-14 833
因为服务器空间防火墙缘故基站查询只能查询数据库数据不能获取新的基站信息， ---   --- ---- 小知识： 众所周知地球是一个不规则椭圆体，GIS中的坐标系定义由基准面和地图投影两组参数确定，而基准面的定义则由特定椭球体及其对应的转换参数确定。 基准面是利用特定椭球体对特定地区地球表面的逼近，因此每个国家或地区均有各自的基准面。基准面是在椭球体基础上建立的，椭球体可以对应多个基准
送你一个Git命令地图
嵌入式Linux
01-02 660
上周，公众号举办了一个活动，抽取Git鼠标垫，现在已经结束了，大家不用再过去找，周末我收到了鼠标垫，然后看到有几个读者朋友圈也发了，我感觉也算是做了一个好事，拿到鼠标垫，赶紧就自己把里面...
Git-Mrt-Map:用于地铁地图的 Git
07-12
Git-Mrt-Map 用于地铁地图的 Git 这主要是帮助我练习 Git 的东西。 处理合并点（中转站）——推荐 b) 方法 一种。 为中转站创建两个节点： 通过“commit”移动<other>先去中转点 然后，结帐到<main>以将其合并如下： (Tamsui) touch Zhongshan git add Zhongshan git commit -am " Zhongshan " git checkout master # master branch stays at Beimen --> Songshan (master) git merge Zhongshan --no-ff 但是，这种方法会创建两个松山节点， 一个来自淡水分行，另一个来自 留
GIS地理信息系统相关整理
纸上得来终觉浅，绝知此事要躬行
10-21 3174
GIS简介             地理信息系统（Geographic Information System或 Geo－Information system，GIS）有时又称为“地学信息系统”。它是一种特定的十分重要的空间信息系统。它是在计算机硬、软件系统支持下对整个或部分地球表层（包括大气层）空间中的有关地理分布数据进行采集、储存、管理、运算、分析、显示和描述的技术系统。 位置与地理信
基于Java的地理位置定位系统【100011790】
04-10
在这个系统中，用户可以通过输入ID来查询特定用户的地理位置信息，并能在地图上直观地看到这些信息的标注。以下是对这个项目涉及的知识点的详细解释： 1. **Java编程**：作为项目的开发语言，Java提供了丰富的类库...
基于地理位置的移动终端网络视频探索APP系统.zip
06-13
本系统 APP 使用 Android Studio 做为开发 IDE，所有代码通过 Git 进行版本控制， 并将代码托管到 GitHub 仓库进行管理。 Java 是一种面向对象的计算机语言，Android 使用 Java 和 Android SDK 进行开发。本系统 APP...
基于C#的动物疾病上报预警及防控地理信息系统源码.zip
10-02
4. **数据库交互**：系统可能使用SQL Server、MySQL等数据库存储疾病报告、地理位置等信息。开发者需熟悉SQL语言，进行数据的增删改查操作，并能使用ADO.NET或其他ORM框架（如Entity Framework）与数据库进行高效...
projet_tennis:J2EE项目国家地理科学学院| 地理信息与信息系统技术
06-13
同时，项目结合了“地理信息与信息系统技术”，暗示了系统可能包含地图展示、位置服务、距离计算等特性，帮助用户了解网球赛事的地理位置信息。 【标签解析】 “Java”标签表明该项目的核心编程语言是Java，J2EE...
git新手大全 (内部资料 | 含IntelliJ IDEA git教学)
12-08
- **云端数据访问**：Git 与云端仓库配合，可以让开发者在任何地方访问和编辑代码，不受地理位置限制。 2. **Git的基本使用流程**： - **创建云端仓库**：在远程服务器上（如GitHub或GitLab）创建代码库。 - **...
Mapping_Earthquakes:通过API请求在mapbox地图上绘制数据
03-27
Mapping_Earthquakes 通过API请求在mapbox地图上绘制数据。 项目计划 目的 该项目的主要目的是直观地显示过去7天世界范围内地震震级之间的差异。 任务 要完成此项目，请使用来自USGS网站的GeoJSON地震数据的URL，并检索过去7天的地理坐标和地震烈度。 然后将数据添加到地图。 方法 我们的方法是使用JavaScript和D3.js库从GeoJSON数据中检索地震的坐标和震级。 我们将进一步使用Leaflet库通过API请求在Mapbox地图上绘制数据，并为地震数据创建交互性。
湛江市乡镇级geojson数据.rar
03-07
湛江市行政边界地图geojson数据，精确乡镇级的
百度地图github
zhengZhou_2017的博客
09-17 279
Markertool by baidumap
Git全景图（一）：操作流程
zyq8514700的博客
08-07 198
一图搞明白git的所有提交和回退操作
GEO（地理信息定位）
weixin_30853329的博客
01-04 891
核心知识点： 1.GEO是利用zset来存储地理位置信息，可以用来计算地理位置之间的距离，也可以做统计； 2.命令：geoadd geopos geodist geohash georadius/georadiusbymember； 3.geohash字符串越长越精准，字符串越相近距离越近。 Redis3.2版本提供了GEO（地理信息定位）功能，支持存储地理位置信息用来实现诸如附近位...
git学习
小小拓哥
11-22 523
文章目录git学习分享1.git基础2.git基本指令3.git分支4.git diff算法 git学习分享 1.git基础 1.1Git直接记录文件的快照，而非文件之间的差异 1.2几乎所有操作都是本地完成 git中大部分操作都只需要访问本地文件和资源，直接而从本地数据库读取 1.3三种状态 文件存在三种状态：已提交(committed)、已修改(modified)和已暂存(staged),已提交表示数据已经保存到本地数据库中，已修改表示修改了文件并未提交到数据库，已暂存表示对一个已修改文件的当前版本做
vue2+百度地图开发
weixin_52986802的博客
05-05 812
vue2结合百度地图开发
百度地图学习（一）：定位
CuriousX的博客
10-05 1493
希望能和大家多多交流
Git详解(带图) --- 本地电脑的工作区、暂存区、本地仓与远程仓
最新发布
weixin_65775770的博客
01-09 3806
本文深入解析了 Git 的核心概念，包括工作区、暂存区和本地仓库之间的关系，通过对 .git 版本库中关键文件和文件夹的分析，揭示了 Git 底层运行逻辑的重要细节。
Git版本控制系统入门教程
Git的官方定义强调了它在软件开发过程中的作用，即帮助多人协作并同步各自的改动，尤其是在地理位置分散的团队中。通过Git，开发者可以各自在不同的地方和时间对项目进行开发和改进，而Git会智能地合并这些改动，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值