中国地图带位置标点

已于 2024-07-08 16:48:24 修改
阅读量100 收藏
点赞数 1
文章标签： javascript 前端 angular.js
于 2024-07-08 16:44:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Crazy___Promise/article/details/140273008
版权 

<template>
    <div class="mapChina">
        <div id="mapEcharts"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import chinamap from '../assets/json/china.json'
import 'echarts-gl'
import bdImg from '../assets/img/dianwei.png'
/* eslint-disable */
export default {
    name: 'mapChina',
    props: {
        title: String,
        mapChinaList: Array,
    },
    data() {
        return {
            myChart: '',
            tooltips: '',
            alirl: [],

            l: [],
            address: []
        }
    },

    mounted() {
        setTimeout(() => {
            this.echartsInit()
        }, 400)
    },

    watch: {
        mapChinaList() {
            this.echartsInit()
        },
    },

    methods: {
        convertData() {
            var res = []
            if (this.mapChinaList.length > 0) {
                this.address = []
                this.mapChinaList.forEach(e => {
                    this.address.push({
                        name: e.companyName,
                        person: e.person,
                        contact: e.contact,
                        purchaseNum: e.purchaseNum,
                        jing: [e.lon, e.lat]
                    })
                    // [1,2]

                    res.push({ coords: [[Number(e.lon), Number(e.lat)], [Number(e.lon), Number(e.lat)]], lineStyle: { color: '#d5b314' } })
                    // res.push({ coords: [[Number(e.lon), Number(e.lat)]], lineStyle: { color: '#d5b314' } })
                })
                console.log('🚀 ~ convertData ~ res:', res)
                console.log('🚀 ~ convertData ~ address:', this.address)
            }


            return res
        },
        convertData1() {
            var res = []
            if (this.mapChinaList.length > 0) {
                this.mapChinaList.forEach(e => {
                    //     {value: [118.8062, 31.9208],itemStyle:{color:'#4ab2e5'}}
                    //   , {value: [127.9688, 45.368],itemStyle:{color:'#4fb6d2'}}
                    res.push({
                        value: [Number(e.lon), Number(e.lat)],
                        itemStyle: { color: '#b9be23' },
                        companyName: e.companyName,
                        person: e.person,
                        contact: e.contact,
                        purchaseNum: e.purchaseNum,
                    })
                })
                console.log('🚀 ~', res)
            }


            return res
        },
        echartsInit() {
            var myChart = echarts.init(document.getElementById('mapEcharts'))
            echarts.registerMap('china', chinamap) //用导入的json文件注册一个name:china的var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json";
            // var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
            myChart.showLoading();
            let index = -1;
            myChart.hideLoading();
            var option = {
                backgroundColor: 'transparent',
                /*   title: {
                       top: 20,
                       text: '“困难人数” - 杭州市',
                       subtext: '',
                       x: 'center',
                       textStyle: {
                           color: '#ccc'
                       }
                   },*/
                // grid: {},
                tooltip: {
                    triggerOn: 'click',
                    trigger: 'item',
                    padding: [0, 0], // 设置内边距，例如 [5, 10] 分别表示上下和左右的内边距
                    formatter: function (params) {
                        console.log(params)
                        // return '公司名称：' + params.data.companyName + ' 负责人: ' + params.data.person + ' 联系方式: ' + params.data.contact;
                        // var tooltipHtml = '';
                        // tooltipHtml += '<strong>公司名称：' + params.data.companyName + '</strong>';
                        // tooltipHtml += '<br/>';
                        // tooltipHtml += '负责人: ' + params.data.person;
                        // tooltipHtml += '<br/>';
                        // tooltipHtml += '联系电话: ' + params.data.contact;
                        // return tooltipHtml

                        const bgUrl = require('../assets/img/biaozhu.png')
                        var str = `<div style = "background: url(${bgUrl});background-size: 100% 100%;height:200px;width:300px;color:#FFFFFF;margin:0;padding:0;">
                        <div style="font-weight: 500;font-size: 14px;color: #FFFFFF;box-sizing:border-box;width: 100%;height: 24px;line-height:24px;text-align:left;padding: 1px 5px; border: 1px solid #39A0EB;border-left:none;border-right:none;text-align:center">
                            ${params.data.companyName}
                        </div>
                        <div style="width:100%;padding:7px;box-sizing:border-box;text-align:left">
                            <div style="font-weight: 500;font-size: 12px;color: #FFFFFF;height:16px;padding-left:18px;margin-bottom:10px">负责人:${params.data.person}</div>
                            <div style="width:100%;padding:7px;box-sizing:border-box;text-align:left">
                            <div style="font-weight: 500;font-size: 12px;color: #FFFFFF;height:16px;padding-left:18px;margin-bottom:10px">采购量:${params.data.purchaseNum}</div>
                            <div style="box-sizing:border-box;overflow:hidden;width:270px;word-wrap:break-word;padding-left:18px;font-weight: 500;font-size: 12px;color: rgba(255,255,255,0.72);">联系电话:${(params.data.contact)
                            }</div>
                        </div>
                    </div>`
                        return str
                    }
                },
                geo: {
                    map: 'china',
                    layoutCenter: ['50%', '70%'],//位置
                    layoutSize: '140%',//大小
                    aspectScale: 0.75, //长宽比
                    zoom: 1,
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [{
                                    offset: 0,
                                    // color: '#09132c' // 0% 处的颜色
                                    color: '#09132c' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#274d68'  // 100% 处的颜色
                                }],
                                globalCoord: true // 缺省为 false
                            },
                            shadowColor: 'rgb(58,115,192)',
                            shadowOffsetX: 10,
                            shadowOffsetY: 11
                        },
                        emphasis: {
                            areaColor: '#4086e9',
                            borderWidth: 0,
                            color: 'green',
                            label: {
                                show: false
                            }
                        }
                    },
                    regions: [{
                        name: '南海诸岛',
                        itemStyle: {
                            areaColor: 'rgba(0, 10, 52, 1)',

                            borderColor: 'rgba(0, 10, 52, 1)',
                            normal: {
                                opacity: 0,
                                label: {
                                    show: false,
                                    color: "#009cc9",
                                }
                            }
                        },


                    }],
                },
                series: [{
                    type: 'map',
                    roam: false,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#1DE9B6'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: 'rgb(183,185,14)'
                            }
                        }
                    },

                    itemStyle: {
                        normal: {
                            borderColor: 'rgb(147, 235, 248)',
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [{
                                    offset: 0,
                                    color: '#09132c' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#274d68'  // 100% 处的颜色
                                }],
                                globalCoord: true // 缺省为 false
                            },
                        },
                        emphasis: {
                            areaColor: 'rgb(46,229,206)',
                            //    shadowColor: 'rgb(12,25,50)',
                            borderWidth: 0.1
                        }
                    },
                    zoom: 1,
                    layoutCenter: ['50%', '70%'],//位置
                    layoutSize: '140%',//大小
                    map: 'china' //使用
                    // data: this.difficultData //热力图数据   不同区域 不同的底色
                }, {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    showEffectOn: 'render',
                    zlevel: 4,
                    rippleEffect: {
                        period: 15,
                        scale: 4,
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            offset: [15, 0],
                            color: '#1DE9B6',
                            show: true
                        },
                    },
                    itemStyle: {
                        normal: {
                            // width: '70px',
                            color: '#1DE9B6',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    symbolSize: 12,
                    data: this.convertData1()
                }

                ]
            };
            myChart.setOption(option, true);
        },
    },
}
</script>
  
<style scoped lang="less">
#mapEcharts {
    width: 100%;
    height: 100%;
}

.mapChina {
    width: 100%;
    height: 100%;
    // background-color: transparent;
    // background: pink;
}

::v-deep .echarts-tooltip {
    padding: 0 !important;
    /* 去除默认的 padding */
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
    background-color: rgba(255, 255, 255, 0.9);
    /* 背景颜色及透明度 */
    color: #333;
    /* 文字颜色 */
    font-size: 12px;
    /* 字体大小 */
}
</style>

兴奋的马喽
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts 世界地图标点_echarts中国地图3D各个城市标点demo
weixin_36382534的博客
02-01 1135
3D中国#main {width:1000px; height: 500px;margin: auto;border:2px solid green;}let geoCoordMap = {"海门": [121.15, 31.89], "鄂尔多斯": [109.781327, 39.608266], "招远": [120.38, 37.35], "舟山": [122.207216, 29.9852...
echarts 5.0——3d中国地图和飞线
为技术而生
03-24 4746
echarts 5.0的版本样式语法与4.0及以下的语法有个别差异，使用旧语法浏览器会警告提示。3d地图常用的实现方法有两种。一种是使用GL来实现，一种是使用叠层和阴影来实现，本文将使用叠层和阴影来实现。
echarts实现中国地图、鼠标悬浮、点击跳转对应省市、给省市图标、缩放、拖拽、自适应
热门推荐
weixin_51225684的博客
03-09 1万+
【代码】echarts实现中国地图、鼠标悬浮、点击跳转对应省市、给省市图标、缩放、拖拽、自适应。
中国地图带点位标记
最新发布
Crazy___Promise的博客
07-08 668
echarts.registerMap('china', chinamap) //用导入的json文件注册一个name:china的var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json";// return '公司名称：' + params.data.companyName + ' 负责人: ' + params.data.person + ' 联系方式: ' + params.data.contact;
echarts中国地图3D各个城市标点demo
CnmcncoCM的博客
04-15 7491
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;meta http-equiv="X-UA-Compatible" content="IE=EDGE"&gt;    &lt;title&gt;3D中国&lt;/title&am
Echart实现中国地图和地图打点
weixin_64310738的博客
12-04 572
首先ECharts 是一个使用 JavaScript 实现的开源可视化库。兼容当前绝大部分浏览器，而且提供大量可交互、可高度个性化定制的图表，满足开发者各种需求。今天主要展示echarts地图功能。echarts内置了世界地图、中国及各个省市自治区地图数据，可通过标准GeoJson扩展地图类型。
echarts中国省份地图加城市定位（打点）
梁诗傑的博客
06-11 9233
复制粘贴即可看到效果。
uni-app-echarts+PC+移动端中国地图下钻+标点+统计+放大缩小.rar
10-21
地图标点是ECharts中的一种常见功能，用于在地图上标记特定的位置或事件。在这个案例中，可能在各个城市或特定地理位置添加了标点，以表示某种统计数据或事件的发生。标点可以包含自定义的图标、颜色和数据信息，...
Echarts地图.7z
09-25
Echarts支持中国省级、市级甚至更细致的区县级地图，同时也支持世界地图。地图数据通过JSON加载后，Echarts可以根据数据动态渲染地图，展示不同地区的数据分布。 2. **js文件**： 压缩包中的js文件很可能是Echarts...
百度地图多浏览器标点实用小工具
12-16
支持多种浏览器的百度地图浏览器标点小工具。可以自行修改图标，自由标点不受个数限制。可以保存到文件，下次使用重新选取文件并加载到地图。非常适合售前人员或者工程项目讲解人员使用。具体使用请参看说明文件夹里的note.txt文件。
echarts省市县三级地图
12-06
本主题聚焦于“echarts省市县三级地图”，这通常用于展示中国区域数据，例如人口统计、经济指标或者销售分布等。ECharts3Map中的这个功能允许用户通过点击省份来逐级展开到市级乃至县级的地图，提供了一种直观的地理...
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播
04-25
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题,解压直接使用 【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回...
jsp使用ECharts动态在地图上标识点
10-21
在series中可以设置地图类型（type: 'map'）和地图类型（mapType），例如'china'表示中国地图，还可以设置地图的颜色样式（itemStyle）和高亮样式（emphasis）等。 点标识（markPoint）是ECharts中用于在地图上标识...
eCharts01-地图标记散点图
GoodAll_K的博客
02-28 1098
1.准备 ①eCharts.js ②地图数据world.js 或者china.js 或者各个省份的地图数据xxxx.js https://echarts.baidu.com/download-map.html 官网停止下载 可以在github中找到新的下载地址：https://github.com/apache/incubator-echarts 在option...
vue+echarts绘制中国地图，动态配置省份颜色和城市标点
qq_38655872的博客
05-25 5549
最近做了一个需求，是绘制中国地图，要动态配置省份颜色和城市标点。写下这篇文章记录一下。
echarts中国地图根据坐标在地图上标点
weixin_42707543的博客
06-13 7822
<div style="width: 35%;margin-left: -55px;position: absolute;height: 450px;" id="main"></div> $(function () { $.post('[[${ctx}]]/adviertisement/AdvertisingPage/getMap', { ...
echarts 中国地图标注所在点
weixin_30414305的博客
12-07 3848
达到的效果： 1.本身是个中国地图‘ 2.直接通过经纬度标注 3.标注点可以是其他样子（比如：五角星） 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击（可以添加为链接事件）； 所需要技术 1.echarts.min.js 2.china.js 直接上代码 $(document).ready(function(){$.ajax({ url:'', ...
百度地图api添加带方向标点
05-28
要在百度地图上添加带有方向的标点，可以使用Marker类的setIcon方法来设置标点的图标，将图标设置为带箭头的图片即可。以下是一个简单的示例代码，可以在地图上添加一个带有方向的标点： ``` // 创建地图实例 var map = new BMap.Map("map-container"); // 创建标点坐标 var point = new BMap.Point(116.404, 39.915); // 创建标点对象 var marker = new BMap.Marker(point); // 创建标点图标 var icon = new BMap.Icon('arrow.png', new BMap.Size(32, 32), { imageSize: new BMap.Size(32, 32) }); marker.setIcon(icon); // 将标点添加到地图上 map.addOverlay(marker); ``` 在这个示例中，我们首先创建了一个地图实例，然后创建了一个标点坐标，接着创建了一个标点对象，并创建了一个带箭头的图标，并将其设置为标点对象的图标。最后将标点添加到地图上即可。注意，这里的箭头图片需要自己准备。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值