高德地图实现的数据统计切换街景地图

一，实现的效果

（注，点聚合功能也是可以的,只是这图片没有用后台返回的数据，所以没看到点聚合的效果，本案例的点聚合是有后台接口的，参考的朋友改成你们自己项目的接口即可）

二，项目地址

https://gitee.com/ling-xu/gaud-map-vue

三，关键代码

<template><div:id="idHash"class="container"style="z-index:1"/>
</template>
<script>
import pin1 from "../assets/pin1.png";
import pin2 from "../assets/pin2.png";
import pin3 from "../assets/pin3.png";
import pin4 from "../assets/pin4.png";
import pin5 from "../assets/pin5.png";
import axios from "axios";
export default {name: "MapChart",props: {year: { type: String, default: "2021" },// zoom: { type: Number, default: 4 },showData: { type: Boolean, default: false },locationList: Array, //产业数据-面店分布的地图显示传入数据getLocation: { type: Boolean, default: false } //首页-面店分布的图片显示},data: () => ({loading: false,idHash: "MapContainer" + new Date().getTime(),disProvinces: " ",map: {}, //地图对象depFeatures: [], //地图标注内容lineArr: []}),watch: {year() {this.refresh();},locationList() {this.refresh();}},mounted() {// eslint-disable-next-line no-undefinedif (window.AMap == undefined) {const script = document.createElement("script");script.src ="https://webapi.amap.com/maps?v=1.4.15&plugin=AMap.MarkerClusterer,Map3D,AMap.DistrictLayer,AMap.DistrictSearch&callback=initAMap&key=de45c1a0e7ea44bea49388cea9cca2f7";document.head.appendChild(script);window.initAMap = () => {this.refresh();};} else {this.refresh();}},methods: {refresh() {let that = this;if (!window.AMap) {return;}const opts = {subdistrict: 0,extensions: "all",level: "province"};//直接通过经纬度构建mask路径// eslint-disable-next-line no-undefconst district = new AMap.DistrictSearch(opts);district.search("青海省", function(status, result) {const bounds = result.districtList[0].boundaries;const mask = [];for (let i = 0; i < bounds.length; i += 1) {mask.push([bounds[i]]);}// eslint-disable-next-line no-undefconst Map = new AMap.Map(that.idHash, {mask: mask, //只显示包裹起来的区域resizeEnable: false, //是否监控地图容器尺寸变化showIndoorMap: false, //关闭室内地图center: [96.01909121185537, 35.874643454131984],viewMode: "3D",dragEnable: false, //初始状态下不可移动// pitch: 0,zoom: 6.9,features: that.depFeatures, //初始色块模式下，不显示标注等信息mapStyle: "amap://styles/021981e1781074e215441507a954df4b" //设置地图的显示样式});that.map = Map; //把这里面创建的地图对象存起来，让这个指针指向它，后续要使用//青海省描边--（原因是黄南中间有块地方，是属于海南自治区的。）for (let i = 0; i < bounds.length; i += 1) {// eslint-disable-next-line no-undefnew AMap.Polyline({path: bounds[i],strokeColor: "#1a77aa",strokeWeight: 20,map: Map});}//点聚合数据处理if (that.showData) {// 地图的数据由父组件传入that.updateMark(Map, that.locationList);} else if (that.getLocation) {// 首页-面店分布的图片显示axios({url: "diagram/getShopDistribute2",method: "get", // defaultbaseURL: "http://47.115.140.114:5001/api/report/",headers: {"x-user-token":"eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJiYW5rZm9ydGVzdDAwMSIsInN1YiI6ImxvZ2luLmxvZ2luIiwiaWF0IjoxNjI0NjA1MTkxLCJhdXRob3JpemF0aW9uIjp7fSwiYWFhIjoiYWFhIiwiZGVwdE5hbWUiOiLpnZLmtbfmi4npnaLkuqfkuJrnu7zlkIjmnI3liqHlubPlj7AiLCJsb2dpblRpbWUiOiIyMDIxLTA2LTI1IDE1OjEzOjExIiwidW5pdE5hbWUiOiLpnZLmtbfmi4npnaLkuqfkuJrnu7zlkIjmnI3liqHlubPlj7AiLCJwcm92aW5jZSI6IjQ0MDAwMCIsImNpdHkiOiI0NDAxMDAiLCJ1bml0Q29kZSI6ImxhbWlhbiIsInJlZGlzVG9rZW4iOiI2ODVjMjU1YS0xYmRmLTRhMDQtOWZlYy1kMjMwZTNmYzU4ODYiLCJ0ZW5hbnRJZCI6ImxhbWlhbiIsInN0YWZmVHlwZTIiOiI0IiwiZGVwdENvZGUiOiJsYW1pYW4iLCJleHAiOjE2MjQ2MDY5OTEsInVzZXJuYW1lIjoiYmFua2ZvcnRlc3QwMDEifQ.p8O7Sn86G_wFhSGimNaEd6sUFddiVsbYSbaGsKpa4Gg"}}).then(res => {that.updateMark(Map, res.data.locationList);});}//按行政区填充色块that.initPro(Map);//也可以改用覆盖物填充的方式填充行政区// that.alldrawBounds(Map);//按行政区描边that.allborderLine(Map);//监听地图的缩放事件Map.on("zoomstart", function() {console.log("放大级别：", Map.getZoom());if (Map.getZoom() >= 7) {that.zoomChange();} else {//重新显示行政区色块that.disProvinces.show();//且需要关闭街景模式that.depFeatures = [];that.setFeature(that.map);//重新显示描边for (let i = 0; i < that.lineArr.length; i++) {that.lineArr[i].show();}}});});},//所有行政区填充色块alldrawBounds(Map) {const that = this;that.drawBounds("西宁市", Map, "#2c54cf");that.drawBounds("海西蒙古族藏族自治州", Map, "#17307c");that.drawBounds("海东市", Map, "#17307c");that.drawBounds("海南藏族自治州", Map, "#2b47ac");that.drawBounds("海北藏族自治州", Map, "#204699");that.drawBounds("果洛藏族自治州", Map, "#17307c");that.drawBounds("黄南藏族自治州", Map, "#1c3077");that.drawBounds("玉树藏族自治州", Map, "#204699");},//使用覆盖物的方法，按行政区填充色块drawBounds(city, Map, color) {//实例化DistrictSearchlet opts = {subdistrict: 0, //获取边界不需要返回下级行政区extensions: "all", //返回行政区边界坐标组等具体信息level: "city" //查询行政级别为市};// eslint-disable-next-line no-undefconst district = new AMap.DistrictSearch(opts);//行政区查询district.search(city, function(status, result) {const polygons = [];const bounds = result.districtList[0].boundaries;console.log(city, bounds);if (bounds) {for (let i = 0, l = bounds.length; i < l; i++) {//生成行政区划polygon// eslint-disable-next-line no-undeflet polygon = new AMap.Polygon({strokeWeight: 0, //线宽path: bounds[i], //多边形边界路径fillOpacity: 0.7, //填充透明度fillColor: color, //填充颜色strokeColor: "#1a77aa" //线颜色});// 创建覆盖物的监听事件// polygon.on('mouseover', function(e) {//       polygon.setOptions({//         fillColor: '#114af8',//填充颜色//       })// });// polygon.on('mouseout', function(e) {//     console.log(e.lnglat);//     polygon.setOptions({//       fillColor: color,//填充颜色//     })// });polygons.push(polygon);}}Map.add(polygons);});},// 创建市区的颜色块initPro(map) {const that = this;const code = 630000; //青海省代码const dep = 1; //按市区划分let disProvince;disProvince && disProvince.setMap(null);// eslint-disable-next-line no-undefdisProvince = new AMap.DistrictLayer.Province({zIndex: 12,adcode: [code],depth: dep,styles: {fill: function(properties) {// properties为可用于做样式映射的字段，包含// NAME_CHN:中文名称// adcode_pro// adcode_cit// adcodelet adcode = properties.adcode;return that.getColorByAdcode(adcode);},// 'province-stroke': 'cornflowerblue',"city-stroke": "#3078AC" // 中国地级市边界// 'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界}});disProvince.setMap(map);that.disProvinces = disProvince;},// 颜色辅助方法getColorByAdcode(adcode) {const colors = {630100: "#2c54cf", //西宁630200: "#17307c", //海东632200: "#204699", //海北632300: "#1c3077", //黄南632500: "#2b47ac", //海南632600: "#17307c", //果洛632700: "#204699", //玉树632800: "#17307c" //海西};return colors[adcode];},//更新标记点updateMark(Map, points) {// 位置标记const Markers = [];for (let i = 0; i < points.length; i += 1) {if (points[i]) {Markers.push(// eslint-disable-next-line no-undefnew AMap.Marker({position: points[i].split(","),// eslint-disable-next-line no-undefoffset: new AMap.Pixel(-15, -15)}));}}let str = [{url: pin5,// eslint-disable-next-line no-undefsize: new AMap.Size(100, 100),// eslint-disable-next-line no-undefoffset: new AMap.Pixel(-100, -100),textSize: 40,textColor: "#353535"},{url: pin4,// eslint-disable-next-line no-undefsize: new AMap.Size(100, 100),// eslint-disable-next-line no-undefoffset: new AMap.Pixel(-100, -100),textSize: 40,textColor: "#353535"},{url: pin3,// eslint-disable-next-line no-undefsize: new AMap.Size(100, 100),// eslint-disable-next-line no-undefoffset: new AMap.Pixel(-100, -100),textSize: 40,textColor: "#353535"},{url: pin2,// eslint-disable-next-line no-undefsize: new AMap.Size(100, 100),// eslint-disable-next-line no-undefoffset: new AMap.Pixel(-100, -100),textSize: 40,textColor: "#353535"},{url: pin1,// eslint-disable-next-line no-undefsize: new AMap.Size(100, 100),// eslint-disable-next-line no-undefoffset: new AMap.Pixel(-100, -100),textSize: 40,textColor: "#353535"}];// eslint-disable-next-line no-undefnew AMap.MarkerClusterer(Map, Markers, {styles: str,gridSize: 60,minClusterSize: 1});},//所有行政区描边allborderLine(Map) {const that = this;that.borderLine("海西蒙古族藏族自治州", Map);that.borderLine("海东市", Map);that.borderLine("海南藏族自治州", Map);that.borderLine("海北藏族自治州", Map);that.borderLine("果洛藏族自治州", Map);// that.borderLine('黄南藏族自治州',Map)//黄南中间有块地皮是海南自治区的，不能描边，采用省描边加邻区描边来作为它的边that.borderLine("玉树藏族自治州", Map);that.borderLine("西宁市", Map);},//行政区描边的功能borderLine(city, Map) {const that = this;const opts = {subdistrict: 0,extensions: "all",level: "city"};//直接通过经纬度构建mask路径// eslint-disable-next-line no-undefconst district = new AMap.DistrictSearch(opts);district.search(city, function(status, result) {const bounds = result.districtList[0].boundaries;//添加描边for (let i = 0; i < bounds.length; i += 1) {// eslint-disable-next-line no-undefconst myLine = new AMap.Polyline({path: bounds[i],strokeColor: "#1a77aa",strokeWeight: 10,strokeOpacity: 0.9,map: Map});// 创建线条的监听事件myLine.on("mouseover", function() {myLine.setOptions({strokeColor: "#114af8",strokeWeight: 20});});myLine.on("mouseout", function() {myLine.setOptions({strokeColor: "#1a77aa",strokeWeight: 10});});that.lineArr.push(myLine); //把行政区描边通过闭包给拿出来，后续需要显示和隐藏切换}});},//重新给地图增加标注信息setFeature(Map) {const _that = this;Map.setFeatures(_that.depFeatures);},//监听鼠标滚轮事件，一旦用户放大地图则切换成街景模式zoomChange() {if (this.depFeatures.length > 0) {console.log("已经开启街景地图，不做处理");return;} else {this.depFeatures = ["bg", "road", "building", "point"];this.map.setStatus({dragEnable: true //切换成街景模式需要开启可拖拽模式});this.setFeature(this.map);// this.map.clearMap(); //清除所有覆盖物// this.removePoly("polygon"); //清除选定的覆盖物// this.removePoly("polyline"); //清除选定的行政区边界this.disProvinces.hide(); //隐藏行政区色块图层for (let i = 0; i < this.lineArr.length; i++) {//也可以不清除，而是采用隐藏，因为后续要重新显示this.lineArr[i].hide();}console.log("开启街景地图");}},//清除行政区色块和边界线条--(已经注释掉采用隐藏的方案替代)removePoly(target) {// 首先获取当前地图中所有覆盖物的实例。let mapPolyArr = this.map.getAllOverlays(target);// 定义一个空数组用来存放需要删除的覆盖物实例。let arr = [];// 循环拿到需要删除的覆盖物for (let i = 0; i < mapPolyArr.length; i++) {// 将需要删除的项添加到空数组里arr.push(mapPolyArr[i]);}// 移除覆盖物this.map.remove(arr);}}
};
</script>
<style lang="less" scoped>
.container {height: 100%;
}
/deep/.amap-logo {display: none !important;
}
</style>

高德地图实现的数据统计切换街景地图相关推荐

A城市巡游车与网约车运营特征对比分析—地图及订单数据统计
初始化 import pandas as pd import numpy as np import matplotlib.pyplot as plt import folium # 文件目录,绝对路径 ...
retrofit 解析百度地图api 返回数据_新版百度地图建筑数据含高度解析
注:本文中所述内容仅作为研究用途,不包括任何技术细节,不提供数据爬取.非法攻击的咨询和支持.另:百度建筑轮廓数据中存在明显签名式错误,下载使用容易被追求侵权. 矢量瓦片:爬取百度地图必须要了解矢量瓦片 ...
百度地图 json 区域数据_获取百度地图可视区域范围的数据
有个业务场景,需要根据获取到的地图区域显示,根据相应的经纬度反查左侧区域的会议室. 思路: 1.得到百度地图可视区域--可视区域的中心点 2.可视区域的四个角的其中两个(东北角+西南角) http: ...
php mysql 地图矩形_PHP+Mysql+jQuery中国地图区域数据统计实例讲解
今天我要给大家介绍在实际应用中,如何把数据载入到地图中.本文结合实例,使用PHP+Mysql+jQuery实现中国地图各省份数据统计效果. 本例以统计某产品在各省份的活跃用户数为背景,数据来源于mys ...
php省份分布统计图,PHP+Mysql+jQuery实现中国地图区域数据统计
使用过百度统计或者cnzz统计的童鞋应该知道,后台有一个地图统计,不同访问量的省份显示的颜色也不一样,今天我将带领大家开发一个这样的案例.上一篇<使用raphael.js绘制中国地图>文章 ...
如何下载离线地图金字塔瓦片数据
离线地图分为两种:一种叫"金字塔瓦片"数据,一种叫"矢量地图数据".我们看的在线地图比如,百度,谷歌,高德等等网页上的地图,都是金字塔瓦片:另外一种是手机上用来 ...
Unity2017新功能Tilemap地图编辑器的数据拓展和动态生成
在我来4399之前的上一家公司,我做了一个2D的对战游戏,地图编辑器的做法是用格子图片的预设一个个拼接成一张地图,每个格子上可以设置该格子的数据,比如图片名字,tile坐标,是否可通过,是否可销毁,是 ...
【DCIC】数据分析学习：3.地图数据统计
目录学习目标地图数据统计(基础知识) GPS经纬度分组聚合统计地图数据统计(实践) 统计巡游车与网约车分布学习资源任务学习目标 GPS经纬度介绍 Pandas分组聚合出租车与网约车经纬 ...
中高德地图只显示某一城市_小O地图 - 城市交通态势数据查询及下载
小O地图是一款互联网地图数据挖掘.分析.图表软件.具有专业.稳定.高效的特点.提供地图功能多达30余项,并持续更新中. 感兴趣的朋友可以登录官网下载使用 .www.GIS9.com [概述] 本文介绍 ...

高德地图实现的数据统计切换街景地图

一，实现的效果

二，项目地址

三，关键代码

高德地图实现的数据统计切换街景地图相关推荐

最新文章

热门文章