使用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 相关文章推荐
用javascript获取地址栏参数
Dec 22 Javascript
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
了解JavaScript中let语句
May 30 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 Javascript
React四级菜单的实现
Apr 08 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
轻松修复Discuz!数据库
2008/05/03 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
PHP 验证登陆类分享
2015/03/13 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python+微信接口实现运维报警
2016/08/27 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python rstrip()方法实例详解
2018/11/11 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
python list转置和前后反转的例子
2019/08/26 Python
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
保安员岗位职责
2013/11/17 职场文书
三查三看党性分析材料
2014/02/18 职场文书
快递员岗位职责
2014/09/12 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
罗马假日观后感
2015/06/08 职场文书
化验室安全管理制度
2015/08/06 职场文书
社区服务理念口号
2015/12/25 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python