地图撒点如何用eachart来做一个全国地图撒点的效果 千次阅读

2018-07-04 17:58:47

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>ECharts</title>
    <!--<link rel="stylesheet" type="text/css" href="css/main.css"/>-->
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/map/js/china.js"></script>
    <style>
    #china-map {
        width:1000px;
        height: 600px;
        margin: auto;
        background: pink;
    }
</style>
</head>
<body>
<div id="china-map"></div>
<script>
    var myChart = echarts.init(document.getElementById('china-map'));
    function randomData() {
    return Math.round(Math.random()*1000);
}

option = {
    title: {
        text: 'iphone销量',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['iphone3','iphone4','iphone5']
    },
    visualMap: {
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            name: 'iphone3',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '北京',value: randomData() },
                {name: '天津',value: randomData() },
                {name: '上海',value: randomData() },
                {name: '重庆',value: randomData() },
                {name: '河北',value: randomData() },
                {name: '河南',value: randomData() },
                {name: '云南',value: randomData() },
                {name: '辽宁',value: randomData() },
                {name: '黑龙江',value: randomData() },
                {name: '湖南',value: randomData() },
                {name: '安徽',value: randomData() },
                {name: '山东',value: randomData() },
                {name: '新疆',value: randomData() },
                {name: '江苏',value: randomData() },
                {name: '浙江',value: randomData() },
                {name: '江西',value: randomData() },
                {name: '湖北',value: randomData() },
                {name: '广西',value: randomData() },
                {name: '甘肃',value: randomData() },
                {name: '山西',value: randomData() },
                {name: '内蒙古',value: randomData() },
                {name: '陕西',value: randomData() },
                {name: '吉林',value: randomData() },
                {name: '福建',value: randomData() },
                {name: '贵州',value: randomData() },
                {name: '广东',value: randomData() },
                {name: '青海',value: randomData() },
                {name: '西藏',value: randomData() },
                {name: '四川',value: randomData() },
                {name: '宁夏',value: randomData() },
                {name: '海南',value: randomData() },
                {name: '台湾',value: randomData() },
                {name: '香港',value: randomData() },
                {name: '澳门',value: randomData() }
            ]
        },
        {
            name: 'iphone4',
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '北京',value: randomData() },
                {name: '天津',value: randomData() },
                {name: '上海',value: randomData() },
                {name: '重庆',value: randomData() },
                {name: '河北',value: randomData() },
                {name: '安徽',value: randomData() },
                {name: '新疆',value: randomData() },
                {name: '浙江',value: randomData() },
                {name: '江西',value: randomData() },
                {name: '山西',value: randomData() },
                {name: '内蒙古',value: randomData() },
                {name: '吉林',value: randomData() },
                {name: '福建',value: randomData() },
                {name: '广东',value: randomData() },
                {name: '西藏',value: randomData() },
                {name: '四川',value: randomData() },
                {name: '宁夏',value: randomData() },
                {name: '香港',value: randomData() },
                {name: '澳门',value: randomData() }
            ]
        },
        {
            name: 'iphone5',
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '北京',value: randomData() },
                {name: '天津',value: randomData() },
                {name: '上海',value: randomData() },
                {name: '广东',value: randomData() },
                {name: '台湾',value: randomData() },
                {name: '香港',value: randomData() },
                {name: '澳门',value: randomData() }
            ]
        }
    ]
};
    myChart.setOption(option);
   
</script>
</body>
</html>

这里的话要注意里面要引入3个文件，一个echarts.js文件，一个jquery的，一个china.js文件，下面我把china.js的放在我百度网盘了，需要可以下载

https://pan.baidu.com/s/1N2_qy9tjzOdzRSVoLkHUvQ

密码：5iok

更多相关内容

openlayer5实现地图撒点，点击弹框效果

千次阅读 2019-09-02 15:53:11

效果展示：注意：公共代码，详细流程请看：... 实现步骤：第一：用geoserver发布地图图层第二：在页面引用公共efgis.js文件 import webgisT from '../../config/efgis';//引入公共js文件第三：在页面用...

效果展示：

注意：公共代码，详细流程请看：https://blog.csdn.net/qq_41619796/article/details/100284203

实现步骤：

第一：用geoserver发布地图图层

第二：在页面引用公共efgis.js文件

 import webgisT from '../../config/efgis';//引入公共js文件

第三：在页面用openlayer引入地图

this.map = webgisT.init('map_tqT');//调动公共js中的初始化方法

第四：定义撒点方法，并调用

 methods: {
      // 地图初始化
      init: function () {
        // geoserver图层
        this.map = webgisT.init('map_tq');//map_tq是容器id
      },
      // 作业点初始化
      initzydPoint() {
        let list = [];
        let pointsData = [];
        for (let i = 0; i < this.zydPoints.length; i++) {
          let data = this.zydPoints[i];
          let obj = {
            name:'',
            lon: data.lon,//经度
            lat: data.lat,//纬度
            sb:data.sb,
            params: [],
            html:{//html不传弹框的内容会由params决定，传的值不为空，则取html的
              'class':'sbyw_zntq',//设备运维-智能台区
              'data':data.sb,//数据名称
              'VandA':[]
            }
          };
              let lx =  obj.sb;
              if(lx == '杆'){
                obj['img'] = 'map_tq_gt';
              }else  if(lx == '表'){
                 obj['img'] = 'map_tq_db';
              } else if (lx == '变压器') {
                obj['img'] = 'map_tq_byq';
              }else{
                obj['img'] = '';
              }
          list.push(obj);
        }
        this.zydLayer = webgisT.addPointsLayer_zygk(list);
      },
      removezydPoint() {
        webgisT.removePointslayer(this.zydLayer);
      },
    },

调用：

props: ['zydPoints'],//传入的撒点数据
watch: {
      zydPoints(val, old) {
        if (val != old) {
           if (this.zydLayer != null) {
            this.removezydPoint();
          }
          this.initzydPoint();
        }
      }
    }

我这里的数据格式：

        [{
          "name":"电压:10kV,电流:10A",
          "lat":"22.698915973305702",//维度
          "lon":"112.25102931261064",//经度
          "sb":"杆"
        }]

注，我这里是根据类型来决定他这个点使用那张图片的，一定要注意，没有sb这个字段，页面是看不到的

收起

展开全文

【python】python利用百度地图API：获取经纬度、地图撒点

千次阅读 2020-03-19 17:25:27

python通过百度地图API，获取所给地址的经纬度，并且在百度地图上进行撒点。另：百度地图API功能强大，如： GPS功能（单个点沿线运动）、信息窗口示例（添加纯文字的信息窗口）、 JavaScript API GL v.10（轨迹...

本文目的：

python通过百度地图API，获取所给地址的经纬度，并且在百度地图上进行撒点。
在这里插入图片描述
另：百度地图API功能强大，如：
GPS功能（单个点沿线运动）、
信息窗口示例（添加纯文字的信息窗口）、
JavaScript API GL v.10（轨迹视角动画）
这些后续都能够用到。

进入正题

项目整体思路：

第一步：申请百度地图AK

地址：http://lbsyun.baidu.com/apiconsole/key
如图：
在这里插入图片描述

第二步：获取经纬度等

import pandas as pd
import json
import requests

#获取经纬度
def getlnglat(address): #从本地的xlsx文件中获取商圈名称，作为此函数的实参
    output = 'json'
    ak = '您的秘钥'  # 百度地图密钥ak,“控制台”-“应用管理”-“我的应用”-“创建应用”-“命名、*”提交后会生成AK
    url = 'http://api.map.baidu.com/geocoding/v3/?address={0}&output={1}&ak={2}'.format(address,output,ak)
    print(url)
    html = requests.get(url=url)
    html = html.text
    temp = json.loads(html, strict=False)

    lat = temp['result']['location']['lat']
    lng = temp['result']['location']['lng']

    return lat, lng                                     #纬度 latitude,经度 longitude

def re_html(data):  #生成HTML适配的格式
    data_html = pd.DataFrame(columns=['content'])        #建立一个列名为content的dataframe对象

    for indexs in data.index:  #重新整理成html里适配的格式
        data_html.loc[indexs, 'content'] = '{' + \
                                           '"lat":' + str(data.loc[indexs, '纬度']) + ',' + \
                                           '"lng":' + str(data.loc[indexs, '经度']) + ',' + \
                                           '"address":' + '"' + str(data.loc[indexs, 'MC']) + '"' + \
                                           '}' + ','
    data_html.to_csv("data_html.csv", encoding="gbk")     #相对路径，生成了该csv文件

if __name__ == '__main__':
    data = pd.read_excel('address.xlsx')
    for index in data.index:                             #index为data的序号，从0开始
        get_location = getlnglat(data.loc[index, 'MC'])  #通过序号进行索引，获得MC列下对应的地址名称
        lat = get_location[0]
        lng = get_location[1]
        data.loc[index, '纬度'] = lat
        data.loc[index, '经度'] = lng
        print(data)
    re_html(data)

第三步：找到“加载海量点”

地址：http://lbsyun.baidu.com/jsdemo.htm#c1_19
如图：
在这里插入图片描述
将官网的demo复制下来，然后修改配置，如下修改了两处：

ak；
将第二步csv文件中的内容复制到points中

详细代码：

<!DOCTYPE HTML>
<html>
<head>
  <title>加载海量点</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <style type="text/css">
    html,body{
        margin:0;
        width:100%;
        height:100%;
        background:#ffffff;
    }
    #map{
        width:100%;
        height:100%;
    }
    #panel {
        position: absolute;
        top:30px;
        left:10px;
        z-index: 999;
        color: #fff;
    }
    #login{
        position:absolute;
        width:300px;
        height:40px;
        left:50%;
        top:50%;
        margin:-40px 0 0 -150px;
    }
    #login input[type=password]{
        width:200px;
        height:30px;
        padding:3px;
        line-height:30px;
        border:1px solid #000;
    }
    #login input[type=submit]{
        width:80px;
        height:38px;
        display:inline-block;
        line-height:38px;
    }
  </style>
  <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
  <script type="text/javascript" src="/jsdemo/data/points-sample-data.js"></script>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
    var map = new BMap.Map("map", {});                         // 创建Map实例
    map.centerAndZoom(new BMap.Point(120.725285, 31.303446), 10);     // 初始化地图,设置中心点坐标和地图级别【中心点的值设置为苏州。地图级别值设置越大，地图就放大】
    map.enableScrollWheelZoom();                               //启用滚轮放大缩小
    if (document.createElement('canvas').getContext) {         // 判断当前浏览器是否支持绘制海量点
        var points = [
        {"lat":31.322265852172226,"lng":120.68438002906036,"address":"苏州中心"},
		{"lat":31.323270951670413,"lng":120.66351733274388,"address":"苏州市工业园区印象城"},
		{"lat":23.072928527383194,"lng":113.28558235115376,"address":"美罗百货（观前店）"},
		{"lat":31.326145447116968,"lng":120.72068765133209,"address":"苏州市工业园区圆融时代广场"},
		{"lat":31.303446751329332,"lng":120.7252852687627,"address":"苏州市工业园区邻瑞广场"},
		{"lat":31.63212125680224,"lng":120.74279593806872,"address":"诚品生活苏州"},
		{"lat":31.296203055436283,"lng":120.63059731038081,"address":"苏州市泰华商城"},
		{"lat":31.288771019970895,"lng":120.67844016353672,"address":"苏州市工业园区双湖广场"},
		{"lat":31.324684997959398,"lng":120.72068459709335,"address":"苏州市工业园区圆融星座"},
		{"lat":31.310377509583137,"lng":120.65955077493402,"address":"苏州市万科美好广场"},
		{"lat":31.32171806722683,"lng":120.67155581959992,"address":"苏州市工业园区天虹（金鸡湖店）"}
        ];  // 添加海量点数据
        <!--for (var i = 0; i < data.data.length; i++) {-->
          <!--points.push(new BMap.Point(data.data[i][0], data.data[i][1]));-->
        <!--}-->
        var options = {
            size: BMAP_POINT_SIZE_SMALL,
            shape: BMAP_POINT_SHAPE_STAR,
            color: '#d340c3'
        }
        var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
        pointCollection.addEventListener('click', function (e) {
          alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
        });
        map.addOverlay(pointCollection);  // 添加Overlay
    } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
    }
  </script>
</body>
</html>

后记：
根据需求有三点需要改进：

地图上画饼图；
地图上的“标注”的颜色、格式、多重格式并存；
点击“标注”显示详细信息。

收起

展开全文

vue+openlayer实现地图聚合效果和撒点效果

2021-09-09 14:15:57

openlayer是目前我们gis常用的一款开源的，并且反馈都特别好的软件了，像之前的ol3, 风靡一时，地图实现也很简单，很实用，目前vue中使用地图也是非常多的，那么如果在vue中引入openlayer并且实现地图撒点效果，...

前言：
openlayer是目前我们gis常用的一款开源的，并且反馈都特别好的软件了，像之前的ol3, 风靡一时，地图实现也很简单，很实用，目前vue中使用地图也是非常多的，那么如果在vue中引入openlayer并且实现地图撒点效果，甚至是更深层的地图聚合效果呢，本文来分享下vue中地图的实现。目前openlayer的 5 系列，6.5 都是通用的，经测试可用。

实现效果：

1、聚合效果：

2、撒点效果：

具体实现步骤：

1、项目中引入openlayer

cnpm i ol --save

2、配置(按需引入)

（1）新建一个vue文件
（2）template

<div id="map"></div>

（3）js部分:引入相关配置文件，这是我的所有引入，你可以根据你的情况删一删

import "ol/ol.css";
import View from "ol/View";
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import Overlay from "ol/Overlay";
import XYZ from "ol/source/XYZ";
import { Vector as SourceVec ,Cluster } from "ol/source";
import { Feature } from "ol";
import { Vector as LayerVec , Vector as VectorLayer } from "ol/layer";
import { Point, LineString } from "ol/geom";
 
import {
  Style,
  Icon,
  Fill,
  Stroke,
  Text,
  Circle as CircleStyle,
} from "ol/style";
 
import { OSM, TileArcGISRest } from "ol/source";

3、实现地图展示

mounted：

mounted() {
  this.initMap();
},

methods：我这里提供了两种地图的模板，都是在线的，内网的话换成你自己的地址

initMap(){
    //渲染地图
      var layers = [
        //深蓝色背景
        new TileLayer({
          source: new XYZ({
            url:
            "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
          }),
        }),
        //初始化背景
        // new TileLayer({
        //   source: new OSM(),
        // }),
        
      ];
 
      this.map = new Map({
        layers: layers,
        target: "map",
        view: new View({
          projection: 'EPSG:4326',
          center: [120, 30],
          zoom: 10,
          minZoom: 5,
          maxZoom: 14
        }),
      });
      //点击提示当前的坐标
      this.map.on(
        "click",
        function (evt) {
          alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },
        map
      );
}

4、撒点功能

mounted：

mounted() {
  this.initMap();
},

methods：

initMap(){
    //渲染地图
      var layers = [
         //深蓝色背景
        // new TileLayer({
        //   source: new XYZ({
        //     url:
        //       "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        //   }),
        // }),
        //初始化背景
        new TileLayer({
          source: new OSM(),
        }),
        
      ];
 
      this.map = new Map({
        layers: layers,
        target: "map",
        view: new View({
          projection: 'EPSG:4326',
          center: [120, 30],
          zoom: 10,
          minZoom: 5,
          maxZoom: 14
        }),
      });
      //点击提示当前的坐标
      this.map.on(
        "click",
        function (evt) {
          alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },
        map
      );
    //我这里是写的固定数据点，所以可以直接渲染完地址直接调用
    this.addMarker()
},
addMarker(){
    //创建画板
    let sourceArr =  new SourceVec({}); 
    //定义随机数据，这里随机了200个
    for (var i = 1; i <= 200; i++) {
      //点的坐标信息
      let coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
      let feature = new Feature(new Point(coordinates));
      let markerStyle = new Style({
          image: new Icon({
            opacity: 0.75,
            src: this.fixedStationImg1,
        }),
      })
      feature.setStyle(markerStyle)
      sourceArr.addFeature(feature);
    }
 
 
     //LayerVec /VectorLayer  这两种都可以
      var layer = new VectorLayer({
          source: sourceArr,
        })
 
      //地图添加画板
      this.map.addLayer(
        layer
      );  
    
}

5、聚合效果

mounted：

mounted() {
  this.initMap();
},

methods：

initMap(){
    //渲染地图
      var layers = [
         //深蓝色背景
        // new TileLayer({
        //   source: new XYZ({
        //     url:
        //       "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        //   }),
        // }),
        //初始化背景
        new TileLayer({
          source: new OSM(),
        }),
        
      ];
 
      this.map = new Map({
        layers: layers,
        target: "map",
        view: new View({
          projection: 'EPSG:4326',
          center: [120, 30],
          zoom: 10,
          minZoom: 5,
          maxZoom: 14
        }),
      });
      //点击提示当前的坐标
      this.map.on(
        "click",
        function (evt) {
          alert(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },
        map
      );
    //我这里是写的固定数据点，所以可以直接渲染完地址直接调用
    this.addMarker()
},
addMarker(){
    //创建画板
    let sourceArr =  new SourceVec({}); 
    //定义随机数据，这里随机了200个
    for (var i = 1; i <= 200; i++) {
      //点的坐标信息
      let coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
      let feature = new Feature(new Point(coordinates));
      let markerStyle = new Style({
          image: new Icon({
            opacity: 0.75,
            src: this.fixedStationImg1,
        }),
      })
      feature.setStyle(markerStyle)
      sourceArr.addFeature(feature);
    }
 
 
      //添加进map层-聚合点-LayerVec /VectorLayer  这两种都可以
      var layer = new LayerVec({
          source: this.ClusterSource,
          style: function (feature, resolution) {
            var size = feature.get('features').length;
            //如果是聚合数为1也就是最底层的则是定位图标
            if (size == 1) {
              return new Style({
                image: new Icon({
                  anchor: [0.5, 1],
                  src: require("../../assets/Img/marker_yes.png"),
                })
              })
            }else {
              //这里设置聚合部分的样式
              return new Style({
                image: new CircleStyle({
                  radius: 30,
                  stroke: new Stroke({
                    color: 'white'
                  }),
                  fill: new Fill({
                    color: 'blue'
                  })
                }),
                text: new Text({
                  text: size.toString(),
                  fill: new Fill({
                    color: 'white'
                  })
                })
              })
            }
          }
        })   
 
      //地图添加画板
      this.map.addLayer(
        layer
      );  
    
}

参考文献：

js中使用openlayer: https://blog.csdn.net/HerryDong/article/details/110951955

收起

展开全文

vue.js

谷歌地球撒点软件.rar
2019-09-11 20:24:03

非常好用的谷歌地球撒点软件，还带使用说明和导入模板，可以批量导入经纬度。

收起
android中百度地图撒点标识后台附近的人坐标点及用户头像
2017-03-06 09:24:22

主要的用途是让当前用户知道自己还有哪些用户在使用此款app，为实现后续的约跑，聊天等功能做铺垫。要知道附近其他用户必须先知道自己的定位，...调用后台接口上传当前用户的x、y坐标点。获取后台传回的用户的对象list

收起
高德离线地图vue-amap的api文档（1）：创建地图，撒点等等
千次阅读 多人点赞 2020-08-13 16:11:13

高德离线地图的使用场景还是很多的，但是他的api在国外，想参考api对网络差的朋友来说不是一件容易的事，对我来说一样，在这里整理下他的api内容。注：本文是将官网api挪动出来，网好的童鞋想看原版的请点击官网...

收起
OpenLayers 点位撒点
2022-05-11 15:32:34

设置网格，把地图切分成不同网格，在zoon 视图放大到一定程度，进行视图大小获取点位撒点二、使用步骤 1.引入库代码如下（示例）： import 'ol/ol.css' import { Map, View } from 'ol' import Tile from 'ol/...

收起

vue.js
高德地图开发----撒点+标记当前选中的行政区的颜色
2022-03-18 11:13:43

下载依赖包npm install @amap/amap-jsapi-...// 按 NPM 方式使用 Loader 引入地图 let amap = () => AMapLoader.load({ "key": "5f3ae5318b2412865326d6ed46e2570e", // 申请好的Web端开发者Key，首次调用 lo...

收起

javascript vue.js
前端项目使用高德API，创建地图，撒点，自定义标记点样式，点击点位展示信息提示窗体
千次阅读 2021-12-13 13:30:42

前端项目使用高德API，创建地图，撒点，自定义标记点样式，点击点位展示信息提示窗体

收起

vue.js javascript
vue+pg库+openlayer5+geoserver+离线地图瓦片构建gis地图+地图撒点+点击点出现地图弹框（***完整流程***）
千次阅读 2019-09-02 15:32:22

实现效果：（ol5的apihttps://openlayers.org/...一、在vue项目中使用gis地图，实现地图的搭建 1、在pg库中存入你的gis地图数据（这里数据不提供，默认是实现了这一步） 2、在geoserver中获取pg库中的数据，并在...

收起
gis项目海量撒点思路
2020-10-28 20:00:08

离散聚合点 2.解决办法二将点位数据发布成服务，加载图片的形式加载数据。（1）数据同步问题：将数据发布到服务端（arcgis service 或geoserver）数据无法与数据库同步，这样需要创建sde库，保证数据更新的同时...

收起

gis
ArcGIS加载天地图之散点聚合
热门讨论 2015-12-23 16:40:42

使用ArcGIS加载天地图，并显示散点，当散点过于集中时，进行聚合，并显示散点的个数。散点通过后台随机数生成功能实现完整，可直接拿来使用 java web项目访问地址http://ip:port/ClusterGIS/

收起

ArcGIS
42.（leaflet篇）leaflet实现撒点图（仿echarts）
2022-04-15 09:57:45

地图之家总目录（订阅之前建议先查看该博客）文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。效果如下所示：下面献上完整代码，代码重要位置会做相应解释 <!DOCTYPE html> <...

收起

leaflet echarts gis
高德离线地图vue-amap的api文档（2）：创建地图，撒点等等
千次阅读 2020-08-13 17:24:15

高德离线地图的使用场景还是很多的，但是他的api在国外，想参考api对网络差的朋友来说不是一件容易的事，对我来说一样，在这里整理下他的api内容。注：本文是将官网api挪动出来，网好的童鞋想看原版的请点击官网...

收起
高德地图自定义图片标记点
2021-11-09 13:27:54

高德地图自定义图片标记点效果图：场景例如标记范围内共享单车的位置循环坐标数组然后绘制： this.deviceMapData.output.value.curProData.forEach((item,index)=>{ //循环单点绘制不能自定义icon let ...

收起
【map】高德地图点聚合—按索引聚合
千次阅读 2021-01-28 10:14:33

更具产品需求，需要做一个地图显示房源信息的功能先展示吧：一开始看文档怎么也找不到AMap的IndexCluster插件，只好直接从案例入手了,要想跑通那必须先找案例数据结构，看了下js原来是有2个JSON数据，一个是...

收起
测试设计点-地图
千次阅读 2020-12-14 17:16:18

展开的途径地铁站信息是否正确网络不好的情况下自身定位是否准确网络不好的情况下步行导航提示是否准确关闭网络步行导航是否准确关闭网络当前所在地点到终点地图线路信息是否准确偏离导航是否有提示步行导航...

收起

软件测试
jsp使用ECharts动态在地图上标识点
2021-01-17 18:10:11

首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里，它是一个ＪＳ的字典对象，由键／值对组成，键表示点的名称，值则表达它的坐标，由经纬度组成，它是一个数组，如[136.00,32.00]它就表示了一个坐标．地图...

收起
vue3的高德地图怎么标记点
2022-05-20 15:14:52

这里只有标记点的代码,初始化地图的代码看这里引入高德地图 1.标记单个点 var marker = new AMap.Marker( { position:new AMap.LngLat(114.298572,30.584355), title:'武汉' } ) map.add(marker) 2.标记多个点...

收起

vue.js
在地图上添加点和描述文字
2022-02-22 09:37:14

在地图上添加点和描述实例

收起

vue.js vue
地图点聚合优化
2020-08-06 20:57:05

点聚合可以用少量的点或图标来表示地图中的所有点，让地图显示更清晰明朗。 1. 场景化将地图范围划分成指定尺寸的正方形，然后将落在对应格子中的点计算出质心，最终一个正方形内只显示一个中心点。已知初始化...

收起
干货|可视化设计：地图四部曲之地图散点
2021-03-08 07:37:30

中国是人口大国，也是资源大国，自古以来就有地大物博的美名... 一、什么地图散点地图散点，是在地图的基础上，用点的大小、颜色深浅等元素显示相关数据的大小和分布情况，可以让人一眼尽收眼底，做到心中有数。地图...

收起
Python：如何在Cartopy地图上的特定点绘制散点图？
2021-01-14 03:13:24

# Function that plots the time series and the data series from a .mat data file# (in the dB-direction based on the out-variable), that is associated with the observatory code (based on the sta-variabl...

收起
百度地图点聚合提高效率
万次阅读 热门讨论 2017-02-16 14:02:35

百度的点聚合算法是基于方格和距离的聚合算法，即开始的时候地图上没有任何已知的聚合点，然后遍历所有的点，去计算点的外包正方形（由gridSize指定），若此点的外包正方形与现有的聚合点的外包正方形不相交，则...

收起

优化
echarts添加地图散点
2021-12-03 17:59:32

<!DOCTYPE html> <... <head>...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...地图下钻</title> <style> body { m.

收起

echarts javascript
vue+supermap超图实现点击地图添加点
2020-12-17 16:30:57

点击地图加点并添加图标（已规划导航路线选取终点起点为例）首先是点击获取坐标 getPosition(item) { this.point = item // item 接受两个字符串 'start', 'end' 用来区分起点和终点 const that = this that....

收起

vue

openlayer5实现地图撒点，点击弹框效果

【python】python利用百度地图API：获取经纬度、地图撒点

本文目的：

项目整体思路：

第一步：申请百度地图AK

第二步：获取经纬度等

第三步：找到“加载海量点”

vue+openlayer实现地图聚合效果和撒点效果

实现效果：

1、聚合效果：

2、撒点效果：

具体实现步骤：

1、项目中引入openlayer

2、配置(按需引入)

（1）新建一个vue文件 （2）template

（3）js部分:引入相关配置文件，这是我的所有引入，你可以根据你的情况删一删

3、实现地图展示

mounted：

methods：我这里提供了两种地图的模板，都是在线的，内网的话换成你自己的地址

4、撒点功能

mounted：

methods：

5、聚合效果

mounted：

methods：

参考文献：

谷歌地球撒点软件.rar

android中百度地图撒点标识后台附近的人坐标点及用户头像

高德离线地图vue-amap的api文档（1）：创建地图，撒点等等

OpenLayers 点位撒点

高德地图开发----撒点+标记当前选中的行政区的颜色

前端项目使用高德API，创建地图，撒点，自定义标记点样式，点击点位展示信息提示窗体

vue+pg库+openlayer5+geoserver+离线地图瓦片构建gis地图+地图撒点+点击点出现地图弹框（***完整流程***）

gis项目海量撒点思路

ArcGIS加载天地图之散点聚合

42.（leaflet篇）leaflet实现撒点图（仿echarts）

高德离线地图vue-amap的api文档（2）：创建地图，撒点等等

高德地图自定义图片标记点

【map】高德地图点聚合—按索引聚合

测试设计点-地图

jsp使用ECharts动态在地图上标识点

vue3的高德地图怎么标记点

在地图上添加点和描述文字

地图点聚合优化

干货|可视化设计：地图四部曲之地图散点

Python：如何在Cartopy地图上的特定点绘制散点图？

百度地图点聚合提高效率

echarts添加地图散点

vue+supermap超图实现点击地图添加点

地图撒点

（1）新建一个vue文件
（2）template

vue+pg库+openlayer5+geoserver+离线地图瓦片构建gis地图+地图撒点+点击点出现地图弹框（完整流程）