tmp.initPoint = function (items) {
//初始化所有农户点坐标,聚合
var count = items.length;
var features = new Array(count); for (var i = 0; i < items.length; i++) {
var item = items[i];
var feature = new Feature({
geometry: new Point([item.x, item.y])
}); features[i] = feature;
} var source = new VectorSource({
features: features
}); var clusterSource = new Cluster({
distance: 200,
source: source,
geometryFunction: function (evt) {
return evt.getGeometry();
}
}); var styleCache = {};
var clusters = new VectorLayer({
source: clusterSource,
style: function (feature) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = new Style({
image: new CircleStyle({
radius: 15,
stroke: new Stroke({
color: '#fff'
}),
fill: new Fill({
color: '#ff0000'
})
}),
text: new Text({
text: size.toString(),
fill: new Fill({
color: '#fff'
})
})
});
styleCache[size] = style;
}
return style;
}
}); return clusters;
}

//初始化地图
tmp.initMap = function (items) {
//自定义瓦片地图
var baseMapLayer = new TileLayer({
source: new ol.source.XYZ({
url: '/maps/{z}/{x}/{y}.png',
attributions: "XX公司"
})
}); //高德地图
var gaodeMapLayer = new TileLayer({
source: new ol.source.XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
}); var vectorArea = new VectorLayer({
source: new VectorSource({
url: '/data/kml/ChinaArea.kml',
format: new KML()
})
}); var clusters = tmp.initPoint(items); tmp.map = new Map({
layers: [gaodeMapLayer, clusters, vectorArea],
target: 'map',
controls: ol.control.defaults().extend([
new ol.control.FullScreen(),
new ol.control.MousePosition(),
new ol.control.ScaleLine(),
new ol.control.ZoomSlider(),
new ol.control.Attribution(),
new ol.control.Rotate() ]),
view: new View({
projection: 'EPSG:4326',
zoom: 10,
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
center: tmp.CenterPoint
})
}); //事件:抓
tmp.map.on('pointerdrag', function (evt) {
var t = tmp.map.getView();
}); //事件:地图移动结束
tmp.map.on('moveend', function (evt) {
//console.log(evt.frameState.extent); });
};

openlayers5学习笔记-001的更多相关文章

  1. [Oracle]OWI学习笔记--001

    [Oracle]OWI学习笔记--001 在 OWI 的概念里面,最为重要的是 等待事件 和 等待时间. 等待事件发生时,需要通过 P1,P2,P3 查看具体的资源. 可以通过 v$session_w ...

  2. TensorFlow机器学习框架-学习笔记-001

    # TensorFlow机器学习框架-学习笔记-001 ### 测试TensorFlow环境是否安装完成-----------------------------```import tensorflo ...

  3. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  4. PYTHON 100days学习笔记001:初识python

    现在学习这个确实时间很紧,但是迟早得学,以后PYTHON自动化运维,PYTHON自动测试都需要用的到,甚至可以往数据分析方向发展,刚好最近有数据观组织的python100天计划,就参加了,做好笔记,一 ...

  5. entityframework学习笔记--001

    最近想重新好好学习一下entityframework,于是在院子里找到了一篇不错的博客.下面把学习的过程记录下来,方便以后复习. 学习过程参考大神的博客:http://www.cnblogs.com/ ...

  6. iOS APP开发概述----学习笔记001

    之前开发过一些Android APP,如今開始学习iOS开发,未来实际工作应该会用到.未雨绸缪. 一.了解其系统层次架构 其系统分层四层,其具体例如以下: 第一层:Core OS watermark/ ...

  7. elasticsearch学习笔记001

    <Elasticsearch 核心技术与实战>课程Github代码 https://github.com/onebirdrocks/geektime-ELK 运行的环境: windows ...

  8. [Unreal]学习笔记001

    常规 为了便于控制,创建自己的Gamemode和Controller,再通过Setting->World Setting进行设置 在场景中,按住鼠标右键来移动视角,按住右键的同时按下W/S,控制 ...

  9. 学习笔记001之[Android开发视频教学].01_15_Handler的使用(二)

    Handler 与线程 Bundle 的用法 在线程中处理消息的方法 待补充......

随机推荐

  1. Linux系统下打印第n行的方法

    方法一:cat cat filename | head -n 5 | tail -n +5 方法二:sed sed -n '5p' filename 扩展:打印第3~5行 cat filename | ...

  2. laravel5 文件上传

    <!DOCTYPE html><html lang="zh-CN"><head> {{--设置字符编码--}} <meta charset ...

  3. GitLab权限介绍

    访问权限 - Visibility Level 这个是在建立项目时就需要选定的,主要用于决定哪些人可以访问此项目,包含3种 Private - 私有,只有属于该项目成员才有原先查看 Internal ...

  4. hdu 3714 三分

    #include<stdio.h> #define mi 1e-9 #define N 11000 struct node{ double x,y,z; }a[N]; int n; dou ...

  5. E - Just a Hook

    E - Just a Hook HDU 1698 思路:区间修改即可. #include<cstdio> #include<cstring> #include<iostr ...

  6. kettle 递归循环

    var i = new Number(parent_job.getVariable(; parent_job.setVariable("i",i); true;

  7. eclipse断点调试教程

    1.断点就是你希望程序运行到哪暂停, 2.断点就是你希望程序运行到哪暂停, 3.断点就是你希望程序运行到哪暂停,断点往往就是你觉得程序可能出错的地方.  设定断点的办法很简单,在你认为出错的那一行的行 ...

  8. keil uV4一个project内各个后缀名文件的作用

    1 test1 无后缀文件,这个是终于生成的文件.仅仅要有这个文件KEIL就能够软件仿真,不能打开 2 test1.hex 这个文件能够直接下载到单片机里,他就是从无后缀文件test1里提取的,去掉了 ...

  9. Delicious Apples (hdu 5303 贪心+枚举)

    Delicious Apples Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Other ...

  10. 外网联接内网mssql

    參考地址:http://www.nat123.com/Pages_8_266.jsp 方法例如以下: 1.注冊一个账号,同一时候进入nat123官网加入dns域名解析 点击确认保存,刚刚加入的域名解析 ...