arcgis api for javascript 4.12 vue 点聚合(2)

这是我第二篇关于vue使用arcGis点聚合的文章，第一篇比较繁琐，写的时候也是半懂，这里对其简化，有些功能也省去，所以想看上一篇的，这里有链接arcgis，使用的插件依旧是FlareClusterLayer(插件链接)

1，首先看下效果

2，引入插件

引入插件的方式，上一篇已经介绍，这里简单说一下，

引入插件需要使用绝对地址，打包后需要注意地址引入的方式
在public/index.html中引入插件
使用script，不要加 type=“text/javascript”

<script>var dojoConfig = {async: true,tlmSiblingOfDojo: false,packages: [{name: "fcl",location: '<%= BASE_URL %>fcl/'}],has: {"esri-promise-compatibility": 1 }};
</script>

3，源码

<template><div id="container"><div class="view" id="views"></div></div>
</template><script>import {loadModules} from 'esri-loader'import nodesData from './data.json'export default {name: 'HelloWorld',data() {return {map: 'http://47.110.60.95:6080/arcgis/rest/services//测试/MapServer?f=jsapi',m1: require('@/assets/m1.png'),m2: require('@/assets/m2.png'),m3: require('@/assets/m3.png'),m4: require('@/assets/m4.png'),vueArcGis: {ClassBreaksRenderer: null,SpatialReference: null,PopupTemplate: null,fcl: null},newArcGis: {map: null}}},methods: {async initLayer(data) {// 设置点聚合大小const renderer = this.createClusterRenderer();// 配置属性const options = {clusterRenderer: renderer,spatialReference: new this.vueArcGis.SpatialReference({"wkid": 4326}),displayFlares: false,             // 是否显示聚合子类，即环绕周围的小圆圈clusterRatio: 200,                // 设置每个集群边界的大小data: data}const clusterLayer = new this.vueArcGis.fcl.FlareClusterLayer(options);this.newArcGis.map.add(clusterLayer);},createClusterRenderer() {let defaultSym = this.createPointSymbol([255, 255, 0], 'circle', 10, [255, 255, 0], 1);let renderer = new this.vueArcGis.ClassBreaksRenderer({defaultSymbol: defaultSym});renderer.field = "clusterCount";const smSymbol = this.createPictureSymbol(this.m1, '53px', '53px');const mdSymbol = this.createPictureSymbol(this.m2, '70px', '70px');const lgSymbol = this.createPictureSymbol(this.m3, '80px', '80px');const xlSymbol = this.createPictureSymbol(this.m4, '100px', '100px');renderer.addClassBreakInfo(0, 10, smSymbol);renderer.addClassBreakInfo(11, 20, mdSymbol);renderer.addClassBreakInfo(21, 40, lgSymbol);renderer.addClassBreakInfo(41, Infinity, xlSymbol);return renderer},createPictureSymbol(url, width, height) {return {type: "picture-marker",url, width, height};},createPointSymbol(color, style, size, outlineColor, outlineWidth) {return {type: "simple-marker",style: style,color: color,size: size,outline: {color: outlineColor,width: outlineWidth}};},createSimpleFillSymbol(color, style = 'solid', outlineColor, outlineWidth) {return {type: "simple-fill",style,color,outline: {color: outlineColor,width: outlineWidth}}}},mounted() {loadModules(["esri/Map","esri/views/MapView","esri/layers/MapImageLayer","esri/renderers/ClassBreaksRenderer","esri/geometry/SpatialReference","fcl/FlareClusterLayer_v4","esri/PopupTemplate"]).then(([Map, MapView, MapImageLayer, ClassBreaksRenderer, SpatialReference, fcl, PopupTemplate]) => {this.vueArcGis = {ClassBreaksRenderer, SpatialReference, PopupTemplate, fcl};const mapLayer = new MapImageLayer({url: this.map}) // 底图地图const map = new Map({layers: [mapLayer]});const mapView = new MapView({map: map,container: "views",center: [121.8192766890, 39.0565858993], // 大连 中心点scale: 164521});mapView.ui._removeComponents(["attribution"]); //去掉logomapView.ui.move(["zoom"], "bottom-right"); // 缩放控件移动到右下方mapView.when(() => {const allPoints = []for (const key in nodesData) {const {x, y = null} = nodesData[key]if (x && y) {allPoints.push({x, y, key})}}this.initLayer(allPoints);});this.newArcGis = {map}}).catch(() => {// handle any errors//console.error(err);});}}
</script><style>#container, .view {width: 100vw;height: 100vh;padding: 0;margin: 0;}</style>

4，data数据

const nodesData = []for (var i = 1; i < 100; i++) {nodesData.push({"x": 121.8192766890 + readomX() * i* 0.01,"y": 39.0565858993 + readomY() * i * 0.001,})
}function readomX() {return Math.round(Math.random());
}function readomY() {return Math.round(Math.random());
}

arcgis api for javascript 4.12 vue 点聚合(2)相关推荐

ArcGIS API for Javascript 4.12离线部署
ArcGIS API for Javascript 4.x离线部署本篇以ArcGIS API for Javascript 4.12版本之IIS 部署作为测试用例,离线部署到本地的操作如下: 一. ...
Arcgis api for JavaScript 4.12解读-----symbol
这个类里面主要是符号化相关的内容 Symbol:所有符号类的基类,符号将点.线.多边形和网格几何表示为视图中矢量图形,符号只能在个别设置图形的GraphicsLayer或View.graphics,其 ...
视频教程-主流前端框架下ArcGIS API for JavaScript的开发-其他
主流前端框架下ArcGIS API for JavaScript的开发毕业于中国矿业大学地理信息科学专业.现就任于全球领先的GIS公司,主要担任地理平台研发工作,日常工作任务是ArcGIS JS A ...
ArcGIS API for JavaScript 开发笔记
1.Vue.js 中引入 ArcGIS API for JavaScript 4.x 安装 esri-loader npm install --save esri-loader 引入 ArcGIS A ...
基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录应用场景需求分析效果图实现代码原理解读应用场景部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
缓冲区分析—ArcGIS API for JavaScript
缓冲区分析是地理信息系统中的空间分析基本功能之一,是众多空间分析方法的基础.缓冲区分析是指为了识别某地理实体或空间物体对其周围的邻近性或影响度而在其周围建立的一定宽度的带状区. 缓冲区介绍缓冲区分析 ...
ArcGIS API for JavaScript之基础篇（二）
ArcGIS API for JavaScript之基础篇(二) 上一篇文章介绍了Map MapView SceneView的基本知识以及简单的demo.最近几天学习了WebMap WebScene ...

arcgis api for javascript 4.12 vue 点聚合(2)

1，首先看下效果

2，引入插件

3，源码

4，data数据

arcgis api for javascript 4.12 vue 点聚合(2)相关推荐

最新文章

热门文章