查看
  • 编辑修改
  • 首页
  • UNITY
  • NODEJS
  • PYTHON
  • AI
  • GIT
  • PHP
  • GO
  • CEF3
  • JAVA
  • HTML
  • CSS
devbox
weixin_40725706
这个屌丝很懒,什么也没留下!
关注作者
热门标签
  • jquery
  • HTML
  • CSS
  • PHP
  • ASP
  • PYTHON
  • GO
  • AI
  • C
  • C++
  • C#
  • PHOTOSHOP
  • UNITY
  • iOS
  • android
  • vue
  • xml
  • 爬虫
  • SEO
  • LINUX
  • WINDOWS
  • JAVA
  • MFC
  • CEF3
  • CAD
  • NODEJS
  • GIT
  • Pyppeteer
  • article
热门文章
  • 1最冷招聘季:裁员后,我求职沟通1398次,投277份简历,面试72场
  • 2基于单片机的家用电饭煲控制系统的研究_基于单片机的电饭煲远程控制系统
  • 3中国最大的系统软件外包公司排名靠谱的IT人力外包企业有哪些_深圳极联股份有限公司是外包吗
  • 4利用python+whisper生成视频字幕文件_python whisper如何输出字幕文件
  • 5任务4.8.4 利用Spark SQL实现分组排行榜
  • 6剑指offer——牛客网 力扣——day3_剑指offer用牛客还是力扣
  • 7深度探索:机器学习中的高效生成对抗网络(EfficientGAN)原理及其应用_gan effixientnet
  • 8最小二乘法笔记_最小二乘法一定是直线吗?
  • 9ElasticSearch下载安装配置及其使用(windows)
  • 10Mysql详解Explain索引优化最佳实践_explain 索引优化
当前位置:   article > 正文

geoserver+openlayers做地图展示,添加标注,删除标注,vue版本,前后端分离版_openlayers为geoserver图层添加图例

作者:weixin_40725706 | 2024-06-16 20:52:03

赞

踩

openlayers为geoserver图层添加图例
1、下载依赖
npm install ol
  • 1
2、引入代码
<template>
  <div class="" style="width: 95%; height: 95%">
    <div style="width: 100%; height: 100%" id="map" ref="rootmap"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { Tile as TileLayer } from "ol/layer";
import { WMTS } from "ol/source";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { Projection } from "ol/proj";
import { mapGetters } from "vuex";
import FullScreen from "ol/control/FullScreen";
import ScaleLine from "ol/control/ScaleLine";
import ZoomSlider from "ol/control/ZoomSlider";
import MousePosition from "ol/control/MousePosition";
import { defaults } from "ol/control";
// 图上图标相关
import OlFeature from "ol/Feature";
import OlGeomPoint from "ol/geom/Point";
import OlLayerVector from "ol/layer/Vector";
import OlSourceVector from "ol/source/Vector";
import OlStyleStyle from "ol/style/Style";
import OlStyleIcon from "ol/style/Icon";
import Overlay from "ol/Overlay";
// 用来添加相关文字描述的
// import Text from 'ol/style/Text'
// import Fill from 'ol/style/Fill'
const baseUrl = "http://map.teacha.top/geoserver/gwc/service/wmts";
const gridsetName = "EPSG:4326";
const gridNames = [
  "EPSG:4326:4",
  "EPSG:4326:5",
  "EPSG:4326:6",
  "EPSG:4326:7",
  "EPSG:4326:8",
  "EPSG:4326:9",
  "EPSG:4326:10",
  "EPSG:4326:11",
  "EPSG:4326:12",
  "EPSG:4326:13",
  "EPSG:4326:14",
  "EPSG:4326:15",
  "EPSG:4326:16",
  "EPSG:4326:17",
  "EPSG:4326:18",
  "EPSG:4326:19",
]; //切片名
const style = "";
const format = "image/png";
const layerName = "xtmap:6-1";
const resolutions = [
  0.0439453125,
  0.02197265625,
  0.010986328125,
  0.0054931640625,
  0.00274658203125,
  0.001373291015625,
  6.866455078125e-4,
  3.433227539062e-4,
  1.716613769531e-4,
  8.58306884766e-5,
  4.29153442383e-5,
  2.14576721191e-5,
  1.07288360596e-5,
  5.3644180298e-6,
  2.6822090149e-6,
  1.3411045074e-6,
]; //分辨率
const baseParams = [
  "VERSION",
  "LAYER",
  "STYLE",
  "TILEMATRIX",
  "TILEMATRIXSET",
  "SERVICE",
  "FORMAT",
];
//const map = []
export default {
  name: "lq-map",
  data() {
    return {
      map: [],
      layers: [], // 存放标注点。
      dataList: [
        {
          popuId: 22202,
          correctionTypeStr: "XXXXXXX",
          areaName: "XXXX",
          name: "XX",
          lon: "108.99316336631775",
          id: 103,
          personNumber: null,
          residenceAddress: "XXXXXXXXXX",
          lat: "28.44491170883179",
          sexStr: "XXX",
        }
      ], // 数据
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    constructSource(projection) {
      var url = baseUrl + "?";
      var params = {
        VERSION: "1.0.0",
        LAYER: layerName,
        STYLE: style,
        TILEMATRIX: gridNames,
        TILEMATRIXSET: gridsetName,
        SERVICE: "WMS",
        FORMAT: format,
      };
      for (var param in params) {
        if (baseParams.indexOf(param.toUpperCase()) < 0) {
          url = url + param + "=" + params[param] + "&";
        }
      }
      url = url.slice(0, -1);
      var source = new WMTS({
        url: url,
        layer: params["LAYER"],
        matrixSet: params["TILEMATRIXSET"],
        format: params["FORMAT"],
        projection: projection,
        tileGrid: new WMTSTileGrid({
          tileSize: [256, 256],
          extent: [-180.0, -90.0, 180.0, 90.0],
          origin: [-180.0, 90.0],
          resolutions: resolutions,
          matrixIds: params["TILEMATRIX"],
        }),
        style: params["STYLE"],
        wrapX: true,
      });
      return source;
    },
    initMap() {
      var view;
      var projection = new Projection({
        code: "EPSG:4326", //SRS标识符代码,例如EPSG:4326。
        units: "degrees",
        // worldExtent:[108.991275931,28.43280519,109.003845419,28.447106813],// 地图最大最小经纬度
        global: false, // 该预测是否对整个地球有效。
        axisOrientation: "neu", // 获取此投影的轴方向。示例值包括:enu-默认的东,北,高程。neu-向北,向东,向上-对于“纬度/经度”地理坐标或朝南的横向墨卡托很有用。wnu-西,北,上-一些行星坐标系具有“西正”坐标系
      });
      view = new View({
        center: [108.9959979057312, 28.442698717117313],
        zoom: 18,
        minZoom: 14,
        maxZoom: 20,
        projection: projection, // 展示地图-
        extent: [108.991275931, 28.43280519, 109.003845419, 28.447106813],
      });
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: this.constructSource(projection),
          }),
        ],
        view: view,
        controls: defaults({
          attribution: false, //右下角的地图信息控件
          rotate: true, //指北针控件
          zoom: true, //缩放按钮控件
        }).extend([
          new FullScreen(), //全屏
          new ScaleLine(), //比例尺控件
          new ZoomSlider(), //缩放滚动条控件
          new MousePosition(), //鼠标拖动显示经纬度
        ]),
      });
      this.popup();
      this.addMaker();
    },
    //添加标注点
    addMaker() {
      // 清除上一次标注点
      this.layers.forEach((e) => {
        this.map.removeLayer(e);
      });
      //$("#patrol_number").text(this.dataList.length);
      this.dataList.forEach((obj) => {
        var vectorSource = new OlSourceVector({});
        //创建图标特性
        var iconFeature = new OlFeature({
          geometry: new OlGeomPoint([obj.lon, obj.lat], "XY"),
          name: "my Icon",
        });
        iconFeature.set("userId", obj.id);
        iconFeature.set("popuId", obj.popuId);
        iconFeature.set("username", obj.name);
        iconFeature.set("addTime", obj.residenceAddress);
        iconFeature.set("areaName", obj.areaName);
        iconFeature.set("sexStr", obj.sexStr);
        iconFeature.set("correctionTypeStr", obj.correctionTypeStr);
        iconFeature.set("personNumber", obj.personNumber);
        //将图标特性添加进矢量中
        vectorSource.addFeature(iconFeature);
        //创建图标样式
        var iconStyle = new OlStyleStyle({
          image: new OlStyleIcon({
            // opacity: 0.75,
            // scale:0.5,
            src: "/img/marker.png",
          }),
        });
        //创建矢量层
        var vectorLayer = new OlLayerVector({
          source: vectorSource,
          style: iconStyle,
        });
        this.layers.push(vectorLayer);
        //添加进map层
        this.map.addLayer(vectorLayer);
      });
    },
    popup() {
      //定位
      var container = document.getElementById("popup");
      var content = document.getElementById("popup-content");
      var popupCloser = document.getElementById("popup-closer");
      var overlay = new Overlay({
        //设置弹出框的容器
        element: container,
        //是否自动平移,即假如标记在屏幕边缘,弹出时自动平移地图使弹出框完全可见
        autoPan: true,
      });
      this.map.on("click", (e) => {
        //coodinate存放了点击时的坐标信息
        var coodinate = e.coordinate;
        //在点击时获取像素区域
        var pixel = this.map.getEventPixel(e.originalEvent);
        this.map.forEachFeatureAtPixel(pixel, (feature) => {
          //设置弹出框内容,可以HTML自定义
          var userId = feature.get("userId");
          var username = feature.get("username");
          var addTime = feature.get("addTime");
          var areaName = feature.get("areaName");
          var sexStr = feature.get("sexStr");
          var correctionTypeStr = feature.get("correctionTypeStr");
          //设置弹出框内容,可以HTML自定义
          var html = "";
          html += "<div><b>编号:</b>" + userId + "</div>";
          html +=
            '<div><b>姓名:</b><a οnclick="showFamilyInfo(' +
            feature.get("popuId") +
            ')">' +
            username +
            "</a></div>";
          html += "<div><b>性别:</b>" + sexStr + "</div>";
          html += "<div><b>矫正类别:</b>" + correctionTypeStr + "</div>";
          html += "<div><b>行政区域:</b>" + areaName + "</div>";
          html += "<div><b>地址:</b>" + addTime + "</div>";
          content.innerHTML = html;
          //设置overlay的显示位置
          overlay.setPosition(coodinate);
          //显示overlay
          this.map.addOverlay(overlay);
        });
        // 弹窗关闭按钮
        if (popupCloser) {
          popupCloser.addEventListener("click", () => {
            overlay.setPosition(undefined);
          });
        }
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style>
.el-font-size {
  font-size: 14px;
}
.ol-mouse-position {
  color: red;
  top: 13px;
  right: 60px;
}
.form-control {
  padding: 3px 12px !important;
}
.col-sm-8 label {
  padding-top: 7px;
}
p {
  margin: 0;
}
.active {
  background-color: #f5f5f5;
}

.ant-list * {
  outline: none;
}

.ant-avatar > img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 5px;
}

.ant-list-item-meta-title > a {
  color: rgba(0, 0, 0, 0.65);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.form-control {
  padding: 15px 12px !important;
}

input,
select {
  border: 1px solid #e7eaec !important;
}

label {
  max-width: none;
}
.ol-popup {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  position: absolute;
  background-color: #ffffff;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 10px;
  border-radius: 7px;
  bottom: 12px;
  left: -50px;
  min-width: 300px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: #eeeeee;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
  font-size: 11px;
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
2、点击地图定位并且获取经纬度
<template>
  <div class="" style="width:95%;height: 95%">
    <div style="width:100%;height: 100%" id="map" ref="rootmap"></div>
  </div>
</template>

<script>
    import "ol/ol.css";
    import { Map, View } from "ol";
    import {Tile as TileLayer} from 'ol/layer';
    import {WMTS} from 'ol/source';
    import WMTSTileGrid from 'ol/tilegrid/WMTS'
    import {Projection} from 'ol/proj';
    import {mapGetters} from "vuex";
    import FullScreen from 'ol/control/FullScreen';
    import ScaleLine from 'ol/control/ScaleLine';
    import ZoomSlider from 'ol/control/ZoomSlider';
    import MousePosition from 'ol/control/MousePosition';
    import { defaults } from "ol/control";
    // 图上图标相关
    import OlFeature from 'ol/Feature'
    import OlGeomPoint from 'ol/geom/Point'
    import OlLayerVector from 'ol/layer/Vector'
    import OlSourceVector from 'ol/source/Vector'
    import OlStyleStyle from 'ol/style/Style'
    import OlStyleIcon from 'ol/style/Icon'
    // 用来添加相关文字描述的
    // import Text from 'ol/style/Text'
    // import Fill from 'ol/style/Fill'
    const baseUrl = 'http://map.teacha.top/geoserver/gwc/service/wmts'
    const gridsetName = 'EPSG:4326'
    const gridNames = ['EPSG:4326:4','EPSG:4326:5','EPSG:4326:6','EPSG:4326:7','EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19'] //切片名
    const style = ''
    const format = 'image/png'
    const layerName = 'xtmap:6-1'
    const resolutions = [0.0439453125,0.02197265625,
    0.010986328125, 0.0054931640625,0.00274658203125,0.001373291015625,
    6.866455078125E-4,3.433227539062E-4,1.716613769531E-4,8.58306884766E-5,
    4.29153442383E-5,2.14576721191E-5,1.07288360596E-5,5.3644180298E-6,
    2.6822090149E-6,1.3411045074E-6] //分辨率
    const baseParams = ['VERSION','LAYER','STYLE','TILEMATRIX','TILEMATRIXSET','SERVICE','FORMAT']
    //const map = []
    export default {
        name: "lq-map",
        data() {
            return {
                map: [],
                layers : []// 存放标注点。
            };
        },
        computed: {
            ...mapGetters(["userInfo"]),
        },
        methods: {
            constructSource(projection) {
                var url = baseUrl+'?'
                var params = {
                    'VERSION': '1.0.0',
                    'LAYER': layerName,
                    'STYLE': style,
                    'TILEMATRIX': gridNames,
                    'TILEMATRIXSET': gridsetName,
                    'SERVICE': 'WMS',
                    'FORMAT': format
                }
                for (var param in params) {
                    if (baseParams.indexOf(param.toUpperCase()) < 0) {
                        url = url + param + '=' + params[param] + '&';
                    }
                }
                url = url.slice(0, -1);
                var source = new WMTS({
                url: url,
                layer: params['LAYER'],
                matrixSet: params['TILEMATRIXSET'],
                format: params['FORMAT'],
                projection: projection,
                tileGrid: new WMTSTileGrid({
                    tileSize: [256,256],
                    extent: [-180.0,-90.0,180.0,90.0],
                    origin: [-180.0, 90.0],
                    resolutions: resolutions,
                    matrixIds: params['TILEMATRIX']
                }),
                style: params['STYLE'],
                wrapX: true
                });
                return source;
            },
            initMap() {
                 var view;
                 var projection = new Projection({
                    code: 'EPSG:4326', //SRS标识符代码,例如EPSG:4326。
                    units: 'degrees',
                    // worldExtent:[108.991275931,28.43280519,109.003845419,28.447106813],// 地图最大最小经纬度
                    global: false, // 该预测是否对整个地球有效。
                    axisOrientation: 'neu' // 获取此投影的轴方向。示例值包括:enu-默认的东,北,高程。neu-向北,向东,向上-对于“纬度/经度”地理坐标或朝南的横向墨卡托很有用。wnu-西,北,上-一些行星坐标系具有“西正”坐标系
                });
                view = new View({
                    center: [108.9959979057312, 28.442698717117313],
                    zoom: 18,
                    minZoom: 14,
                    maxZoom: 20,
                    projection: projection,// 展示地图-
                    extent: [108.991275931, 28.43280519, 109.003845419, 28.447106813],
                });
                this.map = new Map({
                    target: "map",
                    layers: [
                        new TileLayer({
                            source: this.constructSource(projection)
                        })
                    ],
                    view: view,
                    controls: defaults({
                        attribution: false,//右下角的地图信息控件
                        rotate: true,//指北针控件
                        zoom: true, //缩放按钮控件
                    }).extend([
                        new FullScreen(),//全屏
                        new ScaleLine(),//比例尺控件
                        new ZoomSlider(),//缩放滚动条控件
                        new MousePosition()//鼠标拖动显示经纬度
                        ]),
                });
                this.popup();
            },
            popup(){//定位
                this.map.on('click',(e)=>{
                    // 清除上一次标注点
                    this.layers.forEach(e => {
                      this.map.removeLayer(e);
                    })
                    var coodinate = e.coordinate;
                    // 清除上一次标注点
                    var vectorSource = new OlSourceVector({});
                    //创建图标特性
                    var iconFeature = new OlFeature({
                        geometry: new OlGeomPoint([coodinate[0],coodinate[1]], "XY"),
                        name: "my Icon"
                    });
                    //将图标特性添加进矢量中
                    vectorSource.addFeature(iconFeature);
                    //创建图标样式
                    var iconStyle = new OlStyleStyle({
                        image: new OlStyleIcon({
                            opacity: 0.75,
                            src: "/img/marker.png"
                        }),
                    });
                    //创建矢量层
                    var vectorLayer = new OlLayerVector({
                        source: vectorSource,
                        style: iconStyle
                    });
                    this.layers.push(vectorLayer);
                    //添加进map层
                    this.map.addLayer(vectorLayer);
                    this.$emit("onLonLat",coodinate[0],coodinate[1]);//获取到的经纬度。
                });
            }
        },
        mounted() {
            this.initMap()
        }
    };
</script>

<style>
  .el-font-size {
    font-size: 14px;
  }
  .ol-mouse-position{
    color: red;
    top: 13px;
    right: 60px;
  }
</style>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/728234
推荐阅读
  • articleGeoServer+mapbox发布矢量瓦片(一):创建美国区域显示_mapbox 瓦片 conte...
    安装GeoServer使用Geoserver: geoserver-2.15.0.exe版本 和对应的vector ti...

    赞

    踩

  • articleGeoServer+mapbox发布矢量瓦片(二):改进渲染风格_geoserver矢量瓦片竖线...
    说明参考Mapbox例子中显示美国每个州的分布图,读取GeoServer发布的切片,html代码如下:

    赞

    踩

  • articleGeoServer 矢量瓦片插件_vnd.mapbox-vector-tile...
    如果没有GeoServer application/x-protobuf;type= mapbox-vector选项时,...

    赞

    踩

  • articleopenlayers:实现画椭圆(附完整源码)_openlayers 椭圆...
    openlayers:实现画椭圆(附完整源码)_openlayers 椭圆openlayers 椭圆 ...

    赞

    踩

  • articleOpenLayers imageCanvas的使用与问题解决---Canvas图层与底图图层范围不一...
    前言h5 画布要想进行地理坐标相关的绘图如何能保证与底图上的位置相一致呢?这个问题一定会困惑刚刚进行地理数据前端可视化的...

    赞

    踩

  • article掌握 OpenLayers:集成 Canvas、ECharts 和 Turf.js 的终极指南_op...
    OpenLayers 是一个强大的开源地图库,用于在网页上展示地图数据。它支持多种地图源,包括 Google Maps、...

    赞

    踩

  • articleopenlayers 使用echarts_openlayers+echarts...
    echarts 中提供了很多的图标和特效,这正好弥补了不会写图表的我,加上地图上功能的需要,所以采用了ol3Echart...

    赞

    踩

  • articleOpenLayers 6 实现仿Echarts风格的动态迁徙图/航班图_openlayers ech...
    OpenLayers 6 实现仿Echarts风格的动态迁徙图/航班图_openlayers echarts 迁徒图op...

    赞

    踩

  • articleopenlayers 5.0结合echarts迁移图_new adlayer...
    1.通过npm安装 :npm install openlayers_echart2.代码import ADLayer f...

    赞

    踩

  • articleOpenLayers 3.0+highcharts_【openlayers3】在地图上添加highc...
    感谢OpenLayers中文网的fengl同学,_【openlayers3】在地图上添加highcharts图表【ope...

    赞

    踩

  • article159:vue+openlayers 地图上添加Echarts环形图_超图实现图层上添加echart...
    本示例的目的是介绍演示如何在vue+openlayers中添加Echarts的环形,借助于一个插件ol-echarts可...

    赞

    踩

  • articleopenlayers-echarts 公交路线图实现_echarts 公交实时路线...
    关于 openlayers 入门开发系列结合 echarts 开发 文章,几个作者 抄来抄去,这几个作者没有抄明白。gi...

    赞

    踩

  • articleOpenLayers 3地图添加图标_openlayers添加图标...
    OpenLayers 3地图添加图标一、overlay方式在地图添加图标1、项目结构2、map.html[详细] -->

    赞

    踩

  • articleVue+OpenLayers 实现地图上添加 Echarts 环形图_openlayers在地图上添...
    在这个示例中,我们使用 Vue 和 OpenLayers 创建了一个基本的地图,并使用 Echarts 添加了一个简单的...

    赞

    踩

相关标签
  • openlayers
  • OpenLayers
  • imageCanvas
  • javascript
  • echarts
  • 前端
  • OpenLayers 6
  • Echarts
  • WebGIS
  • HighCharts
  • openlayers示例
  • openlayers多边形
  • OpenLayers 3
  • overlay
  • Feature + Style
  • canvas
  • styleFunction
  • vue.js
  • js

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。

  

闽ICP备14008679号