zoukankan      html  css  js  c++  java
  • openlayers4 入门开发系列之地图标绘篇(附源码下载)

    前言

    openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材。

    openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章:

    内容概览

    1.基于 openlayers4 实现地图标绘
    2.源代码 demo 下载

    本篇的重点内容是利用 openlayers4 实现地图标绘功能,效果图如下:

    实现思路

    • 标绘界面设计以及标绘面板控制
    <!-- 标绘面板 -->
    <div style="position:absolute;right:180px;top:80px;display:none;" id="map_toolbar_plot">
    <ul class="map_toolbar_list_more map_toolbar_list_more-float clearfix">
    <li plottype="freehandline">自由线<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar28"></span></li>
    <li plottype="polyline">折线<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar29"></span></li>
    <li plottype="arc">弧线<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar30"></span></li>
    <li plottype="curve">曲线<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar31"></span></li>
    <li plottype="freehandpolygon">手绘<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar32"></span></li>
    <li plottype="polygon">多边形<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar33"></span></li>
    <li plottype="rectangle">矩形<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar34"></span></li>
    <li plottype="circle">圆形<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar35"></span></li>
    <li plottype="assaultdirection">直角<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar36"></span></li>
    <li plottype="squadcombat">简单<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar37"></span></li>
    <li plottype="tailedsquadcombat">燕尾<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar38"></span></li>
    <li plottype="gatheringplace">集结地<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar39"></span></li>
    </ul>
    </div>

    更多的详情见GIS之家小专栏

    文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

  • 相关阅读:
    ECS:Systems
    ECS:Components
    ECS:Entitias
    对List遍历过程中添加和删除的思考
    SpringBoot 推荐博客
    理解和解决Java并发修改异常ConcurrentModificationException(转载)
    我对CopyOnWrite的思考
    最简日志打印规范(推荐,转载)
    为什么不应该使用Zookeeper做服务发现?(转载)
    浏览器允许跨域设置(不用于生产环境,开发用)
  • 原文地址:https://www.cnblogs.com/giserhome/p/9942781.html
Copyright © 2011-2022 走看看