openplayers google地图 ，把简单的东西放到一块

最新推荐文章于 2024-05-20 09:49:35 发布
最新推荐文章于 2024-05-20 09:49:35 发布
阅读量217 收藏
点赞数
文章标签： json python
原文链接：https://my.oschina.net/yangcaoling/blog/1594747
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

/*
 *    地图容器初始化
 */

function googleMap() {
    this.targer = 'mapDiv';
    // var googleLayer; //加载的Google图层
    this.projection = ol.proj.get('EPSG:3857');
    this.defaultPoint = [116.14149525215394,40.138918953133015];
    // 坐标转换
    this.geom3857To4326 = function(geom) {
        return ol.proj.transform(geom, 'EPSG:3857', 'EPSG:4326');
    };
    this.geom4326To3857 = function(geom) {
        return ol.proj.transform(geom, 'EPSG:4326', 'EPSG:3857');
    };
    /*
     * 根据图层类型加载Google地图
     */
    this.loadGoogleMap = function(mapType) {
        var googleLayer = null;
        switch (mapType) {
        case "terrain": // 地形
            googleLayer = new ol.layer.GoogleMapLayer({
                layerType : ol.source.GoogleLayerType.TERRAIN
            });
            googleLayer.setVisible(false);
            googleLayer.TYPE="TERRAIN";
            break;
        case "vector": // 矢量
            googleLayer = new ol.layer.GoogleMapLayer({
                layerType : ol.source.GoogleLayerType.VEC
            });
            googleLayer.TYPE="VEC";
            googleLayer.setVisible(false);
            break;
        case "raster": // 影像
            googleLayer = new ol.layer.GoogleMapLayer({
                layerType : ol.source.GoogleLayerType.RASTER
            });
            googleLayer.setVisible(true);
            googleLayer.TYPE="RASTER";
            break;
        case "road": // 道路
            googleLayer = new ol.layer.GoogleMapLayer({
                layerType : ol.source.GoogleLayerType.ROAD
            });
            googleLayer.setVisible(true);
            googleLayer.TYPE="ROAD";
        default:
        }
        googleLayer.TYPENAME="GOOGLEBASEMAP";
        // map.addLayer(googleLayer); // 添加Google地图图层
        return googleLayer;
    };
    // 初始化Google图层
    //地形图
    this.rasterGoogleLayer = this.loadGoogleMap("raster");
    /*this.rasterGoogleLayer = new ol.layer.GoogleMapLayer({
        layerType : ol.source.GoogleLayerType.RASTER
    });*/
    //交通图
    this.roadGoogleLayer = this.loadGoogleMap("road");
    /*this.roadGoogleLayer = new ol.layer.GoogleMapLayer({
        layerType : ol.source.GoogleLayerType.ROAD
    });*/
    //矢量图
    this.terrainGoogleLayer = this.loadGoogleMap("terrain");
    /*this.terrainGoogleLayer = new ol.layer.GoogleMapLayer({
        layerType : ol.source.GoogleLayerType.TERRAIN
    });*/
    // 矢量
    this.vecGoogleLayer = this.loadGoogleMap("vector");
    /*this.vecGoogleLayer = new ol.layer.GoogleMapLayer({
        layerType : ol.source.GoogleLayerType.VEC
    }); */
     
/*    this.sss =  new ol.layer.Tile({
        source: new ol.source.XYZ({
            url:'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
        })
    });*/
    this.createMap = function(json) {
        var mapcenter = (json.center==null||json.center==undefined)? this.defaultPoint:json.center;
        mapcenter = ol.proj.transform(mapcenter, 'EPSG:4326', 'EPSG:3857')
        console.log(mapcenter);
        // 初始化地图容器
        // alert("初始化地图容器");
        var map = new ol.Map({
            //layers : [ this.sss ],
            layers : [ this.rasterGoogleLayer,this.terrainGoogleLayer,this.vecGoogleLayer, this.roadGoogleLayer ],
            controls : ol.control.defaults({
                attribution : false,
                zoom : true,
                rotate : false 
                
            })//.extend([ new ol.control.ScaleLine(),new ol.control.ZoomSlider() ]),
             .extend([ 
                // new ol.control.Attribution(),
                // new  ol.control.FullScreen(),// 全屏 
                 new ol.control.MousePosition({
                     projection:ol.proj.get('EPSG:4326'),
                     coordinateFormat: ol.coordinate.createStringXY(4)
                 }),// 鼠标位置 //
                // new ol.control.OverviewMap(),// 缩略图 
                 new ol.control.Rotate(),
                 new ol.control.ScaleLine(),// 比例尺 
                 //new ol.control.Zoom(),
                 //new ol.control.ZoomSlider(),// 缩放滚动条 
                // new ol.control.ZoomToExtent() 
                 ]),
             /// 缩放到范围
            target : json.mapId, // 地图容器div的ID
            logo : false,
            view : new ol.View({
                projection : this.projection, // 投影坐标系
                // 设置地图中心范围 
                  extent : [ 6900000.00, 0,
                  18000000, 9000000 ], 
                  
                center : mapcenter,
                zoom : 16,
                // 限制地图缩放最大级别为14，最小级别为10
                // minZoom : 10,
                minZoom : 4,
                maxZoom : 20
            }),
        });
         console.log(map.getView().getCenter());
        // 鼠标监听事件
        /*
         * var key = map.on('singleclick', function(event){ console.log(event); //
         * 下面这行代码就是取消事件监听 //map.unByKey(key); })
         */
         map.on('pointermove', function(event) {
            // $("#tpoint").html(); //
             //console.log(JSON.stringify(ol.proj.transform(event.coordinate, 'EPSG:3857', 'EPSG:4326')));
         
        });
        
        map.on('singleclick', function(event) {
            //console.log(JSON.stringify(ol.proj.transform(event.coordinate, 'EPSG:3857', 'EPSG:4326'))); //
             
         
        }); 
         
        
        return map;
    };
    
    
    // 创建 VectorLayer
    this.createVectorLayer = function() {
        var layer = new ol.layer.Vector({
            source : new ol.source.Vector() 
             
        });
         
        return layer;
    };
    // 地图 飞行定位
    this.flymove = function(map, point) {
        if(point == null || point == undefined) point = this.defaultPoint;
        var duration = 2000; // 持续时间（毫秒）
        var view = map.getView();
        view.animate({
              center: point,
              duration: 2000
        });
        //view.setCenter(JSON.parse(point)); // 定位
    };
    // 地图 飞行定位
    this.move = function(map, point) {
        if(point == null || point == undefined) point = this.defaultPoint;
        var duration = 2000; // 持续时间（毫秒）
        var view = map.getView();
        var start = +new Date();
        // 移动效果
        var pan = ol.animation.pan({
            duration : duration, // 设置持续时间
            source : /** @type {ol.Coordinate} */
            (view.getCenter()),
            start : start
        });
        // 反弹效果
        var bounce = ol.animation.bounce({
            duration : duration, // 设置持续时间
            resolution : 2 * view.getResolution(), // 4倍分辨率
            start : start
        });
        map.beforeRender(pan, bounce); // 地图渲染前设置动画效果(pan+bounce)
        view.setCenter(JSON.parse(point)); // 定位
    };
     
    // 加载面
    this.setPolygonLayerFeatures = function(layer, areaList ,style ,option) {
        if (areaList == undefined || areaList.length == 0)
            return false;
        var featureArr = [];
        for (var i = 0; i < areaList.length; i++) {
            try {
                var obj = areaList[i];
                var geom = eval(obj.geom);
            /*    var g = [geom];
                geom = this.geom4326To3857(g);*/
                var feature = new ol.Feature({
                    geometry : new ol.geom.Polygon(geom) 
                     
                }); 
                feature.getGeometry().transform('EPSG:4326','EPSG:3857');
                //var s = feature.getGeometry().transform('EPSG:4326','EPSG:3857').getCoordinates()[0];
                feature.setStyle(style);
             
                feature.entity = obj;
                feature.setId(obj.id);
                if(option!=undefined && option!=null){
                    if(option.type!=undefined) feature.TYPE = option.type;
                }
                
                featureArr.push(feature);
            } catch (e) {
                console.log(e);
            }
        }
        // 添加面
 
        layer.getSource().addFeatures(featureArr);
        // map.render();
    };
    // 绘画管线
    this.setlineLayerFeatures = function(layer, lineList , style ,option) {
        if (lineList == undefined || lineList.length == 0)
            return false;
        var featureArr = [];
         
        for (var i = 0; i < lineList.length; i++) {
            try {
                var obj = lineList[i];
                var geom = eval(obj.geom);
             
                var feature = new ol.Feature({
                    geometry : new ol.geom.LineString(geom),
                    name : obj.orgName
                });
                feature.getGeometry().transform('EPSG:4326','EPSG:3857');
                feature.setStyle(style);
                feature.entity = obj;
                feature.setId(obj.id);
                if(option!=undefined && option!=null){
                    if(option.type!=undefined) feature.TYPE = option.type;
                }
                featureArr.push(feature);
            } catch (e) {
                console.log(e);
            }

        }
        // 添加面
        console.log(featureArr);
        layer.getSource().addFeatures(featureArr);
        // map.render();
    };
     
     
    // 加载点坐标
    this.setPointLayerFeatures = function(  layer,pointList, style ,option) {
        if (pointList == undefined || pointList.length == 0)
            return false; 
        var featureArray = [];
        for (var i = 0; i < pointList.length; i++) {
            try {
                var obj = pointList[i];
              
                if(obj.geom==null)obj.geom= JSON.stringify(this.defaultPoint);
                var labelCoords = eval(obj.geom);
                var feature = new ol.Feature({
                    geometry : new ol.geom.Point(labelCoords), //
                    labelPoint : new ol.geom.Point(labelCoords),
                    name : obj.unitname
                });
    /*            style.setText(new ol.style.Text({
                    text : obj.unitname,
                    fill : new ol.style.Fill({
                        color : 'white'
                    }),
                    font : '16px 微软雅黑,sans-serif'
                }));*/
                feature.getGeometry().transform('EPSG:4326','EPSG:3857');
                feature.setStyle(function(resolution) {
                    return [ style ]
                });
                feature.setId(obj.id);
             
                feature.entity = obj;
                if(option!=undefined && option!=null){
                    if(option.type!=undefined) feature.TYPE = option.type;
                }
                featureArray.push(feature);
            } catch (e) {
                console.log(e);
            }
        }
        layer.getSource().addFeatures(featureArray);
         
    };

     
    // 打开弹窗
    this.getPopup = function(dom) {
        var popup = new ol.Overlay({
            element : dom,
            positioning : 'bottom-center'
        });
        return popup;
    };

    // 创建选中项控件，
    this.getSelect = function() {
        // 初始化一个交互选择控件,并添加到地图容器中
        var select = new ol.interaction.Select();
        return select;
    };
    // 创建交互编辑控件，
    this.getModify = function(select) {
        // 初始化一个交互编辑控件,并添加到地图容器中
        return new ol.interaction.Modify({
            features : select.getFeatures()
        // 选中的要素
        });
    };
     
    // gis 地图 可编辑 和选择 当前 不能使用 . 需要激活
    this.modifySelectActive = function(map) {
        map.gisSelect = this.getSelect();
        map.gisModify = this.getModify(map.gisSelect);
        map.addInteraction(map.gisSelect);
        map.addInteraction(map.gisModify);
    }

};
 

// 定义修改几何图形功能控件
var Modify = {
    init : function() {
        // 初始化一个交互选择控件,并添加到地图容器中
        this.select = new ol.interaction.Select();
        map.addInteraction(this.select);
        // 初始化一个交互编辑控件，并添加到地图容器中
        this.modify = new ol.interaction.Modify({
            features : this.select.getFeatures()
        // 选中的要素
        });
        map.addInteraction(this.modify);
        // 设置几何图形变更的处理
        this.setEvents();
    },
    setEvents : function() {
        var selectedFeatures = this.select.getFeatures(); // 选中的要素
        // 添加选中要素变更事件
        this.select.on('change:active',
                function() {
                    selectedFeatures.forEach(selectedFeatures.remove,
                            selectedFeatures);
                });
    },
    setActive : function(active) {
        this.select.setActive(active);// 激活选择要素控件
        this.modify.setActive(active);// 激活修改要素控件
    }
};
/*
 * Modify.init(); //初始化几何图形修改控件 Modify.setActive(true); //激活几何图形修改控件;
 */


 

转载于:https://my.oschina.net/yangcaoling/blog/1594747

weixin_34195364
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2064
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
Openplayers简单发布Mapserver（ＷＭＳ）服务
dihe8722的博客
08-01 190
代码如下： function init() { var map = new OpenLayers.Map( { div: "map", //下面很重要，如果不设置，每个图片都按照BBOX:-180,-90,90-270这样的经纬度去找，对于用me...
探索OpenPlayer.js：轻量级的多媒体播放器
最新发布
gitblog_00094的博客
05-20 358
探索OpenPlayer.js：轻量级的多媒体播放器 项目地址:https://gitcode.com/openplayerjs/openplayerjs 项目简介 OpenPlayer.js是一个基于HTML5的媒体播放解决方案，能够支持多种格式的视频和音频，包括MP4/MP3、HLS和M(PEG)-DASH。不仅如此，它还具备播放VMAP、VAST和VPAID广告的功能。这个项目由Rafae...
Openplayers发布Mapserver的WFS服务
dihe8722的博客
08-01 128
function init() { var wfs = OpenLayers.Protocol.WFS({ url: "http://localhost/cgi-bin/mapserv.exe?map=D:/ms4w/Apache/cgi-bin/wfs.map&", ...
openplayers使用svg图标
隔壁家的小屁孩
03-17 375
<template> <div class="myMap"> <div id="map" style="height: 100%; width: 100%;"></div> </div> </template> <script> import "ol/ol.css"; import Map from "ol/Map"; import Feature from "ol/F
OpenLayers API整理
diaoyanbian8143的博客
05-07 2452
整理的Openlayers 的知识笔记，随着运用不断加深理解，也会不断更新。 本文链接：Openlayers API整理 作者：狐狸家的鱼 GitHub：八至 一、创建地图 1、地图Map 创建地图底图：需要用new ol.Map({}) 地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI...
地图标注的显示与隐藏
04-02
`PartialRefresh` 方法用于更新地图视图，确保标注状态的改变能够立即反映到地图显示中。如果要显示标注，则只需将 `DisplayAnnotation` 设置为 `true` 即可。 ### 应用场景 控制地图标注的显示与隐藏有多种应用...
openLayers基础地图操作
前端小记
02-14 7165
和高德地图，百度地图，腾讯地图，Arcgis一样，OpenLayers是一个用于开发WebGIS客户端的JavaScript包。
load-google-maps-api：一种轻量级的Promise返回工具，用于加载Google Maps JavaScript API
02-04
加载Google Maps API 一个轻量级的Promise返回帮助程序，用于加载 Promise的已实现回调将传递给google.maps对象 （可选）设置超时，API密钥，语言 用法 const loadGoogleMapsApi = require ( 'load-google-maps-api' ) loadGoogleMapsApi ( ) . then ( function ( googleMaps ) { new googleMaps . Map ( document . querySelector ( '.map' ) , { center : {
openlayers在线地图：高德地图、天地图、谷歌、geoq(智图)
The Words OF GIANT
04-25 1万+
-----------------2019年修订 天地图服务接口调用需要申请开发许可（Key）（自己去官网注册），添加到请求地址后即可 ----------------------------------------------------------------------------------------------------------------------------------...
openlayer 地图实例
rod0320的博客
12-07 477
文章目录地图导航：成都定位 地图导航：成都定位 <!Doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
OpenLayers 3 之 加载百度地图
研究与专注
10-26 3万+
很多人想使用 OpenLayers 调用百度地图、腾讯地图等国内地图，本文就讨论一下其可能性和实现原理。我们以百度地图为例，分析其地图调用原理，我们都使用过百度地图，在网速不快的情况下，肯定有过感受，地图是一块一块加载的，从这里我们就可以看出，地图是被切成了很多块的小图片，调用时按照一定规则请求需要的“切片”，可视区域以外的“切片”不加载，这样可以减小数据传输数据量，使地图加载更快。
openplayer 计算gis地图小车移动的角度
qq_25891151的博客
05-17 284
openplayer 计算gis地图小车移动的角度 openplayer 计算gis地图小车移动的角度 //给定起始点和目标点，计算目标点方向的角度 function getAngle(x1, y1, x2, y2) { let x = Math.abs(x1 - x2); let y = Math.abs(y1 - y2); let z = Math.sqrt(x * x + y * y); let angle = Math.round((Math.asin(y /
OpenLayers快速开始
秋天未成熟的博客
11-25 1万+
本系列关于OpenLayers的翻译基于版本v4.5。 一、在页面上放置一个地图 以下会有一个完整的可运行的例子。首先，创建一个html文件，复制如下代码，并在浏览器中打开即可。 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;link rel="stylesheet" href="https...
OpenLayers教程一：OpenLayers概述
热门推荐
不睡觉的怪叔叔的博客
05-30 10万+
目录 一、OpenLayers简介 二、OpenLayers的特征 三、OpenLayers的框架结构 一、OpenLayers简介 OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。 OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机...
openlayers 地图上绘制区域悬浮弹窗实现跟随鼠标移动
zhongguogangkou的博客
04-23 2721
今天做了一个功能，是基于openlayers在地图上绘制区域，并实现鼠标在区域内悬浮弹出指示窗，指示窗随着鼠标的移动而移动。 我采用的是ol.Overlay方式： 首先新加一个overlay。 function addOverlay(center){ document.getElementById('overlay').style.display = "block"; //此处的overlay...
openlayers常用包及作用
一星程序饲养员
10-29 777
ol.view：负责地图的中心点，放大投影之类的设置 zoom：是一种方便的方式来指定地图的分辨率 ol.source：子类获取远程数据图层，包含免费的商业地图和瓦片服务 layer：图层 用于可视化显示 ol.layer.Tile ：用于显示瓦片资源,这些瓦片提供了预渲染,并且由特定分别率的缩放级别组织的瓦片图 ol.layer.Image ：用于显示支持渲染服务的图片,这些图片可用于任意...
OpenLayers使用
David_jiang
06-22 1万+
OpenLayers是Web GIS前端开发的利器，如果你想在浏览器中进行Web GIS的开发，那么OpenLayers可以大大减少你的工作量，让你快速开发出应用。 OpenLayers概览 OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户...
openlayers使用turf完成点线周边缓冲分析
小水滴的博客
06-23 780
openlayers使用turf完成点线周边缓冲分析
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值