资讯专栏INFORMATION COLUMN

VUE 记一次高德地图和Echarts(中国地图)

KoreyLee / 3879人阅读

摘要:效果图准备工作高德地图申请安装中国地图高德地图官方点我进入创建动态创建标签后的是需要的插件中国地图安装开始使用创建组件写入需要的分布指数高低写入高德地图需要的

效果图

准备工作

高德地图申请key

安装Echarts 中国地图

高德地图

官方API:点我进入

创建AMap.js

export default function MapLoader () {
    return new Promise((resolve, reject) => {
      if (window.AMap) {
        resolve(window.AMap)
      } else {
      // 动态创建script标签
        var script = document.createElement("script")
        script.type = "text/javascript"
        script.async = true
        script.src = "https://webapi.amap.com/maps");;
        // plugin后的是需要的插件
        script.onerror = reject
        document.head.appendChild(script)
      }
      window.initAMap = () => {
        resolve(window.AMap)
      }
    })
}

Echarts 中国地图

安装Echarts

npm install echarts -S

开始使用

创建组件 distribution.vue

写入Echarts 需要的DOM

    

分布指数

写入高德地图需要的DOM

    

引入高德地图、Echarts

    import "echarts/map/js/china"; //中国地图js
    import MapLoader from "components/home/AMap"

Echarts方法

generateEcharts() {
    var echarts = require("echarts");
    var myChart = echarts.init(this.$refs.main);  // 基于准备好的dom,初始化echarts实例
    this.$ajax.get(this.HOST + "/redesign/home/findEnterpriseistribution").then( (res) => {
        // 数据格式
        // [
        //   {name: "北京", value: 3, ranking: 1},
        //   {name: "河北", value: 2, ranking: 2},
        //   {name: "上海", value: 1, ranking: 3},
        //   {name: "广东", value: 1, ranking: 4}
        //   ...
        // ]
        this.homebution = res.data.resultObject;
        var data = [];
        for (let i = 0; i < res.data.resultObject.length; i++) {
            this.homebutionnum += res.data.resultObject[i].value;
            let classnum = ""
            // 排名显示样式
            if(res.data.resultObject[i].ranking == 1) { 
                classnum = "#1669e6"
            }else if(res.data.resultObject[i].ranking > 1 && res.data.resultObject[i].ranking <= 4) {
                classnum = "#31a4ed"
            }else if(res.data.resultObject[i].ranking > 4 && res.data.resultObject[i].ranking <= 10) {
                classnum = "#2cccfd"
            }else if(res.data.resultObject[i].ranking > 10 && res.data.resultObject[i].ranking <= 20) {
                classnum = "#7fe2fd"
            }else {
                classnum = "#d9f4fe"
            }
            data.push(
                {
                    name: res.data.resultObject[i].name,
                    itemStyle: {
                        normal: {
                            areaColor: classnum,
                            // borderWidth: 2
                        },
                        emphasis: {//高亮状态下的多边形和标签样式
                            borderWidth: 1,
                            // borderColor: "#d9f4fe",
                            areaColor: "#d9f4fe",
                            label: {
                                shadowColor: "#d9f4fe", //默认透明
                                shadowBlur: 10,
                                show: true,
                                textStyle: {
                                    fontSize: 12,
                                    color: "#3db77f"
                                }
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12,
                                color: "#0d6fb8"
                            }
                        },
                        emphasis: {
                            show: true,
                            color: "#3db77f"
                        }
                    },
                    value: res.data.resultObject[i].value ");"",
                    ranking: res.data.resultObject[i].ranking ");""
                }
            )
        }
        // 准备提示数据
        var option = {
            tooltip: {
                formatter:  (params) => {
                    var info = "";
                        if(params.data) {
                            info = `

${ params.name }

${ params.data.value }

排名:${ params.data.ranking }

`
}else { info = `

${ params.name }

`
} return info; }, backgroundColor: "rgba(0,0,0,.6)",//提示标签背景颜色 textStyle: { color: "#fff" } //提示标签字体颜色 }, //配置属性 series: [{ name: "数据", type: "map", mapType: "china", roam: true, label: { normal: { show: false //省份名称 }, emphasis: { show: false } }, data: data //数据 }], }; //使用制定的配置项和数据显示图表 myChart.setOption(option); }) }

高德地图方法

Scottmap() {
    let that = this;
    that.map = "";
    MapLoader().then(AMap => {
        console.log("地图加载成功")
        that.map = new AMap.Map("container", {
            center: [116.05438, 38.98065],
            // center: [116.397428, 39.90923],
            zoom: 5
        })
        // 由于项目是按雄安地区使用 API暂时还未把雄安划分 所以决定把安新县、雄县、容城县(三县合一就是雄安)绘制成高亮
        // 绘制高亮
        var district = new AMap.DistrictSearch({
            // 返回行政区边界坐标等具体信息
            extensions: "all",
            // 设置查询行政区级别为 区 
            level: "district"
        })
        var polygons=[];
        var polygons2=[];
        var polygons3=[];
        district.search("安新县", (status, result) => {
            if(polygons) {
                that.map.remove(polygons)//清除上次结果
            }
            polygons = [];
            let bounds = result.districtList[0].boundaries;
            if (bounds) {
                for (let i = 0; i < bounds.length; i++) {
                    //生成行政区划polygon
                    var polygon = new AMap.Polygon({
                        strokeWeight: 1,
                        path: bounds[i],
                        fillOpacity: 0.4,
                        fillColor: "#80d8ff",
                        strokeColor: "#0091ea"
                    });
                    polygons.push(polygon);
                }
            }
            that.map.add(polygons);
        });
        district.search("雄县", (status2, result2) => {
            if(polygons2) {
                that.map.remove(polygons2)//清除上次结果
            }
            polygons2 = [];
            let bounds = result2.districtList[0].boundaries;
            if (bounds) {
                for (let i = 0; i < bounds.length; i++) {
                    //生成行政区划polygon
                    var polygon = new AMap.Polygon({
                        strokeWeight: 1,
                        path: bounds[i],
                        fillOpacity: 0.4,
                        fillColor: "#80d8ff",
                        strokeColor: "#0091ea"
                    });
                    polygons2.push(polygon);
                }
            }
            that.map.add(polygons2)
        })
        district.search("容城县", (status2, result2) => {
            if(polygons3) {
                that.map.remove(polygons2)//清除上次结果
            }
            polygons3 = [];
            let bounds = result2.districtList[0].boundaries;
            if (bounds) {
                for (let i = 0; i < bounds.length; i++) {
                    //生成行政区划polygon
                    var polygon = new AMap.Polygon({
                        strokeWeight: 1,
                        path: bounds[i],
                        fillOpacity: 0.4,
                        fillColor: "#80d8ff",
                        strokeColor: "#0091ea"
                    });
                    polygons3.push(polygon);
                }
            }
            that.map.add(polygons3)
        })
        // 构造矢量圆形(圆)
        let circle = new AMap.Circle({
            center:  [116.05438, 38.98065], // 雄安的中心点
            radius: that.distance * 1000,  //半径
            strokeColor: "#ffffff",  //线颜色
            strokeOpacity: 1,  //线透明度
            strokeWeight: 3,  //线粗细度
            fillColor: "#276cd4",  //填充颜色
            fillOpacity: 0.2 //填充透明度
        });
        that.map.add(circle);
        that.map.setFitView(circle);
        let lnglat = new AMap.LngLat(116.05438, 38.98065) // lng, lat 替换成传入的坐标 
        let polylinePath = [
            new AMap.LngLat(116.05438, 38.98065),
            new AMap.LngLat(lnglat.offset(that.distance * 1000,0).lng,38.98065)
        ];
        // 创建线覆盖物
        let polyline = new AMap.Polyline({
            path: polylinePath,
            strokeColor: "#ffffff", //线颜色
            strokeOpacity: 1,       //线透明度
            strokeWeight: 2,        //线宽
            strokeStyle: "solid",   //线样式
            strokeDasharray: [10, 5] //补充线样式
        });
        that.map.add(polyline);
        // 绘制字
        let textPos = lnglat.offset(that.distance * 500,that.distance * 50);
        let text = new AMap.Text({
            text: `${ that.distance }公里`,
            position: textPos,
            map: this.map,
            style:{
                    "background": "transparent",
                    "border": "0 none",
                    "color": "#276cd4",
                    "font-size":"14px"}
        })
        that.map.add(text);
        // 测试距离
        let Centralpoint = [116.05438, 38.98065];
        let targetpoint = this.region
        // debugger
        // 转经纬度
        let geocoder = new AMap.Geocoder({
            city: "全国", //城市设为北京,默认:“全国”
        });
        let markernum = 0
        for (let i = 0; i < targetpoint.length; i++) {
            geocoder.getLocation(targetpoint[i], (status, result) => {
                if (status === "complete"&& result.geocodes.length) {
                    let dis = AMap.GeometryUtil.distance(Centralpoint,result.geocodes[0].location);
                    // 绘制点标记显示内容,HTML要素字符串
                    if(dis <= that.distance * 1000) {
                        markernum++;
                        let markerContent = "" +
                            "
" + " " + "
"+ markernum +"
"
+ "
"
; this.$ajax.get(this.HOST + "/redesign/home/findCompanyAll").then( (res) => { this.matchingenterpriseList.push(res.data.resultObject[i]) }) let marker = new AMap.Marker({ content: markerContent, position: result.geocodes[0].location, offset: new AMap.Pixel(-13, -30), extData:{ id: markernum } }); that.markers.push(marker); marker.setMap(this.map); } } }) } that.matchingenterpriseState = true; }, e => { console.log("地图加载失败" ,e) }) },

左侧企业列表

// 企业鼠标经过
matchingenterprisemouseenter(item,index) {
    this.activemetchmouseenter = index;
    let targetMarker = {};
    for (let i = 0; i < this.markers.length; i++) {
        let id = this.markers[i].getExtData().id;
        if(id == index){
            targetMarker = this.markers[i];
            break;
        }
    }
    // 重新替换样式
    let markerContent = "" +
        "
" + " " + "
"+ index +"
"
+ "
"
; // targetMarker.setIcon("//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"); targetMarker.setContent(markerContent) let position = targetMarker.getPosition(); this.infoWindow = new AMap.InfoWindow({ position: position, offset: new AMap.Pixel(0, -35), content: item.companyName }); this.infoWindow.open(this.map); },
// 企业鼠标离开
matchingenterprisemouseleave(item,index) {
    this.activemetchmouseenter = "";
    let targetMarker = {};
    for (let i = 0; i < this.markers.length; i++) {
        let id = this.markers[i].getExtData().id;
        if(id == index){
            targetMarker = this.markers[i];
            break;
        }
    }
    let markerContent = "" +
        "
" + " " + "
"+ index +"
"
+ "
"
; // targetMarker.setIcon("//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"); targetMarker.setContent(markerContent) this.map.remove(this.infoWindow); },
// 企业点击
matchingenterpriseclick(item,index) {
    this.activeState3 = true;
    this.activeState1 = false;
    this.activeState = false;
    this.itemList = item;
    // this.map.remove(overlayGroups);
    let geocoder = new AMap.Geocoder({
        city: "全国", //城市设为北京,默认:“全国”
    });
    geocoder.getLocation(item.address, (status, result) => {
        this.map.setCenter(result.geocodes[0].location); //设置地图中心点
        this.map.setZoom(30); // 缩放级别
    })
},

具体代码

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/7867.html

相关文章

  • vuevuex,echarts,地图,ueditor的使用

    摘要:获取富文本内容地图我是使用高德地图在全局导入为我申请的也可以自己去申请高德地图官网案例 前言 今天是个好日子,大家六一快乐;vue-cli生成的template还需要配置axios,vuex,element等插件,该项目中将这些常用插件进行了配置;项目开发中template可以快速复用,也是可以快速上手vue的一个demo; 1.动态效果图 showImg(https://segmen...

    Cheriselalala 评论0 收藏0
  • echarts结合高德API进行地图下钻

    摘要:广告开始最近做了表格数据转成图表展示的一个组件,地址如下整合地图的时候发现针对地级市的一些文件太多了,全部引入后有将近,所以就用了下高德老爷给的组件和接口,然后弄完在这记录一下虽然这种例子在社区里有很多这个组件文件放在了中,样式奇丑,请原谅 /——————广告开始——————/ 最近做了表格数据转成图表展示的一个react组件,地址如下: https://github.com/Lyla...

    happen 评论0 收藏0
  • vue地图可视化 ArcGIS篇(3)

    摘要:不建议底图选择中存在两种不同坐标体系,如下图坐标存在明显的偏差,火星坐标在采用坐标系的地图上位置偏上彩色中国天地图全球卫星地图例如我们使用的类进行查找,返回的数据都是国际坐标,因此必须进行偏差纠正。 ArcGIS for javascript开发心得 本次实例中采用ArcGIS for javascript3.24版本,由于版本3与4在API等存在较大区别,就不一一列举,详细区别看官方...

    oogh 评论0 收藏0
  • 开发一个基于 Vue2.0 的个人天气预报

    摘要:本场是一个基于的个人天气预报项目,就是兴趣所致,做来玩玩。本项目会采用高德地图,可视化库和相关的技术来开发本项目。本场你将学到如下内容学会制作自己的天气预报学会使用部分高德地图的学会使用的部分相关的一些技术。有兴趣的请到查看效果图如下 本场 Chat 是一个基于 Vue 的个人天气预报项目,就是兴趣所致,做来玩玩。顺便扩展一下知识面。 本项目会采用高德地图 API,Echarts 可视...

    mushang 评论0 收藏0
  • 开发一个基于 Vue2.0 的个人天气预报

    摘要:本场是一个基于的个人天气预报项目,就是兴趣所致,做来玩玩。本项目会采用高德地图,可视化库和相关的技术来开发本项目。本场你将学到如下内容学会制作自己的天气预报学会使用部分高德地图的学会使用的部分相关的一些技术。有兴趣的请到查看效果图如下 本场 Chat 是一个基于 Vue 的个人天气预报项目,就是兴趣所致,做来玩玩。顺便扩展一下知识面。 本项目会采用高德地图 API,Echarts 可视...

    honmaple 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<