地图边界

地图边界json数据取自http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import GeoJSON from 'ol/format/GeoJSON'
import {Circle, Fill, Stroke, Style} from 'ol/style'let json = require('./json/hefei.json')
let features = (new GeoJSON({ featureProjection: 'EPSG:4326' })).readFeatures(json)
var vectorSource = new VectorSource({ features: features })
let lineLayer = new VectorLayer({zIndex: 99,source: vectorSource,style: new Style({stroke: new Stroke({color: 'red',width: 3}),fill: new Fill({color: 'rgba(0, 0, 255, 0.1)'})})
})
this.map.addLayer(lineLayer) // 把图层添加到地图

参考：https://blog.csdn.net/weixin_42776111/article/details/125103005?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-0-125103005-blog-96479717.pc_relevant_blogantidownloadv1&spm=1001.2101.3001.4242.1&utm_relevant_index=2

地图点聚合

let coord
let featurelet coords = []points.forEach(item => {coord = [item.lng, item.lat]feature = new Feature({geometry: new Point(coord)})coords.push(feature)})const clusterSource = new Cluster({// distance: 10, // 要素将被聚合在一起的像素距离，默认为20// minDistance: 20, // 聚合块之间的最小像素距离，默认为零source: new VectorSource({features: coords})})const clusters = new VectorLayer({source: clusterSource,name: 'clusterLayer',zIndex: 1,style: function (feature, resolution) {var size = feature.get('features').length// 如果是聚合数为1也就是最底层的则是定位图标if (size === 1) {return new Style({image: new Icon({src: icon,imgSize: [40, 40],scale: 0.7 // 缩放倍数})})} else {// 这里设置聚合部分的样式return new Style({image: new Icon({anchor: [0.5, 0.4],src: require('../../assets/image/point.png')}),text: new Text({text: size.toString(),fill: new Fill({color: 'white',font: '20px'})})})}}})this.map.addLayer(clusters)

参考：
https://www.csdn.net/tags/MtTaggysNjgyOTgtYmxvZwO0O0OO0O0O.html
https://blog.csdn.net/weixin_44727080/article/details/120199240

超图openlayers相关推荐

openlayers加载超图发布的wfs服务
首先要阅读wfs文档,跟当初cesium加载wmts一样. http://support.supermap.com.cn:8090/iserver/services/data-world/wfs100 ...
SuperMap超图使用简单笔记
1 需求: 项目使用的是openlayer和Cesium,现在需要使用超图的图层,和引入实景公路功能. 2 使用过程中出现一下疑问点记录如下 : 超图: 北京超图软件股份有限公司是全球第三大.亚洲最大 ...
超图REST切片系统初探
前些日子,由于工作需要,要在超图发布的Rest切片上做点事情,不可避免的需要了解一下超图的REST切片系统原理.于是从超图iclient for openlayers里面翻看了一下源码,今天做一个记录 ...
openlayers案例
1.openlayers案例一这个例子是我创建gs项目区域预警gis功能的原型demo,在此demo上学到了基本的html知识和openlayers项目搭建:是一个很不错的demo. 另一个gs项目 ...
OpenLayers 动态添加标记（Marker）和信息窗（Popup）
方式一:使用marker方式 1.在地图上添加标记图层 var markers =newOpenLayers.Layer.Markers("Markers"); map.addLa ...
地图下载2之天超图瓦片格式
接上一篇<地图下载1之天地图瓦片解析>,我们已经知道了天地图的瓦片格式,现在来分析一下超图中瓦片的存储结构. 其实,在GIS领域,只有像ESRI这样强大公司的SHP文件等能通用外,很多数据 ...
读书笔记(2) OpenLayers中的图层
OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...
OpenLayers辅助函数Util.js（三）
Util.js文件包括了OpenLayers库中的辅助通用函数. Util.getElement 获取一个HTMLELement元素,类似prototype库中$函数.如果window.$不存在, ...
java wms open,OpenLayers - 调用WMS安全层
我有一个asp.net Web应用程序来可视化地理服务器层 . 出于安全考虑,我在服务器端(C#)进行了身份验证,并使用从http://geoserverhost:8080/geoserver/j_s ...
You're AllSet! 以多重集函数角度重新检视超图GNN
来源:深度学习与图网络本文约1700字,建议阅读5分钟本文针对超图神经网络提出了一个泛用的框架AllSet. 文章信息: Title: You are AllSet: A Multiset Lea ...

超图openlayers

地图边界

地图点聚合

超图openlayers相关推荐

最新文章

热门文章