openlayers之点,线,面(以城市,河流,省份为例,分别对应点线面)
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之点,线,面(以城市,河流,省份为例,分别对应点线面)的更多相关文章
- 一个简单客户端获取IP,国家,城市,省份的代码
		<html><head> <script src="js/jquery-1.6.2.min.js" type="text/javascri ... 
- vue父组件获取子组件页面的数组 以城市三级联动为例
		父组件调用子组件 <Cselect ref="registerAddress"></Cselect> import Cselect from '../../ ... 
- Geoserver基本使用、WMS服务发布与OpenLayers测试
		1.Geoserver与OpenLayers的下载 Geoserver:http://geoserver.org/ OpenLayers:http://openlayers.org/ 2.安装部署Ge ... 
- asp.net mvc jQuery 城市二级联动
		页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ... 
- 通过jquery 获取用户当前所在的城市名称和IP地址
		下面这段JS代码是通过jquery 结合新浪IP地址库和QQip地址库接口获取用户当前所在的城市(省份)名称. 用户当前IP地址等数据.其中当前IP是通过 QQip地址库接口获取,其他数据都是通过 新 ... 
- P1841 [JSOI2007]重要的城市
		题目描述 参加jsoi冬令营的同学最近发现,由于南航校内修路截断了原来通向计算中心的路,导致去的路程比原先增加了近一公里.而食堂门前施工虽然也截断了原来通向计算中心的路,却没有使路程增加,因为可以找到 ... 
- talib 中文文档(十二):Pattern Recognition Functions K线模式识别,形态识别
		Pattern Recognition Functions K线模式识别,形态识别 CDL2CROWS - Two Crows 函数名:CDL2CROWS 名称:Two Crows 两只乌鸦 简介:三 ... 
- Ta-lib K线模式识别
		1, CDL2CROWS (Two Crows 两只乌鸦) 简介:三日K线模式,第一天长阳,第二天高开收阴,第三天再次高开继续收阴,收盘比前一日收盘价低,预示股价下跌. 例子:integer = CD ... 
- 使用JavaScript数组实现省份和城市的级联菜单
		查看本章节 查看作业目录 需求说明: 使用数组实现省份和城市的级联菜单.具体要求如下 在页面中添加城市时,根据选择的省份,动态地添加该省份的城市 页面加载完毕后,第一个列表框填充"两湖两广& ... 
随机推荐
- oc 基本语法 类 静态变量 常量
			// // ReViewClass.h // hellowWorld // 本类是oc复习练手类 // Created by hongtao on 2018/3/26. // Copyright © ... 
- windows10下如何完全卸载串口驱动?
			答: 所需步骤如下: 1. 以管理员身份启动cmd 2. 在cmd中输入两行命令来启动设备管理器 3. 设置view->Show hidden devices 4. 在Ports (COM &a ... 
- JavaFx入门(一)
			JavaFx和Swing的对比: javaFX确实比swing好看些,但没有swing的事件按钮等写法爽快,特别是使用eclipse的matisse开发视图,托拉拽的方式.可javaFX不只是有swi ... 
- 数据中心网络架构的问题与演进 — SDN
			目录 文章目录 目录 前文列表 OpenFlow 源起 从 OpenFlow 衍生 SDN 前文列表 <数据中心网络架构的问题与演进 - 传统路由交换技术与三层网络架构> <数据中心 ... 
- redis的日常操作(1)
			一.简介 [概述] redis是一种nosql数据库,他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,并且他比memcached支持更多的数据结构(string ... 
- 7-1 shell编程基础之二
			shell编程基础之二 算数运算 bash中的算术运算:help let +, -, *, /, %取模(取余), **(乘方),乘法符号有些场景中需要转义 实现算术运算: (1) let var=算 ... 
- SQL-T
			Mysql函数.语句记录 增加 INSERT INTO table_name (列1, 列2,...) VALUES (值1, 值2,....) 删除 DELETE FROM 表名称 WHERE 列名 ... 
- C#编程 socket编程之unity聊天室
			上面我们创建了tcp的客户端和服务端,但是只能进行消息的一次收发.这次我们做一个unity的简易聊天室,使用了线程,可以使用多个客户端连接服务器,并且一个客户端给服务器发消息后,服务器会将消息群发给所 ... 
- CTR点击率校准
			1. 概述 广告CTR预估过程中,正负样本比例差距较大,需要采样,但是采用后模型训练的结果是有偏的. 2. 校准方式 用逻辑回归作为激活函数 
- GIT命令总结,so easy
			一:GIT命令实战(码云) https://oschina.gitee.io/learn-git-branching/ 提交 git commit 创建分支 git branch <name&g ... 
