精华内容
下载资源
问答
我要提问

  • 【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
    放入代码中,获得经纬度
    生成HTML适配的格式
    写入本地csv文件  官方demo中复制代码  更改ak和其他配置
    

    第一步：申请百度地图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复制下来，然后修改配置，如下修改了两处：
    

      

    1. ak；
      2. 

    2. 将第二步csv文件中的内容复制到points中
      
在这里插入图片描述
      
详细代码：
      3. 

    

    <!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>

    

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

      

    1. 地图上画饼图；
      2. 

    2. 地图上的“标注”的颜色、格式、多重格式并存；
      3. 

    3. 点击“标注”显示详细信息。
      4.
    收起
    展开全文

  • 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这个字段，页面是看不到的
    收起
    展开全文

  • 如何用eachart来做一个全国地图撒点的效果

     千次阅读 2018-07-04 17:58:47
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content=".../ 
    <!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
    


     
    


     
    收起
    展开全文

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

     2019-09-02 15:32:22
    实现效果：（ol5的apihttps://openlayers.org/...一、在vue项目中使用gis地图，实现地图的搭建 1、在pg库中存入你的gis地图数据（这里数据不提供，默认是实现了这一步） 2、在geoserver中获取pg库中的数据，并在... 
    实现效果：（ol5的apihttps://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html#getProperties）
    


    


    一、在vue项目中使用gis地图，实现地图的搭建
    


        1、在pg库中存入你的gis地图数据（这里数据不提供，默认是实现了这一步）
    


        2、在geoserver中获取pg库中的数据，并在geoserver中发布图层，将数据库中的数据发布成我们可以使用的地图
    


             （ 如果对这个步骤都不了解的朋友可以看下这个 ，详细步骤：https://blog.csdn.net/qq_41619796/article/details/93929048）
    


        3、在tomcate中放入地图瓦片
    


        4、在页面引用efgis.js：
    


    efgis.js ,公共ol5方法封装
    


    import {Map, View, Overlay } from 'ol';
import Feature from 'ol/Feature';
import {Text, Fill, Stroke, Style, Icon, Circle} from 'ol/style';
import {Tile as TileLayer, Vector as VectorLayer,} from 'ol/layer';
import {Vector as VectorSource, XYZ, TileWMS} from 'ol/source';
import {LineString, Point,Circle as CircleL} from 'ol/geom';
import {Control} from 'ol/control';
import axios from 'axios';
import store from '@/store/store.js';

// 设置常量
var efgis = {};
const devStr = 'xinxing';

/**
 * 地址
 */
const DataSource = 'EPSG:4326';    //坐标系
var ServiceIP = '';               //地图服务地址
var TomcatIP = '';                //瓦片服务地址
var MapUrl = '';                 //geoserver服务地址
var MapJDUrl = '';               //瓦片地址

const defaultDatas = {
  center: [112.16629, 22.63025],
  zoom: 11,
  minZoom: 11,
  maxZoom: 24
};
var geolayerName = 'xinxing_xian';
var nowName = '';
var nowCenter = '';
var nowZoom = '';

var map = null;
var points = [];
// 图层变量
let JDLayer = null;
let xinxingWhitelayer = null;
let nowIon = '';
let nowLat = '';
efgis = {
  /*
  * 初始化地图对象
  * */
  init: function (mapDom,type) {
    /**
     * 填充地址-start
     */
    ServiceIP = store.state.ServiceIP;//地图服务地址
    TomcatIP = store.state.TomcatIP; //瓦片服务地址
    MapUrl = ServiceIP + 'geoserver/xinxing/wms';//geoserver服务地址
    MapJDUrl =  TomcatIP + 'xinxingmap/roadmap/{z}/{x}/{y}.png';//瓦片地址
     /**
     * 填充地址-end
     */
    if(type !=undefined){
      if(type.name != undefined){
        nowName = type.name
      }
      if(type.center != undefined){
        nowCenter = type.center
      }
      if(type.zoom != undefined){
        nowZoom = type.zoom
      }
    }else{
      nowName = geolayerName
      nowCenter = defaultDatas.center
      nowZoom = defaultDatas.zoom
    }
    map = new Map({
      target: mapDom,
      view: new View({
        center: nowCenter,
        zoom: nowZoom,
        projection: DataSource,      //默认的是 'EPSG:3857'横轴墨卡托投影
        minZoom: defaultDatas.minZoom,
        maxZoom: defaultDatas.maxZoom
      }),
      layers: [],
      control: new Control({
        zoom: false
      })
    });
    this.initEvent();
    this.addGeoLayer(nowName);
    return map;
  },
 /**
 *  给地图添加事件
 */
  initEvent() {
    var that = this;
    // 点击事件
    map.on('singleclick', e => {//点击事件获取当前经纬度
      nowIon = e.coordinate[0];//当前鼠标点击的经度
      nowLat = e.coordinate[1];//当前鼠标点击的纬度
      console.log('经度'+nowIon+","+'纬度'+nowLat);
    })
    //监听鼠标滚动事件
    map.getView().on('change:resolution', e => {
      let currentZoom = map.getView().getZoom();//当前地图层级
      if (currentZoom >= 13) {
        that.addXYZLayer();//当层级超过13层时调动地图瓦片
        that.addXinXingWhite();//当层级超过13层时调动geoserver图层
      } else {
        that.removeXYZLayer();
        that.removeXinXingWhite();
      }
    });
    let popupDom = document.getElementById('mapPopup');
    let popupContent = document.getElementById('popupContent');
    var overlay = new Overlay({
      element: popupDom,
      autoPan: true,
      autoPanAnimation: {
        duration: 250
      }
    });
    // 点击事件
    map.on("click", evt => {
      let addPopup = function (data) {
        if (data == undefined) {
          return;
        }
        let html = "";
        let html2 = '';
        for (let i in data) {
          if (data[i].name == 'name') {
            html += `<div class="tyDiv"><p class="ellipsis" style="text-align:center;width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-bottom: 5px" title="${data[i].val}">${data[i].val}</p>`
            continue;
          }
          html2 += `<p class="ellipsis" style="text-align:left;width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" title="${data[i].val}">${data[i].name}:${data[i].val}</p></div>`
        }
        ;
        return html + html2;
      }
      let flag = false;
      let pixel = map.getEventPixel(evt.originalEvent);
      map.forEachFeatureAtPixel(pixel, (feature) => {
        var baseURL = store.state.baseUrl;
        // console.log(111,feature.get('geometry').getType())
        if (feature.get('geometry').getType() != 'Point') {
          return;
        }
        // console.log(222,feature.getProperties())
        if (feature != undefined) {
          let properties = feature.getProperties();
          var coordinate = evt.coordinate;
          if (properties.html == '' || properties.html == undefined) {
            let data = properties.data;
            let html = addPopup(data);
            if (html != '') {
              $(popupContent).html(html)
              overlay.setPosition(coordinate);
              flag = true;
            }
          }else {
            //供电服务-停电管理-地图弹框
            if(properties.html.class =='gdfw_tdgl' && properties.html.id !='' && properties.html.id !=undefined && properties.html.id !=null){
              let url = `${baseURL}:9004/tdfw/findGzMessage`;
              let param = new URLSearchParams();
              param.append("id", properties.html.id);
              param.append("bs", properties.html.bs);
              param.append("dj", properties.html.dj);
              // axios({
              //   url: url,
              //   method: 'post',
              //   params: param
              // }).then((res) => {
              //   if (res.status === 200) {

                  let res = {
                    data:{
                      gdxx:{
                        lxdh:"18610086001",
                        qxsj:"2019-07-10 09:50:00",
                        qxzt:"处理完成",
                        gzdz:"估伦村公用台变（200kVA）",
                        gzfzr:"张三",
                        gznr:"10kV长江线703开关保护测控装置零序过流保护功能调试和零序CT变比测试",
                        gzzt:[
                          {
                            sj:"2019-07-10 08:30:00",
                            zt:"派单"
                          },
                          {
                            sj:"2019-07-10 08:50:00",
                            zt:"接单"
                          },
                          {
                            sj:"2019-07-10 09:50:00",
                            zt:"到达现场"
                          },
                          {
                            sj:"2019-07-10 10:30:00",
                            zt:"故障确认"
                          },
                          {
                            sj:"2019-07-10 12:22:00",
                            zt:"处理完成"
                          }
                        ]
                      },
                      xyfw:{
                        tdsb:"1、35kV蕉山变电站10kV太平线#51杆51T1开关后段线路；2、110kV六祖变电站701开关；3、110kV六祖变电站702开关。",
                        xlmc:"蕉山线",
                        yxdkh:"否",
                        yxgl:"否",
                        yxzykh:"否"
                      }
                    }

                  }




                 let gdxx = res.data.gdxx;
                 let xyfw = res.data.xyfw;
                 let gzttStr = '<div></div>'
                 gdxx.gzzt.forEach((item)=>{
                    let nowLi = ` <li>
                                      <p>`+item.zt+`</p>
                                      <span title=`+item.sj+`>`+item.sj+`</span>
                                  </li>`
                    gzttStr +=  nowLi;
                 });
                 let str =
                 `
                 <div class='gdPopoverCon'>
                     <ul class="gdModelTab">
                       <li id='gdxx' class='tabAct'>工单信息</li>
                       <li id='yxfw'>影响范围</li>
                     </ul>

                     <ul class="gdModelCon gdModelConO">
                       <li>
                         <p>工作负责人：<span title="`+gdxx.gzfzr+`">`+gdxx.gzfzr+`</span></p>
                         <p>联系电话：<span title="`+gdxx.lxdh+`">`+gdxx.lxdh+`</span></p>
                       </li>
                       <li>
                         <p>抢修状态：<span title="`+gdxx.qxzt+`">`+gdxx.qxzt+`</span></p>
                         <p>抢修时间：<span title="`+gdxx.qxsj+`">`+gdxx.qxsj+`</span></p>
                       </li>
                       <li class="tsStyle">
                         <p>故障地址：<span title="`+gdxx.gzdz+`">`+gdxx.gzdz+`</span></p>
                       </li>
                       <li class="tsStyle">
                         <p>故障描述：<span title="`+gdxx.gznr+`">`+gdxx.gznr+`</span></p>
                       </li>
                        <li class="gzztDiv">
                          <p class="gzztTit">工作状态：</p>
                          <ul class="gzzt">
                            `+gzttStr+`
                          </ul>
                        </li>
                     </ul>

                     <ul class="gdModelCon gdModelConT" style='display:none;'>
                       <li>
                         <p>线路名称：<span title="`+gdxx.xlmc+`">`+xyfw.xlmc+`</span></p>
                         <p>设备名称：<span title="`+gdxx.tdsb+`">`+xyfw.tdsb+`</span></p>
                       </li>
                       <li>
                         <p>抢修状态：<span title="`+gdxx.yxdkh+`">`+xyfw.yxdkh+`</span></p>
                         <p>抢修时间：<span title="`+gdxx.yxgl+`">`+xyfw.yxgl+`</span></p>
                       </li>
                       <li class="tsStyle">
                         <p>故障地址：<span title="`+gdxx.yxzykh+`">`+xyfw.yxzykh+`</span></p>
                       </li>
                     </ul>
                   <div>
                 `
                 $(popupContent).html(str)
                 overlay.setPosition(coordinate);
                 flag = true;
                  return;
                // }
              // }).catch((error) => {
              //   console.log(error);
              // })
            }
            


            let data = properties.html;
            let html = data;
            if (html != '') {
              $(popupContent).html(html)
              overlay.setPosition(coordinate);
              flag = true;
            }
          }

        }
      })

      if (flag) {
        map.addOverlay(overlay)
      } else {
        map.removeOverlay(overlay);
      }
    });

  },
  //添加geoserver图层方法
  addGeoLayer: function (name,zIndex) {
    let layer = new TileLayer({
      source: new TileWMS({
        url: MapUrl,
        params: {
          'LAYERS': devStr + ':' + name,
          'TILED': true
        },
        serverType: 'geoserver',
        projection: DataSource
      }),
      zIndex: zIndex?zIndex:10
    });
    map.addLayer(layer);
    return layer
  },
  // 添加geoserver图层
  addXinXingWhite: function () {
    if(xinxingWhitelayer==null){
      // console.log(1111)
      xinxingWhitelayer = this.addGeoLayer("xinxing_yaogan", 14);
      // console.log(222,xinxingWhitelayer)
    }
  },
  // 移除geoserver图层
  removeXinXingWhite:function(){
    if(xinxingWhitelayer!=null){
      map.removeLayer(xinxingWhitelayer);
      xinxingWhitelayer = null;
    }
  },
  /*
  * 添加瓦片图层
  * */
  addXYZLayer: function () {
    if (JDLayer) {
      return;
    } else {
      JDLayer = new TileLayer({
        source: new XYZ({
          url: MapJDUrl
        }),
        zIndex: 11
      });
      map.addLayer(JDLayer);
    }
  },
  // 删除瓦片图层
  removeXYZLayer: function () {
    if (JDLayer) {
      map.removeLayer(JDLayer)
      JDLayer = null;
    }
  },
  // 添加多个点，返回图层对象Feature
  addPointsLayer: function (points) {
    let arrLayer = [];
    for (let i = 0; i < points.length; i++) {
      let point1X = points[i].lon;
      let point1Y = points[i].lat;
      let name1 = points[i].num;
      let feature = this.vectorPointCircleReturn([point1X, point1Y],  name1, points[i])
      arrLayer.push(feature)
    }
    return arrLayer;
    },
  addPointsLayer_zygk: function (points) {
    let arrLayer = [];
    for (let i = 0; i < points.length; i++) {
      let pointX = points[i].lon;
      let pointY = points[i].lat;
      let name = points[i].name;
      let img = points[i].img;
      let params = points[i].params
      let option ={
        coordinate:[pointX, pointY],
        img:img,
        name:name,
        params: params,
        scale:1.2,
        zIndex:99
      }
      if (points[i].html != undefined) {
        option.html = points[i].html
      } else {
        option.html = ""
      }
      let feature = this.vectorPointImgReturn_zygk(option)
      arrLayer.push(feature)
    }
    return arrLayer;
  },
  //删除多个点，输入图层对象数组
  removePointslayer(arr) {
    for (let i = 0; i < arr.length; i++) {
      map.removeLayer(arr[i]);
    }
  },
  // 撒点，点是图片
  vectorPointImg: function (point, img, name) {
    let scale = 0.4;
    let styleFunc = function () {
      let style = new Style({
        image: new Icon({
          src: require('../assets/images/mapIcon/' + img + '.png'),
          scale: scale
        }),
        text: new Text({ //文本样式
          text: name,
          textAlign: 'center',
          offsetY: -20,
          offsetX: 10,
          textBaseline: 'middle',
          font: '17px Calibri,sans-serif',
          fill: new Fill({
            color: '#cd5c5c'
          })
        })
      })
      return style;
    }
    let source = new VectorSource({
      wrapX: false
    });
    let vector = new VectorLayer({
      source: source,
      zIndex: 99,
      style: styleFunc()
    });
    // let points  = [112.16629, 22.65025]
    // let points  = fromLonLat([112.16629, 22.65025])
    let fetureLine = new Feature({
      geometry: new Point(point)
    });
    source.addFeature(fetureLine);
    map.addLayer(vector);
  },
  vectorPointCircleReturn: function (point, name, data) {
    let scale = 0.4;
    let styleFunc = function () {
      let style = new Style({
        image: new Circle({
          radius: 7,
          stroke: new Stroke({
            color: '#cd5c5c'
          }),
          fill: new Fill({
            color: '#cd5c5c'
          })
        }),
        text: new Text({ //文本样式
          text: data.name ? data.name : '',
          textAlign: 'center',
          offsetY: -20,
          offsetX: 10,
          textBaseline: 'middle',
          font: '17px Calibri,sans-serif',
          fill: new Fill({
            color: '#cd5c5c'
          })
        })
      })
      return style;
    }
    let source = new VectorSource({
      wrapX: false
    });
    let vector = new VectorLayer({
      source: source,
      zIndex: 99,
      style: styleFunc()
    });
    // let points  = [112.16629, 22.65025]
    // let points  = fromLonLat([112.16629, 22.65025])
    let fetureLine = new Feature({
      geometry: new Point(point),
      data: data.params
    });
    source.addFeature(fetureLine);
    map.addLayer(vector);
    return vector;
  },
  vectorPointImgReturn_zygk: function (option) {
    let styleFunc = function () {
      let scale = 0.4;
      let zIndex=99;
      let style = new Style({
        image: new Icon({
          src: require('../assets/images/mapIcon/' + option.img + '.png'),
          scale: option.scale?option.scale:scale
        }),
        text: new Text({ //文本样式
          text: option.name?option.name:'',
          textAlign: 'center',
          offsetY: -20,
          offsetX: 10,
          textBaseline: 'middle',
          font: '17px Calibri,sans-serif',
          fill: new Fill({
            color: '#cd5c5c'
          })
        })
      })
      return style;
    }
    let source = new VectorSource({
      wrapX: false
    });
    let vector = new VectorLayer({
      source: source,
      zIndex: option.zIndex?option.zIndex:zIndex,
      style: styleFunc()
    });
    // let points  = [112.16629, 22.65025]
    // let points  = fromLonLat([112.16629, 22.65025])
    let fetureLine = new Feature({
      geometry: new Point(option.coordinate),
      data: option.params,
      html: option.html
    });
    source.addFeature(fetureLine);
    map.addLayer(vector);
    return vector;
  },
  // 撒点,可以改变样式
  vectorPointColor: function (coordinate, styles, data) {
    let defaultStyle = {
      color: '#cd5c5c',
      radius: 7,
      text: ''
    }
    let styleFunc = function (styles) {
      let style = new Style({
        image: new Circle({
          radius: styles.radius ? styles.radius : defaultStyle.radius,
          stroke: new Stroke({
            color: styles.color ? styles.color : defaultStyle.color
          }),
          fill: new Fill({
            color: styles.color ? styles.color : defaultStyle.color
          })
        }),
        text: new Text({ //文本样式
          text: styles.text ? styles.text : defaultStyle.text,
          textAlign: 'center',
          offsetY: -20,
          offsetX: 0,
          textBaseline: 'middle',
          font: '16px Microsoft YaHei',
          fill: new Fill({
            color: styles.color ? styles.color : defaultStyle.color
          })
        })
      })
      return style;
    }
    let source = new VectorSource({
      wrapX: false
    });
    let vector = new VectorLayer({
      source: source,
      zIndex: 99,
      style: styleFunc(styles)
    });
    // let points  = [112.16629, 22.65025]
    // let points  = fromLonLat([112.16629, 22.65025])
    let feturePoint = new Feature({
      geometry: new Point(coordinate),
      data: data.params
    });
    source.addFeature(feturePoint);
    map.addLayer(vector);
    return vector;
  },
  // 潮流线路绘制
  vectorLineAutoDash_clt: function (lineArr) {
    let source = new VectorSource({
      wrapX: false
    });
    let vector = new VectorLayer({
      source: source,
      zIndex: 97
    });
    // 遍历画线画点
    for (let j = 0; j < lineArr.length; j++) {
      let lines = lineArr[j];
      for (let i = 0; i < lines.length; i++) {
        if (i == lines.length - 1) {
          continue;
        }
        let to = {
          coordinate: [lines[i].lon, lines[i].lat],
          name: lines[i].name,
          type: lines[i].type,
          params: lines[i].params,
        };
        let from = {
          coordinate: [lines[i + 1].lon, lines[i + 1].lat],
          name: lines[i + 1].name,
          type: lines[i + 1].type,
          params: lines[i + 1].params,
        }
        let points = new Array(to.coordinate, from.coordinate);
        // let defaultStyle = {
        //   color:'#cd5c5c',
        //   radius :7,
        //   text:''
        // }
        // 设置变电站点的颜色
        let getColor = function (type) {
          if (type == '110') {
            return '#cd5c5c'
          } else if (type == '35') {
            return '#33cccc'
          } else if (type == '220') {
            return '#fff';
          } else {
            return '#fff';
          }
        }
        let colorLine = getColor(to.type)
        // 绘制点
        this.vectorPointColor(from.coordinate, {
          color: getColor(from.type),
          radius: 7,
          text: from.name,
        }, from)
        this.vectorPointColor(to.coordinate, {
          color: getColor(to.type),
          radius: 7,
          text: to.name
        }, to)

        let fetureLine = new Feature({
          geometry: new LineString(points),
          dashOffset: 0
        });
        // 线背景
        let outlineStroke = new Style({
          stroke: new Stroke({
            // color:'red',
            // width:5
          })
        });
        let getAnimationStrokeStyle = function () {
          return new Style({
            stroke: new Stroke({
              color: colorLine,
              width: 4,
              lineDash: [1, 3, 5],
              lineDashOffset: fetureLine.get("dashOffset")
            })
          })
        };
        let getStyle = function () {
          return [outlineStroke, getAnimationStrokeStyle()];
        }
        fetureLine.setStyle(getStyle);
        source.addFeature(fetureLine);
        setInterval(function () {
          let offset = fetureLine.get('dashOffset');
          offset = offset == 8 ? 0 : offset + 4;
          fetureLine.set('dashOffset', offset);
        }, 100);
      }
    }
    map.addLayer(vector);
  },
  // 画直线，可以改变颜色
  vectorLineSoildColor: function (points, color) {
    let source = new VectorSource({
      wrapX: false
    });
    let vector = new VectorLayer({
      source: source,
      zIndex: 99
    });
    let fetureLine = new Feature({
      geometry: new LineString(points),
    });
    let defaultStyle = {
      color: 'yellow'
    }

    function getStyle(color) {
      return new Style({
        stroke: new Stroke({
          color: color == '' ? defaultStyle.color : color,
          width: 5
        })
      });
    }

    fetureLine.setStyle(getStyle(color));
    source.addFeature(fetureLine);
    map.addLayer(vector);
  },
  // 画多条直线
  vectorLinesSoild: function (points) {
    let isError = false;
    for (let i = 0; i < points.length; i++) {
      if (i == (points.length - 1)) return;
      let point1X = points[i].lon;
      let point1Y = points[i].lat;
      let point2X = points[i + 1].lon;
      let point2Y = points[i + 1].lat;

      let color = '';
      if (points[i].yc == 1) {
        if (!isError) {
          color = 'red';
        }
        isError = !isError;
      }
      this.vectorLineSoildColor(new Array([point1X, point1Y], [point2X, point2Y]), color);
    }
  },
  // 恢复默认位置
  resetCenter: function () {
    map.getView().animate({center: defaultDatas.center}, {zoom: defaultDatas.zoom})
  },
  // 根据zoom加载或者删除点
  LineAndPoindZoom: function (points) {
    let xlPoints = [];
    let isOk = true;
    map.on('moveend', e => {
      let currentZoom = map.getView().getZoom();
      if (currentZoom >= 13) {
        if (isOk) {
          xlPoints = this.addPointsLayer(points)
          isOk = !isOk;
        }
      } else {
        if (!isOk) {
          this.removePointslayer(xlPoints)
          xlPoints = [];
          isOk = !isOk;
        }
      }
    });
  },
  load3minReset: function () {
    let that = this;
    let zoomArr = [];
    let i = 0;
    let timer = setInterval(() => {
      let zoom = map.getView().getZoom();
      if (i == 29) {
        that.resetCenter();
        zoomArr = [];
        i = 0;
        window.clearInterval(timer);
        return;
      }
      i++;
      if (zoomArr.length > 0) {
        if (zoomArr[zoomArr.length - 1] != zoom) {
          zoomArr = [];
          i = 0;
          return;
        }
      }
      zoomArr.push(zoom);
    }, 6000)
    return timer;
  },
  addCirclelayers:function (data,r) {
    // let data = [112.314079,22.6958978];
    r = r/10000;
    let styleFunc = function (name) {
      let style = new Style({
        fill:new Fill({
          color:[255,0,0,.3]
        }),
        stroke:new Stroke({
          color:'red',
          width:2
        })
      })
      return style;
    }
    let source = new VectorSource({
      wrapX: false
    });
    let vector = new VectorLayer({
      source: source,
      zIndex: 99,
      style: styleFunc(name)
    });
    // let points  = [112.16629, 22.65025]
    // let points  = fromLonLat([112.16629, 22.65025])
    let fetureLine = new Feature({
      // geometry: new CircleL(data,0.005),
      geometry: new CircleL(data,r),
    });
    source.addFeature(fetureLine);
    map.addLayer(vector);
  }
}

export default efgis

    


          5、创建地图组件 power_tqT.vue ，并引用
    


    <template>
  <div class="mapBox">
    <div id="map_tqT" ref="rootmap" class="box">
    </div>
    <map-popup></map-popup>
    <div class="getMore" @click="getClickQP"></div>
  </div>


</template>

<script>
  import 'ol/ol.css';
  import webgisT from '../../config/efgistqT';
  import mapPopup from './mapPopup';
  export default {
    name:'城东站-地图',
    props: ['zydPoints'],//撒点数据
    data() {
      return {
        map: null,
        zydLayer: null,
        fullscreen:false,//是否全屏
        pointCenter:'',
      }
    },
    methods: {
      // 地图初始化
      init: function () {
        // geoserver图层
        this.map = webgisT.init('map_tqT');//注册地图并渲染到指定容器
      },
      // 作业点初始化
      initzydPoint() {
        let list = [];
        let pointsData = [];
        for (let i = 0; i < this.zydPoints.length; i++) {
          let data = this.zydPoints[i];
          let obj = {
            name:'',
            lon: data.jd,
            lat: data.wd,
            sb:data.sb,
            params: [],
            html:{
              'class':'sbyw_zntq',//设备运维-智能台区
              'data':data.sb,//数据名称
              'VandA':[]
            }
          };
          pointsData[i]=[];
          pointsData[i].push(data.jd);
          pointsData[i].push(data.wd);

          obj.html.VandA.push(data.ssdl);
          obj.html.VandA.push(data.ssdy);
          if(obj.sb.length>1){
            obj.sb.forEach((e,index) => {
              let lx = e.lx;
              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'] = '';
              }
            });
          }else if(obj.sb.length==1){
            let lx = obj.sb[0].lx;
            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'] = '';
            }
          }else{
             obj['img'] = '';
          }
          list.push(obj);
        }
        this.lists = list;
        webgisT.getCenterMap(pointsData);
        this.zydLayer = webgisT.addPointsLayer_zygk(list);
      },
      removezydPoint() {
        webgisT.removePointslayer(this.zydLayer);
      },
      goback(){
        this.$emit('goback');
      },
      getClickQP(){//点击全屏方法
        this.commonjs.getNowTit(this.fullscreen,'map_tqT');
        this.fullscreen = false;
      }
    },
    components:{
      mapPopup
    },
    mounted() {
      this.init();
      //加载作业点
    },
    watch: {
      zydPoints(val, old) {
        if (val != old) {
           if (this.zydLayer != null) {
            this.removezydPoint();
          }
          this.initzydPoint();
        }
      }
    }
  }
</script>
<style scoped lang="less">

</style>

    


         6、地图弹框的组件mapPopup.vue
    


    <template>
  <div id="mapPopup" @click="popupClick">
    <div id="popupContent">
    </div>
    <div id="popupContenthover">
    </div>
  </div>
</template>

<script>
    import {mapActions} from 'vuex';
    export default {
        name: "mapPopup-地图弹框部分",
        data() {
          return {
          }
        },
        mounted(){

        },
        methods: {
           ...mapActions([

          ]),
          popupClick(even){
           let eID = even.target.id;
           if(eID == 'gdxx'){
             $(".gdModelConO").show();
             $(".gdModelConT").hide();
             $("#"+eID).addClass("tabAct").siblings().removeClass("tabAct");
           }
          if(eID == 'yxfw'){
             $(".gdModelConO").hide();
             $(".gdModelConT").show();
             $("#"+eID).addClass("tabAct").siblings().removeClass("tabAct");
           }
           if(eID == 'czmc' || eID == 'czmc_div'){
             let czmc = $("#czmc").html();
           }
          },
        },
    }
</script>

<style lang="less">
  #mapPopup {
    background: url(../../assets/images/bgGis.png) no-repeat center;
    background-size: 100% 100%;
    text-align: left;
    #popupContent {
      .tyDiv{//默认样式
        width:300px;
        height: 80px;
        padding: 2%;
        box-sizing: border-box;
      }
      p {
        color: #6e6e6e;
        line-height: 30px;
        font-size: 16px;
      }

      p:first-child {
        text-align: center;
        color: #333333;
      }
    }
    // 供电服务弹框样式
    .gdPopoverCon{
      width: 500px;
      height: 500px;
      padding: 2%;
      box-sizing: border-box;
      ul{
        overflow: hidden;
      }
      .gdModelTab{
        height:10%;
        li{
          float:left;
          width:120px;
          text-align: center;
          line-height: 42px;
          background:#053da8;
          border:1px solid #0376db;
          font-size: 20px;
          color : #fff;
          margin-right:3%;
          &:hover{
            cursor: pointer;
          }
        }
        .tabAct{
          background:#1444d0;
          border:1px solid #049eff;
        }
      }
      .gdModelCon{
        height:90%;
        padding-top:3%;
        box-sizing: border-box;
        li{
          width:100%;
          height:44px;
          p{
            float:left;
            text-align: left!important;
            color:#31e4ff!important;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            &:nth-child(odd){
              width:40%;
            }
            &:nth-child(even){
              width:60%;
            }
            span{
              color:#cef9ff;
            }
          }
        }
        .tsStyle{
          p{
            width:100%!important;
          }
        }
      }
      .gzztDiv{//工作状态
        .gzztTit{
          width:28%!important;
        }
        .gzzt{
          position:relative;
          li{
            background: url(../../assets/images/mapLi.png) no-repeat center;
            background-size: 100%;
            margin-bottom:2%;
            padding-left: 10%;
            box-sizing: border-box;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            p{
              width:40%;
              color:#fff;
            }
            span{
              display: block;
              width:60%;
              padding-top:4%;
              box-sizing: border-box;
              float:right;
              color:#00EE7E;
            }
          }
          div{
            position: absolute;
            left: 2%;
            top: 10%;
            width:2px;
            height:80%;
            border-left:1px solid #00B2FC;
          }
        }
      }
    }
    //作业管控-智慧现场弹框
    .zygkZHXC{
      height: 400px;
    }

  }
</style>

    


    ***注意这是我的项目必须的组件，方法，请谨慎使用，基于openlayer5实现的gis地图，有不懂的可以一起讨论
    收起
    展开全文

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

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

                        
    • 
                        
  • 
                            
    
                                
                                    
    模拟地图撒点，将随机产生的一些点以圆的形式画在画布上并保存为png格式的图片
    
                                    
                                2015-07-02 16:41:45
                            
    
                            
    
                                
    
                                    package com;    import java.awt.Color;    public class testGI {      /**  * @param args  * @throws IOException ...public static void main(String[] args) throws IOException { ...// TODO Auto-generated 
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Echarts + 中国地图+事件报警撒点
    
                                    
                                    
                                            千次阅读
                                    
                                2019-07-11 16:09:44
                            
    
                            
    
                                
    
                                    整个地图是给予Echarts构建，所以必须引入，至于china.js，则是中国地图的geoJson数据，并在该js中注册相关的地图，大致代码如下： (function (root, factory) {  if (typeof define === 'function' && ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        Echarts   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    高德离线地图vue-amap的api文档（1）：创建地图，撒点等等
    
                                    
                                    
                                            千次阅读
                                    
                                2020-08-13 16:11:13
                            
    
                            
    
                                
    
                                     高德离线地图的使用场景还是很多的，但是他的api在国外，想参考api对网络差的朋友来说不是一件容易的事，对我来说一样，在这里整理下他的api内容。  注：本文是将官网api挪动出来，网好的童鞋想看原版的请点击官网...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    高德离线地图vue-amap的api文档（2）：创建地图，撒点等等
    
                                    
                                    
                                            千次阅读
                                    
                                2020-08-13 17:24:15
                            
    
                            
    
                                
    
                                     高德离线地图的使用场景还是很多的，但是他的api在国外，想参考api对网络差的朋友来说不是一件容易的事，对我来说一样，在这里整理下他的api内容。  注：本文是将官网api挪动出来，网好的童鞋想看原版的请点击官网...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    谷歌地球撒点软件.rar
    
                                    
                                2019-09-11 20:24:03
                            
    
                            
    
                                
    
                                    非常好用的谷歌地球撒点软件，还带使用说明和导入模板，可以批量导入经纬度。
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    高德地图开发（三、地图marker点标记）
    
                                    
                                    
                                            千次阅读
                                    
                                2019-09-05 18:35:04
                            
    
                            
    
                                
    
                                    高德地图添加marker标记以及自定义样式标记
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    amap 高德 地图打点 地图描点 描点居中 清除打点
    
                                    
                                2021-04-30 09:13:01
                            
    
                            
    
                                
    
                                    amap 高德 地图打点 地图描点 描点居中 清除打点 废话不多say 上代码 ????记得点赞哦 ???? ????大佬请看????  添加描点  // marker：null， 放到data里 存放打点位置 方便清除打点  seachPoint(lng, lat) {  // 这里...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    “以撒的结合”地图是怎样生成的——RogueLike地图随机生成
    
                                    
                                2020-10-16 16:29:35
                            
    
                            
    
                                
    
                                    首先来看一下《以撒的结合》中地图的模样。  可以看到是由n个房间组合而成的。 这里有几个注意点：  每个房间都必须连通，即玩家可以从任意一个房间走到另外一个任意房间。 拥有不同功能的房间，并且按照功能有特殊...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        游戏开发   
                                        unity3d   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    高德地图marker点多类点切换问题
    
                                    
                                2020-06-05 17:58:13
                            
    
                            
    
                                
    
                                    class名称 给他们做显示隐藏（比较lou的方法大家不要学习）这样做的后果会导致一个问题就是地图上的自己定义的内容是隐藏起来了看不到了 但是点击地图 还是存在这个marker点的 再加上macker有点击事件绑定更加明显  ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        前端   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    gis项目海量撒点思路
    
                                    
                                2020-10-28 20:00:08
                            
    
                            
    
                                
    
                                    离散聚合点 2.解决办法二 将点位数据发布成服务，加载图片的形式加载数据。 （1）数据同步问题：将数据发布到服务端（arcgis service 或geoserver）数据无法与数据库同步，这样需要创建sde库，保证数据更新的同时...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    百度地图API 重新生成点聚合解决点覆盖问题
    
                                    
                                    
                                            千次阅读
                                    
                                2017-08-16 09:18:57
                            
    
                            
    
                                
    
                                    我使用百度点聚合用来解决加载大量点要素到地图上并可以查询,但是出现了一个问题，就是同一页面的点要素中随着查询次数的增加会产生点叠加覆盖现象的问题，再次记录改进并提高性能的方法。
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    高德地图加载海量点
    
                                    
                                    
                                            千次阅读
                                    
                                2017-09-12 15:24:03
                            
    
                            
    
                                
    
                                    项目中需要加载的点标记过多，页面加载速度特别慢，查阅了一下高德的API，发现在其对图层的介绍时有一个为加载海量麻点的图层可以解决此问题
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    openlayers地图显示点
    
                                    
                                2018-08-09 14:58:00
                            
    
                            
    
                                
    
                                     //图形样式，主要适用于点样式  image: new ol.style.Circle({  //半径大小  radius: 7,  //填充  fill: new ol.style.Fill({  //填充颜色  color: '#e81818'  })  }),  //层  zIndex: 20  });  };   function ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    高德地图JS添加海量点
    
                                    
                                2020-12-17 10:54:09
                            
    
                            
    
                                
    
                                    //创建地图 ditu_add 容器ID var map = new AMap.Map('ditu_add', { 	zoom: 12, //级别 	center: [118.326443, 35.065282], //中心点坐标 	viewMode: '3D', //使用3D视图 	mapStyle: "amap://styles/8ce81794726a2...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    百度地图显示多个点
    
                                    
                                    
                                            千次阅读
                                    
                                2017-08-17 15:47:35
                            
    
                            
    
                                
    
                                    百度地图
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    高德地图通过中心点绘制矩形
    
                                    
                                2020-09-15 13:18:00
                            
    
                            
    
                                
    
                                    通过中心点绘制矩形（高德地图为例） 原理：通过高德地图提供的API，LngLat的offset方法实现。 // 简单实现绘制正方形，side 正方形边长，单位米 // 若需要绘制其他矩形，需自行修改代码 function ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        坐标   
                                        矩形   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    mapbox-gl 展示 撒点 图层
    
                                    
                                2020-07-08 22:14:58
                            
    
                            
    
                                
    
                                     link_spjks_sd.textContent = '--撒点'; //图例 var map_overlay = document.querySelector('.map-overlay'); var legend_lists = document.getElementById('legend-lists'); link_spjks_sd.onclick = function(e) ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        js   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Android 高德地图，N个经纬度点(线)，刚好显示地图中
    
                                    
                                    
                                            千次阅读
                                    
                                2017-03-30 15:11:42
                            
    
                            
    
                                
    
                                    自定义的Overlay,目的是使所有的点，和连线能刚好的显示在当前地图屏幕区域中 使其自动调整地图的图层层级 点的个数是不确定 如：假设共有100个Latlng,其中，50个点在郑州，20个点在北京，30个点在济南， 当前的地图...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        android   
                                        overlay   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    高德地图-删除多个指定点标记
    
                                    
                                    
                                            万次阅读
                                    
                                2016-11-03 23:13:37
                            
    
                            
    
                                
    
                                    1、问题背景 高德地图上标记多个标记，点击删除按钮，可以删除指定的几个点标记2、...	 高德地图-删除多个指定点标记 	  	  	  	 	 		 		 		  		 		 		 var map = new AMap.Map("container", { 		 resizeEnable: true,
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        jquery   
                                        JavaScript   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    天地图上添加删除坐标点
    
                                    
                                    
                                            千次阅读
                                    
                                2018-03-06 14:17:43
                            
    
                            
    
                                
    
                                    1，在js中var sign = 1;...jQuery(document).ready(function () { //初始化地图对象 map = new TMap("mapDiv"); var p = new TLngLat(CenterCo.split('|')[0], CenterCo.split('|')[1]);//地...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    vue中使用百度地图创建多点信息窗口
    
                                    
                                    
                                            千次阅读
                                    
                                2020-01-13 16:23:53
                            
    
                            
    
                                
    
                                    点一点，赞一赞，好习惯！O(∩_∩)O 项目下载地址：https://github.com/sy-zy/VueBMapInfoWindow  这是一个关于在Vue.js项目中使用百度地图创建多点信息窗口二次封装的组件。窗口内部的内容需自己编写样式。 该组件...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        前端   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    arcgis android 撒点报错 VerifyError，demo中运行没问题的
    
                                    
                                2016-09-29 10:29:17
                            
    
                            
    
                                
    
                                    代码在demo中跑起来完全正常，但是在整合到项目中之后能显示地图，但是无法撒点，卡在GraphicsLayer.addGraphic()，每次一到这里就报错，闪退    java.lang.VerifyError: com/esri/core/internal/util/d   at ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    高德地图绘制标记点，点击弹出弹框进入第三方地图软件
    
                                    
                                    
                                            千次阅读
                                    
                                2020-09-29 14:48:31
                            
    
                            
    
                                
    
                                    需求：根据经纬度绘制标记点，点击标记点弹出弹框和底部按钮，点击顶部弹框进入二级界面，点击底部按钮弹出第三方地图软件选择页，实现跨进程跳转。 项目是公司项目，只放出重要部分代码。 绘制标记点： final ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        app   
                                        android   
                                
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                        ... 
                    
                        20 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    1,268
            

            

                精华内容
                    507
            

        

        

            
热门标签

            
        


        


        

            关键字：
地图撒点