使用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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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
ADODB类使用
2006/11/25 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
用JQuery调用Session的实现代码
2010/10/29 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
ionic2懒加载配置详解
2017/09/01 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python 自动化表单提交实例代码
2017/06/08 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
C#的几个面试问题
2016/05/22 面试题
火山动力Java笔试题
2014/06/26 面试题
售房协议书范本2014
2014/10/23 职场文书
党员个人整改措施
2014/10/24 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang