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
    
    
    
  • 相关阅读:
    微信小程序tabBar 不显示底部菜单的原因和解决方法
    MySQL安装教程
    表单按回车触发事件
    Linux查找最近修改的文件
    通过JS实现网站繁体简体互换
    二级联动下拉列表
    JS跳出框架返回上一页
    mysql查询所有记录,并去掉重复的记录
    查询时间戳函数
    简单信息逐条滚动显示,适用于企业动态,公告等
  • 原文地址:https://www.cnblogs.com/wwj007/p/11685932.html
Copyright © 2011-2022 走看看