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

下载依赖包 npm install @amap/amap-jsapi-loader

在main.js中引入

import AMapLoader from '@amap/amap-jsapi-loader';
// 按 NPM 方式使用 Loader 引入地图
let amap = () => AMapLoader.load({"key": "5f3ae5318b2412865326d6ed46e2570e",              // 申请好的Web端开发者Key，首次调用 load 时必填"version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15"plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等"AMapUI": {             // 是否加载 AMapUI，缺省不加载"version": '1.1',   // AMapUI 缺省 1.1"plugins": ['misc/PointSimplifier', 'misc/PathSimplifier'],       // 需要加载的 AMapUI ui插件},"Loca": {                // 是否加载 Loca， 缺省不加载"version": '2.0'  // Loca 版本，缺省 1.3.2},
})
Vue.prototype.amap = amap;

3. 地图组件

<template><div class="map-container"><div id="witContainer" style="width: 100%;height: 100%;"></div><div class="gis-back" @click="backEcharts">返回</div></div></template><script>export default {name: 'GISMap',components: {},props:{name:{type:String,default:"浙江省"},code:{type:Number,default:0}   },data() {return {loadingChange: true,curData:[]};},created() {this.$emit("loadChange", true)},mounted() {this.getEntinformation()},methods: {//获取撒点的数据getEntinformation(){this.axios.get('/ent/getEntInformation',{params:{areaCode:     this.code}}).then(res => {if(res.code == 200){let data = res.datafor(let i in data){this.curData.push({position: [data[i].longitude,data[i].latitude],entId: data[i].id,entName: data[i].entname})}}})this.initGis()},//初始化地图initGis(){this.amap().then((AMap) =>{//初始化地图实例let map = new AMap.Map('witContainer', {zoom: 1,center: [120.215533,30.253049],viewMode: '2D',//设置地图背景图 mapStyle: 'amap://styles/d5b3d02db24148dbca835a7c2b42d380',WebGLParams: {preserveDrawingBuffer: true}});map.on('complete', () => {AMapUI.load(['ui/geo/DistrictCluster'], (DistrictCluster)=>{let distCluster = new DistrictCluster({zIndex: 100,topAdcodes: [this.code],map: map, //所属的地图实例getPosition: function(item) {if (!item) {return null;}var parts = item.split(',');//返回经纬度return [parseFloat(parts[0]), parseFloat(parts[1])];}});let data = "119.83859300,30.24092900|119.41111000,30.02080300|119.82904100,30.23008200|119.71524000,30.20532200|119.83859300,30.24092900|119.41111000,30.02080300|119.82904100,30.23008200|119.71524000,30.20532200|"distCluster.setData(data.split("|"));})// 创建 AMap.LabelsLayer 图层let layer = new AMap.LabelsLayer({// zooms: [10, 20],zIndex: 1000,collision: false,});//放大选中的行政区域map.setCity(this.code);// 将图层添加到地图map.add(layer);let markers = [];let icon = {type: 'image',image: require('@/assets/effectivenessManagement/car-point.png'),size: [90, 90],anchor: 'bottom-center',};// let text = (num) => ({//     // 要展示的文字内容//     content: num + '家',//     // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置//     direction: 'center',//     offset: [0, 0],//     // 文字样式//     style: {//     // 字体大小//     fontSize: 12,//     // 字体颜色//     fillColor: '#65D1F8',//     fold: true,//     padding: '2, 5',//     }// })// 遍历数据for(let i in this.curData){this.curData[i] = {...this.curData[i],icon}}console.log(this.curData,'755454');for(let i in this.curData){let labelMarker = new AMap.LabelMarker(this.curData[i]);markers.push(labelMarker);// 给marker绑定事件labelMarker.on('click', (e) => {console.log(e.target._opts.entId,'47787844');let entid = e.target._opts.entIdlet entName = e.target._opts.entNamewindow.open(`${window.location.href}?role=ent&entName=${entName}&entId=${entid}`)});}// 一次性将海量点添加到图层layer.add(markers);setTimeout(() => {this.$emit("loadChange", false)}, 1000)});///})},backEcharts(){this.$emit('backEcharts',this.name);this.$emit("loadChange", false)}}
}
</script>
<style lang="less" scoped>
.map-container {width: 100%;height: 100%;margin: 0px;padding: 0px;background-color: #001a43;position: relative;.loadingChange{width: 100%;height: 100%;background: #05225F;}.gis-back{position: absolute;right: 2%;top: 2%;width: 80px;height: 40px;color: #fff;text-align: center;line-height: 40px;font-size: 16px;border-radius: 8px;font-weight: bold;background-color: #1FBDF8;}
}</style>

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

高德地图开发（三、地图marker点标记）
高德地图开发(三.地图marker自定义点标记) 一.默认点标记二.自定义点标记一.默认点标记 // 创建一个 Marker 实例:var marker = new AMap.Marker({po ...
Android高德地图开发详解
这段时间开发的时候用到了高德地图,对高德地图开发有心得体会,现在分享给大家,对我开发过百度地图的我来说,总体来说高德地图Demo,没有百度讲解的详细个人更偏向于使用百度地图,但是没办发,项目需要使用 ...
高德地图海量撒点（普通/实时）
前言: 1.单个/多个new AMap.MassMarks 2.setStyle的作用 3.当需要在地图展示数量为十万以内的点并且需要较好的性能表现时,可以使用 AMap.MassMarks 类.AM ...
高德地图开发学习Demo
高德地图开发学习Demo 提供者:sannas 开源项目地址: https://github.com/851151582/NaviLocXf.git Demo实现地图定位.搜索及导航功能,通过关键字可 ...
快速掌握Web高德地图开发
本文章致力于帮助对Web高德地图开发感兴趣的朋友快速掌握开发要领,如果能对屏幕前的您有所助益,我将十分荣幸. 如何快速掌握Web高德地图开发? 要领如下: 一. 首先要知道高德地图本身有提供开放的地图 ...
高德地图开发（四、点聚合）
高德地图开发(四.点聚合) 一.设置点聚合二.点聚合中添加删除标记三.方法和事件一.设置点聚合只截取了部分代码,几个方法都处于一个类中. let markers = []; // 点聚合数组 ...
高德地图开发之地图配置及vue上初始化创建地图
开门见山地说,现如今地图相关的开发业务在工作中越来越常见,目前市面上主流的地图开发还是以百度和高德为主,今天就来讲一下高德地图的配置和在vue上的初始化创建,帮助大家更好更快的了解高德地图开发相关的 ...
安卓高德地图开发之引入导航功能
高德地图导航添加需要添加特定的navi包. 高德地图开发中添加导航功能的简单实现原理是引入自定义起点和终点数据后调用官方给出的demo代码. 首先需要一个baseactivity类,给出代码: pac ...
iOS 高德地图开发详解
Demo地址如果有所帮助记得关注,点Star demo中添加了查看路况功能,如果不需要,可以删除. ##一:基本地图功能实现 ####1.申请密钥流程申请密钥链接 2.配置环境(重点) 高德地图提 ...

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

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

最新文章

热门文章