kpst._this这里指向初始化的map

     // 设置标注样式函数
function createStyle(name) {
// 河流style
var riverStyle = new Style({
stroke: new Stroke({
color: '#4e89d4',
width: 2
}),
fill: new Fill({
color: '#eee'
})
})
// 省份style·
var provinceStyle = new Style({
stroke: new Stroke({
color: '#4e89d4',
width: 1
}),
fill: new Fill({
color: '#eee'
})
}) //城市style·
if (name != '') {
var cityStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: '#05ab57',
}),
stroke: new ol.style.Stroke({
color: '#05ab57',
width: 1
}),
}),
text: new ol.style.Text({
textAlign: "center", // 位置
textBaseline: "top", // 基准线
font: "normal 12px 微软雅黑", // 文字样式
text: name,
fill: new ol.style.Fill({
color: "#333",// 文本填充样式(即文字颜色)
}),
stroke: new ol.style.Stroke({
color: "#Fff",
}),
zIndex: 9
})
})
}
return {
riverStyle,
provinceStyle,
cityStyle
}
}
//创建图层
function creatlayer(name) {
var layer
if (name != 'city') {
layer = new VectorLayer({
name: name,
source: new VectorSource({
// 地图的坐标系是CGCS2000,json数据也要是CGCS2000
features: (new GeoJSON()).readFeatures(require("../../assets/data/" + name + '.json'))
}),
style: createStyle()[name + 'Style']
}); } else {
var features = (new GeoJSON()).readFeatures(require("../../assets/data/city.json"))
for (let i = 0; i < features.length; i++) {
const feature = features[i];
feature.setStyle(createStyle(feature.get("NAME")).cityStyle)
}
layer = new VectorLayer({
name: name,
source: new VectorSource({
features: features
})
})
}
kpst._this.addLayer(layer);
return layer
};
// 将图层加载到地图,并将所加图层赋给地图的某个对象
function layerFx(name) {
kpst._this[name] = creatlayer(name)
}
// 将图层加载函数挂载到地图
kpst._this.layerFx = layerFx

openlayers之点,线,面(以城市,河流,省份为例,分别对应点线面)的更多相关文章

  1. 一个简单客户端获取IP,国家,城市,省份的代码

    <html><head>  <script src="js/jquery-1.6.2.min.js" type="text/javascri ...

  2. vue父组件获取子组件页面的数组 以城市三级联动为例

    父组件调用子组件 <Cselect ref="registerAddress"></Cselect> import Cselect from '../../ ...

  3. Geoserver基本使用、WMS服务发布与OpenLayers测试

    1.Geoserver与OpenLayers的下载 Geoserver:http://geoserver.org/ OpenLayers:http://openlayers.org/ 2.安装部署Ge ...

  4. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

  5. 通过jquery 获取用户当前所在的城市名称和IP地址

    下面这段JS代码是通过jquery 结合新浪IP地址库和QQip地址库接口获取用户当前所在的城市(省份)名称. 用户当前IP地址等数据.其中当前IP是通过 QQip地址库接口获取,其他数据都是通过 新 ...

  6. P1841 [JSOI2007]重要的城市

    题目描述 参加jsoi冬令营的同学最近发现,由于南航校内修路截断了原来通向计算中心的路,导致去的路程比原先增加了近一公里.而食堂门前施工虽然也截断了原来通向计算中心的路,却没有使路程增加,因为可以找到 ...

  7. talib 中文文档(十二):Pattern Recognition Functions K线模式识别,形态识别

    Pattern Recognition Functions K线模式识别,形态识别 CDL2CROWS - Two Crows 函数名:CDL2CROWS 名称:Two Crows 两只乌鸦 简介:三 ...

  8. Ta-lib K线模式识别

    1, CDL2CROWS (Two Crows 两只乌鸦) 简介:三日K线模式,第一天长阳,第二天高开收阴,第三天再次高开继续收阴,收盘比前一日收盘价低,预示股价下跌. 例子:integer = CD ...

  9. 使用JavaScript数组实现省份和城市的级联菜单

    查看本章节 查看作业目录 需求说明: 使用数组实现省份和城市的级联菜单.具体要求如下 在页面中添加城市时,根据选择的省份,动态地添加该省份的城市 页面加载完毕后,第一个列表框填充"两湖两广& ...

随机推荐

  1. koa 路由模块化(一)

    1.项目目录 2.入口文件 根目录/app.js /** * koa 路由模块化 */ const Koa = require('koa'); const router = require('koa- ...

  2. 【编程漫谈】用JAVA画多边形

    一门语言只要带图形库就可以编程画图了,用JAVA画图有两种方式,一是在内存中画好然后生成图片,就可以看到画图的效果了.另一个就是在窗口界面上直接画,可以实时看到程序的运行效果.刚开始学编程的时候,我加 ...

  3. docker-compose快速部署环境笔记

    # 在含有 docker-compose.yml 的文件夹下 构建容器# 如有使用 Dockerfile 在修改 Dockerfile 文件之后再次执行如下即可应用修改docker-compose u ...

  4. [Ajax三级联动 无刷新]

    三级联动 的效果图 html页面: <body> <label class="fl">区域:</label> <select class= ...

  5. leetcode 547朋友圈

    方法一:染色法 类似于岛屿的个数也可以用染色法:通过深度优先搜索来做 使用一个数组来表示当前朋友a是否已经包含到已经遍历的朋友圈中,遍历所有的朋友,如果当前朋友没有在已经访问的朋友圈中,即visite ...

  6. Throwable 源码阅读

    Throwable 属性说明 /** * Java 语言中所有错误和异常的基类,此类及其子类才能通过 throws 被 JVM 虚拟机抛出. * @since 1.0 */ public class ...

  7. JSTL标签(核心标准库)

    使用JSTL标签步骤 1) 导入jstl支持的jar包(标签背后隐藏的java代码) 注意:使用javaee5.0的项目自动导入jstl支持jar包 2)使用taglib指令导入标签库 <%@t ...

  8. 解决Mysql无法导入存在null数据的问题

    其实很简单,在mysql的控制台输入 SET @@GLOBAL.sql_mode="NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION"; 然后重 ...

  9. idea将springboot打包成jar或者war

    1.首先在pom.xml中添加下面配置 <groupId>com.melo</groupId> <artifactId>focus</artifactId&g ...

  10. Selenium 2自动化测试实战30(unittest补充)

    unittest补充 1.用例执行的顺序 #test.py #coding:utf-8 from Demo1 import Count import unittest class TestBdd(un ...