zoukankan      html  css  js  c++  java
  • openlayers之点,线,面(以城市,河流,省份为例,分别对应点线面)

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

         // 设置标注样式函数
        function createStyle(name) {
          // 河流style
          var riverStyle = new Style({
            stroke: new Stroke({
              color: '#4e89d4',
               2
            }),
            fill: new Fill({
              color: '#eee'
            })
          })
          // 省份style·
          var provinceStyle = new Style({
            stroke: new Stroke({
              color: '#4e89d4',
               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',
                   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
    
    
    
  • 相关阅读:
    改变对象的字符串提示
    perl 和 python中的回调函数
    shiro权限验证标签
    user_tables 的信息依赖于统计信息
    centos jdk 1.7升级到1.8后显示还是1.7
    7.1 可接受任意数量参数的函数:
    IntelliJ IDEA中怎么查看文件中所有方法(类似eclipse里面的outline)
    Intellij IDEA 代码格式化与eclipse保持风格一致
    jquery-1.9.1.min.js:69 Uncaught TypeError: Illegal invocation
    python json模块
  • 原文地址:https://www.cnblogs.com/wwj007/p/11685932.html
Copyright © 2011-2022 走看看