使用vue引入maptalks地图及聚合效果的实现


Posted in Javascript onAugust 10, 2020

1、安装maptalks.js

npm install maptalks --save

2、安装聚合mapkercluster

npm install maptalks.markercluster

3、vue页面引入

import * as maptalks from 'maptalks'

import {ClusterLayer} from 'maptalks.markercluster'

4、初始化地图并添加聚合

mounted() {
 let that = this
 //--0--//地图对象的初始化
 this.map = new maptalks.Map('map', {
  center: [109.1748453547,21.4586700546],
  //中心点标记红十字,用于开发debug
  centerCross : false,
  zoom: 13,
  minZoom : 10,
  maxZoom : 18,
  //缩放级别控件
  zoomControl : false, // add zoom control
  scaleControl : true, // add scale control
  //鹰眼控件
  overviewControl : true, // add overview control
  //设置瓦片图层的空间参考spatialReference默认就是3857,googlemap的分辨率
  spatialReference : {
   projection : 'EPSG:3857'
   //与map一样,支持更详细的设置resolutions,fullExtent等
  },
  baseLayer: new maptalks.TileLayer('base', {
   // urlTemplate: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
   //renderer : 'canvas', // set TileLayer's renderer to canvas
   //底图服务器地址,如下为瓦片地址
   urlTemplate: 'http://xxx.xx.xxx.xxx:xxxx/mapdata/tiles/{z}/{x}/{y}.png',
   //tileSystem 控制瓦片的x,y以及行列,后两个是origin原点位置(很重要)
   tileSystem : [1, 1, -20037508.3427890,-20037508.3427890], // tile system
   //subdomains: ['a','b','c'],
   minZoom : 10,
   maxZoom : 18
   // css filter 滤镜配置
   // cssFilter : 'sepia(60%) invert(95%)',
   // attribution: '© <a href="http://maptalks.org/" rel="external nofollow" target="_blank">Maptalk for Amap</a> contributors'
  }),
  layers : [
   new maptalks.VectorLayer('v')
  ],
  attribution: {//左下角info
   content: '©qmap'
  }
 })
 
 // 拖动范围限制,黑框控
 let extent = new maptalks.Extent(108.8584570000,20.9790840000,110.0569128018,22.1177123207)
 // var extent = new maptalks.Extent(112.5381688894,26.8876543885,112.5605009244,26.9012691519);
 // set map's max extent to map's extent at zoom 14
 this.map.setMaxExtent(extent)
 this.map.setZoom(this.map.getZoom(), { animation : false })
 this.map.getLayer('v')
  .addGeometry(
   new maptalks.Polygon(extent.toArray(), {
    symbol : { 'polygonOpacity': 0, 'lineWidth': 0 }
   })
  )
 
// 往地图上添加点位
 
this.markInfo()
},
 
methods: {
 setCenter: function(center) {
  //标注点平移到某个点
  let centerV = maptalks1.CRSTransform.transform(center, 'bd09ll', 'gcj02')
  this.map.animateTo({
   zoom: 17,
   center: centerV
  }, {
   duration: 1000
  })
 },
 // 上图
 markInfo: function () {
  let that = this
  that.map.removeLayer(that.clusterLayer)
  let markers = []
  //--2--//前端聚合查询
  // data from realworld.50000.1.js
  //需要引入maptalks.markercluster.js
  //数据格式[lon,lat,name]
  // 如:[[21.8129763667, 109.2714296333, "晓港名城4号楼"],[21.8131727667, 109.2710308833, "晓港名城6号楼"]]
  for (let i = 0; i < that.addressPoints.length; i++) {
   let a = that.addressPoints[i]
   markers.push(new maptalks.Marker(maptalks1.CRSTransform.transform([a.latitude, a.longitude], 'bd09ll', 'gcj02'),
    {
     'properties': {
      'name': a.name,
      'onSale': a.onSale
     },
     symbol : [
      {
       'markerFile'  : a.onSale ? require('../../../static/img/on.png') : require('../../../static/img/off.png'),//标注点图标
       'markerWidth' : 30,
       'markerHeight' : 35
      },{
       'textName' : '{name}',
       'textSize' : 12,
       'textDy'  : -50,
       'textHaloRadius' : 5,
       'textHaloFill' : a.onSale ? '#FFB427' : '#B9B9B9',
       'textFill' : '#fff' // color
      }
     ]
    }
   ))//.on('mousedown', onClick))
  }
  let clusterLayer = new ClusterLayer('cluster', markers, {
   'noClusterWithOneMarker' : true,
   'noClusterWithHowMany': 8,//聚合的最小个数
   'maxClusterZoom' : 15,
   //"count" is an internal variable: marker count in the cluster.
   'symbol': {
    'markerType' : 'ellipse',
    'markerFill' : { property:'count', type:'interval', stops: [[0, 'rgb(135, 196, 240)'], [9, '#1bbc9b'],[50, 'rgb(116, 115, 149)'],
      [99, 'rgb(216, 115, 149)']]},
    'markerFillOpacity' : 0.7,
    'markerLineOpacity' : 1,
    'markerLineWidth' : 3,
    'markerLineColor' : '#fff',
    'markerWidth' : { property:'count', type:'interval', stops: [[0, 40], [9, 60], [50, 70],[99, 80]] },
    'markerHeight' : { property:'count', type:'interval', stops: [[0, 40], [9, 60], [50, 70],[99, 80]] }
   },
   'drawClusterText': true,
   'geometryEvents' : true,
   'single': true
  })
  that.map.addLayer(clusterLayer)
  that.clusterLayer = clusterLayer
 
  function onClick(e) {
   e.target.setInfoWindow({
    'content': '<div class="content-' + e.target.properties.onSale + '">' + e.target.properties.name + '</div>',
    'width' : 150,
    'dy' : 5,
    'autoPan': true,
    'custom': false,
    'autoOpenOn' : 'click', //set to null if not to open when clicking on marker
    'autoCloseOn' : 'click'
   })
  }
 }
}

补充知识:vue集成maptalk实现geojson3D渲染

我就废话不多说了,大家还是直接看代码吧~

//实例化地图对象
  let map = new maptalks.Map("map",{
   center: [13.416935229170008, 52.529564137540376],
   zoom: 20,
   dragPitch : true,
   //allow map to drag rotating, true by default
   dragRotate : true,
   //enable map to drag pitching and rotating at the same time, false by default
   dragRotatePitch : true,
   baseLayer: new maptalks.TileLayer('base', {
    urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
    subdomains: ['a','b','c','d'],
    attribution: '© <a href="http://osm.org" rel="external nofollow" >OpenStreetMap</a> contributors, © <a href="https://carto.com/" rel="external nofollow" >CARTO</a>'
   })
  });

// features to draw
//将Buildings中的数据,添加到features中
  let features = [];

  buildings.forEach(function (b) {
   console.log(b.features);
   features = features.concat(b.features);
  });

// the ThreeLayer to draw buildings
  let threeLayer = new ThreeLayer('t', {
   forceRenderOnMoving : true,
   forceRenderOnRotating : true
  });


  threeLayer.prepareToDraw = function (gl, scene, camera) {

   let me = this;
   let light = new THREE.DirectionalLight(0xffffff);
   light.position.set(0, -10, 10).normalize();
   scene.add(light);

   features.forEach(function (g) {
    let heightPerLevel = 5;
    let levels = g.properties.levels || 1;
    let color = 0x2685a7

    let m = new THREE.MeshPhongMaterial({color: color, opacity : 0.7});
    //change to back side with THREE <= v0.94
    // m.side = THREE.BackSide;

    let mesh = me.toExtrudeMesh(maptalks.GeoJSON.toGeometry(g), heightPerLevel, m, heightPerLevel);
    if (Array.isArray(mesh)) {
     scene.add.apply(scene, mesh);
    } else {
     scene.add(mesh);
    }
   });
  };

  threeLayer.addTo(map);

以上这篇使用vue引入maptalks地图及聚合效果的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 #Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 #Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 #Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 #Javascript
vue 实现锚点功能操作
Aug 10 #Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 #Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 #Javascript
You might like
PHP5.3新特性小结
2016/02/14 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python实现list反转实例汇总
2014/11/11 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python实现测试磁盘性能的方法
2015/03/12 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
python实现简单图片物体标注工具
2019/03/18 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
详解Python 函数参数的拆解
2020/09/02 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
小学生元旦广播稿
2014/02/21 职场文书
实习单位鉴定评语
2014/04/26 职场文书
节能环保标语
2014/06/12 职场文书
黑白记忆观后感
2015/06/18 职场文书
《月光曲》教学反思
2016/02/16 职场文书