zoukankan      html  css  js  c++  java
  • Openlayers

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test4.aspx.cs" Inherits="test4" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    #map {
    height: 600px;
    800px;
    border: 1px solid black;
    }


    .reds {
    background-color: red;
    }

    .greens {
    background-color: green;
    }
    </style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <link href="css/ol.css" rel="stylesheet" />
    <script src="js/ol.js"></script>

    </head>
    <body>
    aaaaaaaaaaaaaa:
    <div id="count"></div>
    <div id="map" style=" 850px; height: 750px"></div>

    </body>
    </html>
    <script type="text/javascript">
    var totalView = new ol.View({
    extent: [113.468897, 36.055732, 119.869576, 42.623632],
    center: [116.6692365, 39.339682],
    zoom: 7.3,
    minZoom: 7,//缩放等级最小等级
    maxZoom: 8, //缩放等级最大等级
    projection: 'EPSG:4326',
    zindex: 5
    });

    //创建地图
    var map = new ol.Map({
    logo: { src: 'image/favicon.ico', href: 'http://huatron.cn' }, // 点击能跳转到对应页面
    logo: false, // 不显示logo
    layers: [
    new ol.layer.Tile({
    source: new ol.source.OSM(),
    zindex: 5//显示z顺序
    })
    ],
    view: totalView,//控制缩放等级
    target: 'map'//目标div
    });
    //增加数据图层
    var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
    url: '130000.txt',
    format: new ol.format.GeoJSON()
    })
    });
    map.addLayer(vectorLayer);

    var dxarray = [117.33, 117.22, 116.37, 116.52];
    var dyarray = [38.40, 38.07, 37.65, 37.89];
    var cssarray = ['reds', 'greens', 'reds', 'greens'];
    var numarray = ['51', '52', '61', '66']

    //循环添加站点数据 click时间
    for (var i = 0; i < dxarray.length; i++) {
    var dx = dxarray[i];//x坐标
    var dy = dyarray[i];//y坐标
    var elementsss = document.createElement('div');
    elementsss.className = cssarray[i];
    elementsss.innerText = numarray[i];
    //注册单击事件
    elementsss.onclick = function () {
    alert(this.innerText);
    }
    //注册鼠标划入事件
    elementsss.onmouseover = function() {
    //alert(this.innerText+":test划入")
    }
    //注册鼠标移出事件
    elementsss.onmouseout = function () {
    //alert(this.innerText+":test划出");
    }
    var makerss = new ol.Overlay({
    position: [dx, dy],
    positioning: 'center-center',
    element: elementsss
    });
    map.addOverlay(makerss);
    }
    //叠图片 加载动态图片
    var radarLayer =
    new ol.layer.Image({
    source: new ol.source.ImageStatic({
    url: 'ImageDir/20200326091649_Neighbour.jpg',
    projection: 'EPSG:3857',
    imageExtent: ol.proj.transformExtent([113.468897, 36.055732, 119.869576, 42.623632], 'EPSG:4326', 'EPSG:3857')//经纬度一定要设置对 是河北的就给河北的经纬度
    })
    });
    map.addLayer(radarLayer);

    map.addLayer(radarLayer);

    var ttt = map.getLayers()
    if (ttt.getLength() > 2) {
    map.removeLayer(ttt.item(2));
    }


    </script>

  • 相关阅读:
    hdu5728 PowMod
    CF1156E Special Segments of Permutation
    CF1182E Product Oriented Recurrence
    CF1082E Increasing Frequency
    CF623B Array GCD
    CF1168B Good Triple
    CF1175E Minimal Segment Cover
    php 正则
    windows 下安装composer
    windows apache "The requested operation has failed" 启动失败
  • 原文地址:https://www.cnblogs.com/lierjie/p/12606165.html
Copyright © 2011-2022 走看看